Powerful all-in-one package, optimized for creation of fast, secure and scalable websites for large businesses, mass media and even government companies.
When everything is important!
WP BOX includes various premade things for fast start and great success with the following:
Check our blog for how-to guides, examples and detailed explanations related to WP BOX usage.
Use WP BOX code base, that extend native WordPress functionality while keeping outstanding performance and flexibility in building custom solutions.
<?php
namespace WPBOX\PostType;
class Product implements IPostType
{
private static string $post_type_name = 'Product';
private static string $post_type_slug = 'product';
public function __construct()
{
add_action('init', [ $this, 'register' ]);
add_action('init', [ $this, 'register_post_meta' ]);
add_filter('init', [ $this, 'post_type_template' ]);
add_action('generate_rewrite_rules', [ $this, 'rewrite_rules' ], 999);
}
WPBOX backend is full of classes and interfaces for common WordPress objects like Post, Page, User.
It also includes custom classes that autoload Gutenberg blocks and their assets, process uploads, sends emails, interacts with third-party APIs and many other things.
WPBOX theme includes tens of custom blocks, which you can use as is or learn from to build your custom ones – Breadcrumbs, Gallery, Sticky Menus, Single Images, Buttons and Popups.
The projects also includes everything needed for compilation. Simply add your scripts/assets to the correct folders and they will be minified, optimized or compiled and automatically enqueued when needed.
registerBlockType( metadata, {
edit: BlockEdit,
save: BlockSave,
} );
function BlockEdit( props ) {
const {
isSelected,
clientId,
attributes: {
bgColor,
uniqueId,
},
setAttributes,
context: { postType: postTypeSlug },
} = props;
useEffect( () => {
if ( uniqueId === 'section-id' ) {
setAttributes( { uniqueId: clientId } );
}
}, [ clientId, uniqueId, setAttributes ] );
@layer components {
.wpbox-button {
@apply block whitespace-nowrap max-w-fit cursor-pointer text-theme-link hover:text-theme-hover border-2 rounded-md border-theme-link px-4 py-3.5 no-underline hover:bg-theme-bg-hover;
}
.wpbox-modal {
@apply bg-theme-modal backdrop-blur z-40 hidden fixed left-0 top-11 md:top-14 w-full h-full justify-center items-center text-theme-base box-border;
.wpbox-modal-inner {
@apply bg-theme-light-gray max-w-2xl md:max-w-none w-full md:w-600 p-4 md:p-8 rounded-xl flex *:gap-4 *:basis-full flex-wrap relative space-y-6 overflow-y-auto max-h-full;
}
}
Tailwind CSS keeps the style file small and automatically removes unused CSS. To avoid unnecessary overhead, WP BOX also wraps atom elements into custom utility classes.
Custom Tailwind components like .wpbox-button can then be applied to blocks that look the same, but have different functionality. Like a button that just redirects to another page and a button that interacts with backend.
Learn about changes added to the project.
Save time, money and nerves by investing in awesome code base early and be prepared when your project needs it.
50% discount applies on purchases in December 2024/January 2025. Happy New Year!
Visit pricing details page