WP Theme Development Crash Course
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
.
UNLIMITED
theme pages with Export Kit in a single PSD – so don’t be shy!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.