Exporting to a WordPress Theme - Part I and Part II

Web Export has a new template field that allows you to use your own template. This enables you to create a setup that fits the platform you are targeting.

In this example we will be creating a “Hello World” edition of a Word Press theme. The project is attached.

image

The basic steps are as follows (examples attached):

  1. Select your artboard and open up Web Export > Export Artboard
  2. Open the Template option and enter the Wordpress Template markup (shown below)
  3. Name the file index.php (2.2.2 will allow file names with file extensions)
  4. Export the artboard and images to it’s own directory (example-theme)
  5. In that directory create a CSS file named styles.css with your details. (shown below)
    5.5 Optionally export an image of your artboard (CMD + E) and name it screenshot.png
  6. Zip up all the exported files and images in your directory (example-theme.zip)
  7. In your WordPress dashboard go to Themes > Add New > Upload Theme
  8. Upload example-theme.zip and then activate it
  9. View your site

Some links and images may be broken (in earlier examples).

Depending on how you define your hyperlinks you may need to do two things.

  1. Add a base tag to your page (the page template value when you export):

    <base href="location-to-your-theme-directory-here/">
    // or use
    <base href="<?php echo get_stylesheet_directory_uri(); ?>/">
    
  2. Change any relative page or anchor links from “#anchorName” to “/#anchorName

Or if you don’t want to use a base tag as shown above you may have to define the correct path to the images directory.

  1. Find any images or links and add <?php echo get_stylesheet_directory_uri(); ?>/ directly before the file name.

This guide should get you to step one.

There is more to it of course and you can organize your code better by separating out the sections of your page into separate files.

Look for another guide coming soon. Some new Web Export features are coming soon to help this along.

WordPress Template:

<!DOCTYPE html>
<html <?php language_attributes(); ?>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title><?php $title = trim( wp_title( ' ', FALSE ) ); print ''=== $title ? get_bloginfo( 'name' ) : $title; ?></title>
<?php wp_head(); ?>
<!--styles_content-->
<base href="<?php echo get_stylesheet_directory_uri() ?>/"/>
</head>
<!--body_content-->
<?php wp_footer(); ?>

styles.css file:

/*
Theme Name:    Example Theme
Description:   A theme created in Adobe XD CC with Web Export 
Version:       2019.03.05
Author:        Your Name
Author URI:    http://example.com/
Author E-Mail: contact@example.com
*/

After uploading and activating your theme you can make modifications in Wordpress itself by going to the theme editor and copying and pasting any new or modified code.

image

image

Although, if you add any new images to your design you’ll have to export again, zip up your theme and upload again.

There is also the option to create a single HTML page, called a Single Page Application and use the WordPress REST API to get the blog content through AJAX when the page loads.

Example-WordPress-Theme_1.0.0.zip (672.3 KB)

WordPress API more info
WordPress REST API more info

1 Like

WordPress Example 2 adds additional post fields, shows multiple posts at once, sets post text to two columns and resizes to fit content.

image
image

Template:

<!DOCTYPE html>
<html <?php echo language_attributes(); ?>>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title><?php echo get_bloginfo('name')?></title>
<?php wp_head(); ?>
<style>
a:hover, a:hover * {
    text-decoration: underline;
}
a {
    text-align: left;
    text-decoration: none;
    font-family: Helvetica Neue;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    color: rgba(80,83,84,1);
}
</style>
<!--styles_content-->
<base href="<?php echo get_stylesheet_directory_uri() ?>/"/>
</head>
<!--body_content-->
<?php wp_footer(); ?>

WordPress-Example_1.0.2.zip (2.1 MB)