Everything you need to start designing and building production-ready WordPress themes without coding.
Important notice: Action is required to keep blocks working on WordPress 6.4. Learn more >>
Tools
Choose the best tool for your needs:
Pinegrow Web Editor with WordPress Builder
Pinegrow Web Editor is a fully featured HTML and CSS desktop editor that comes with WordPress converter integrated right into the editor. Use it to visually design your WordPress theme.
You should use Pinegrow Web Editor with WordPress theme builder if you do most of HTML and CSS editing with Pinegrow, possibly in combination with code editor like Atom or VS Code.
Pinegrow WordPress Plugin
Pinegrow WordPress Plugin is a plugin for WordPress that brings Pinegrow to the browser, self-hosted on your WordPress site.
You should use the plugin if you conveniently build themes and plugins directly on WordPress sites, without having to upload exported themes and plugins. This is best for less complex projects that do not require version control or for building custom block plugins for existing sites.
Pinegrow Theme Converter
Pinegrow Theme Converter lets you use your favorite website design tool (Webflow, Muse, Blocs, code editor…) to create WordPress themes and plugins. Just export the HTML version of your project and run it through Theme Converter to generate the updated theme.
You should use Pinegrow Theme Converter if you want to use website builder other than Pinegrow Web Editor.
Shop Builder for WooCommerce
Creating custom WooCommerce projects is available with the Shop Builder for WooCommerce add-on that extends the WordPress panel with eCommerce actions.
Skills
Learn everything you need to know about creating WordPress themes:
Overview of the theme creation process. A must-read, describing key WordPress concepts and proving an overview of how to convert static HTML to dynamic WordPress theme.
Theme Settings talks about setting up the information required for creating the theme.
Page Settings and A Guide to template naming cover exporting the individual template files (each WordPress theme consist of one or more templates).
Tutorials & Courses lists a bunch of step-by-step tutorials on creating WordPress themes.
Actions & Examples
Learn more about each Smart action, including description of related WordPress concepts and examples:
Block actions
Block actions let you create custom Gutenberg blocks. Regular React-based blocks, dynamic PHP blocks and ACF blocks are supported.
| Block | Create a new custom block. The action should be placed on the main HTML element that represents the block. |
| Block Attributes | Define and uses one or more editable block attributes on the selected HTML element. |
| Block Inner Content | Define the area within the block that can contain other blocks (sub-blocks). |
| Block Condition | Display elements based on block attribute values. |
Post actions
Post actions are used to show collections of post and their properties. Post actions can be used only in combination with a parent Show Posts action.
| Show Posts | Show Posts action loops through a collection of posts. Post smart actions can then be used on and inside the Show Posts element to display post content. |
| Post Title | Post Title action displays the title of the current post. |
| Post Link | Post Link action displays the link to the current post. |
| Post Content | Post Content action displays the content of the current post. |
| Post Excerpt | Post Excerpt action displays the excerpt of the current post. If excerpt is not set, WordPress generates a snippet from the post content. |
| Post Featured Image | Post Featured Image action shows the featured image of the current post, or the post itself if the post is an image attachment. |
| Post Field | Post Field action displays one or more post field values on different parts of the element. |
| Post Tags & Categories | Post Tags & Categories displays the list of tags, categories or other terms associated with the post. Optionally, it registers a new taxonomy. |
| Post Author | Post Author action is used to display information about the post author. |
| Post Date | Post Date displays the date of the current post in the date format set in WordPress options. |
| Post Pagination | Post Pagination enables navigation between pages of Show Posts results, including next and previous results page links and more. |
Site actions
Site actions are used to display dynamic features that are not related to posts. These actions can be used anywhere on the page.
| Site Name | Site Name action displays the website name and optionally, adds a link to the home page. |
| Site Description | Site Description smart action displays the website description. |
| Site Link | Site Link action adds the link to website home, latest posts archive, individual posts and more. |
| Site Tags & Categories | Site Tags & Categories displays the list of all tags, categories or other terms that are defined on the site. Optionally, registers a new taxonomy. |
| Customizer Field | Customizer Field displays customized texts and images, sets attributes, styles and more. Optionally, it also registers the customizer control. |
| Customizer Section | Customizer Section action registers a new customizer section that contains a group of customizer fields |
| Menu | Menu action displays the navigation menu using the HTML markup of the element. |
| Sidebar | Sidebar action displays a sidebar. Optionally, it also registers one. |
| Reusable Template Part | Reusable Template Part smart action replaces the element with the content of a template part. Optionally, it saves the element and its content as a template part. |
| Form | Form action adds form processing to the enclosed HTML form. |
| Function | Function smart action runs a predefined code snippet or custom code and applies the value to the element. |
| Don’t Export | Use Don’t export action on placeholder elements that should not be exported to the theme. |
Resources
WordPress Starter Theme 2 is a framework for quickly developing your own custom themes based on Bootstrap 4, SASS and WooCommerce.
WordPress Starter Theme 1 is a similar framework, but based on Bootstrap 3.
Bootstrap Blocks for WordPress. Ready-made Bootstrap 3 website sections for building WordPress themes.