Loading...

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.

Products For WP Professionals


wp_developer

WP Developer Pack

wp_developer

WP Developer Pack (6 Months)

wp_designer

WP Designer Pack (6 Months)

Need a custom solution?

Try our Shop!

Using the Plugin

Layer Support

Layer Tags

How To Guides

Optimization Tips

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Advanced Website

A professional multi-page website design with dynamic height.

Start Your 14 Day Free Trial

New users get instant access to the 14 Day Free Trial with all features enabled, and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, contact us or check our FAQs for assistance.

Connect With Us

Top