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!

Watch more video tutorials.

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.
LOGIN NOW: Get instant access to our free Online Training - click here.

02. Using The Plugin

03. Layer Support

04. Basic Exports

05. Layer Tags

06. Optimization Tips

07. Complete Exports

🚀 Start saving time and money!