The WordPress Theme development crash course will help you gain a better understanding of WordPress themes with both your design and your WordPress theme output. This guide will explain how Export Kit works with developing WordPress themes and the concept behind them.

WordPress themes are very powerful and allow for a lot of features. When you develop WordPress themes in your PSD design, you will have to customize a fair bit of elements to utilize the full power of WordPress themes.

We recommend you read the guides to get a full understanding of WordPress theme development and your PSD design.

WordPress Theme Pages

All WordPress themes render with default page names, these pages are loaded by WordPress and are individually processed depending on the page.

Theme pages should reflect the WordPress Theme Engine for the header and footer. 

Required PHP Pages

You must include these pages or WordPress WILL NOT render.

• ${page:index} index
• ${page:header} header
• ${page:footer} footer

Theme Template Pages

A typical WP Theme will include these template pages to add further customization to the theme.

• ${page:sidebar} sidebar
• ${page:single} single
• ${page:page} page
• ${page:archives} archives
• ${page:404} 404 – note: not all Layer Naming Rules apply with WP
• ${page:search} search

WordPress Template Pages

These files are auto generated by Export Kit in the PSD to WordPress output. These are additional pages WordPress will render if available.

• styles.css
• functions.php
• screenshot.png

Custom Theme Pages

These are customized Page or Post templates for rendering content on your WordPress website.

• [custom theme page].php

WordPress Core

The WordPress core is a structured system to handle many native and custom user methods and styles Export Kit makes it easy to handle many native WordPress functions directly in your XD, PSD, AI or INDD file.

The WordPress core will load its Native Actions first then load the custom Theme Actions to generate each webpage.

1. Native WordPress Actions

This process is done internally by WordPress regardless of the current theme.

• wp-includes
• plugins

2. WordPress Theme Actions

These files are pre-loaded to allow developers to customize the WordPress output before it renders.

• functions.php
• styles.css
• WP Theme Engine

WP Theme Engine

The Theme Engine is broken into 3 main areas:

• header.php
• [theme template].php
• footer.php

Note: Only the [theme template].php file is called, eg. "single.php" - your ${page:single} will do the rest.

WordPress theme templates use sequential calls to get the header, the content and the footer information when rendering webpages. WordPress uses the theme engine as a design model to output content.

The WordPress theme engine is the default rendering engine for WordPress and will allow you to display your HTML webpage with dynamic content from the database.

Layer Output Order

Each PSD layer is processed starting from the last or bottom layer (typically the “Background” layer), then up.

Read more about Organizing your Layers and Folders.

WordPress Theme Templates

WordPress uses a structured rendering order to display your theme template. Although you can render your theme with minimal settings, WordPress recommends you use as many theme template modules as possible.

Note: Some modules are rendered via PHP pages eg. ${page:searchform},then inserted into each template as a ${code} tag.

Eg. get_search_form(); - calls "searchform.php"

WordPress Page Model

All WordPress theme pages follow a general design model to render content. The model suggests you load additional theme pages, such as “header.php” and “footer.php” to correctly render your webpage.

Your individual WordPress page will use your PSD design to generate the required content and correctly render your webpage.

WordPress Page Content

The design model for WordPress theme pages allow for a modular design when generating your website content. Each custom theme page template can have an individual design, further personalizing your website and individual webpages.

You custom theme page must make native WordPress calls to get the “header.php” and “footer.php“, as required by WordPress. There are other WordPress modules made available by Export Kit in your PSD design; such as “sidebar.php“.

Note: Export Kit will automatically load the ${page:header} and ${page:footer} with each theme template.

WordPress assumes each custom theme template page has all the required design and code elements needed to generate. If you want to get a bit more complex in your theme template page, you will have to add the required modules manually; eg. sidebar, comments, or author meta.

The Loop

WordPress will load all, or a limited number of posts/pages (depending on your query), this is called “The WordPress Loop“. The loop will contain all the necessary data to display a post, page, or custom content form the database.

You can style the default WordPress loop using ${css|styles} or create your own custom loop.

Learn more about The WordPress Loop with our online guide.