Convert HTML Designs to WordPress
You can quickly convert your existing HTML design to a WordPress theme in minutes with a few simple steps to follow. Going from HTML to WordPress can often be a difficult task, but is often required as you clients and requirements grow. Export Kit makes it simple to take you current HTML design and convert only the required content to WordPress, with full admin options.
IMPORTANT: Read how to Convert a PSD to HTML and Multiple Pages to get a head start with your conversion.
IMPORTANT: This tutorial is a quick
guide for converting your HTML design to WP, read Convert Your PSD to WordPress for complete instructions.
Step-By-Step Video
Need a visual? Watch our step-by-step tutorial!
Step 1: Create The Required Pages
The first step is to convert your content, [header] and [footer] folders in your PSD to HTML design into pages (if not already). WordPress is unique in nature and has minimal required files for loading. You need to have a [index], [header] and [footer] page to correct load the WordPress framework.
Required PHP Pages
You must include these pages or WordPress WILL NOT
render.
- ${page:index} index
- ${page:header} header
- ${page:footer} footer
Read how to create Multiple Pages in your PSD design, and read our WordPress Crash Course to get familiar with WP Themes.
Step 2: Customize Your Content
You can export your PSD at this point, but you will most likely want to customize the content on your pages to render from the WP database – or from your admin options. Export Kit is powerful and will give you the ability to do both.
${wp_opt|[OPTION ID]:[OPTION NAME]}
- Layers Only
usage: ${wp_opt|home_logo:Logo}
Export Kit works hand-in-hand with the WordPress admin area. You can customize any layer in your PSD design and then edit the property in the WordPress admin, without re-exporting the PSD. This makes it great for the end-user to personalize your WordPress theme to their requirements.
Read how to Convert Your PSD to WordPress for full instructions, or check our WordPress Tags for additional features and options.
Step 3: Export Normally
That’s it… convert your existing HTML design to a WordPress theme – faster than reading this post!
Activate and Test Your Theme
Once your export is complete, you can then copy your output folder to your WordPress themes directory and activate.
Read how to Convert Your PSD to WordPress for full instructions.