Creating WordPress themes | Pinegrow Web Editor
Home/ Documentation/ Creating WordPress themes

Creating WordPress themes

Everything you need to start creating production-ready WordPress themes.

Tools

Choose the best tool for your needs:

Pinegrow Web Editor with WordPress Theme Builder

Pinegrow Web Editor is a fully featured HTML and CSS editor that comes with WordPress converter integrated right into the editor.

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 Theme Converter

Pinegrow Theme Converter lets you use your favorite website design tool (Webflow, Muse, Blocs, code editor…) to create WordPress themes. 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.

Watch a video walkthrough where we’ll convert a one-page portfolio website to a WordPress theme with Pinegrow Theme Converter:

Theme Converter walkthrough

Common features

Both are standalone desktop applications that work on Mac, Windows and Linux and both work with adding WordPress actions to HTML elements.

The difference is that Pinegrow Web Editor stores WordPress actions directly in HTML code (as element attributes) while Pinegrow Theme Converter stores actions in a separate file and maps them back to HTML elements using CSS selectors. That makes Theme Converter usable in combination with other web design tools.

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:

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 PostsShow 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 TitlePost Title action displays the title of the current post.
Post LinkPost Link action displays the link to the current post.
Post ContentPost Content action displays the content of the current post.
Post ExcerptPost Excerpt action displays the excerpt of the current post. If excerpt is not set, WordPress generates a snippet from the post content.
Post Featured ImagePost Featured Image action shows the featured image of the current post, or the post itself if the post is an image attachment.
Post FieldPost Field action displays one or more post field values on different parts of the element.
Post Tags & CategoriesPost Tags & Categories displays the list of tags, categories or other terms associated with the post. Optionally, it registers a new taxonomy.
Post AuthorPost Author action is used to display information about the post author.
Post DatePost Date displays the date of the current post in the date format set in WordPress options.
Post PaginationPost 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 NameSite Name action displays the website name and optionally, adds a link to the home page.
Site DescriptionSite Description smart action displays the website description.
Site LinkSite Link action adds the link to website home, latest posts archive, individual posts and more.
Site Tags & CategoriesSite Tags & Categories displays the list of all tags, categories or other terms that are defined on the site. Optionally, registers a new taxonomy.
Customizer FieldCustomizer Field displays customized texts and images, sets attributes, styles and more. Optionally, it also registers the customizer control.
Customizer SectionCustomizer Section action registers a new customizer section that contains a group of customizer fields
MenuMenu action displays the navigation menu using the HTML markup of the element.
SidebarSidebar action displays a sidebar. Optionally, it also registers one.
Reusable Template PartReusable 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.
FormForm action adds form processing to the enclosed HTML form.
FunctionFunction smart action runs a predefined code snippet or custom code and applies the value to the element.
Don’t ExportUse 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.



Last updated on August 1, 2019 at 9:42 am


Print this article