Ok a more complete Wordpress theme

Web Export
1

Here is a newish WordPress theme you can use as a starting point to gain some functionality.

It is a rough draft but you should be able to use it as a starting point, along with the other wordpress examples, to create a wordpress theme.

You can find it at the examples repository here:

See wordPress-theme-complete.xd.

This is a rough draft so please send bug reports and edits.

Update Jul 2021:
Wordpress changed it’s requirements for the style.css content. It must include all the required properties for it to work. I’ll be working on an update for this in the coming weeks.

Briefly the style.css should contain something similar to this:

/*
Theme Name:        Web Export Theme
Theme URI:         https://github.com/velara3/xd-examples/tree/master/web-export/examples/wordpress
Author:            Velara 3
Author URI:        https://discuss.velara3.com/
Author E-Mail:     contact@velara3.com
Description:       Example theme created with Adobe XD and Web Export
Version:           2021.6.26
Requires at least: 5.0
Tested up to:      5.4
Requires PHP:      7.0
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       webexport
*/
2

It might be good to read the entire post here before starting. There are more instructions in the XD projects (at the repository) and here.

Brief Instructions (also written here):

  • Export the readme artboard (images) to (your theme directory / images) , create a file named (functions.php) and insert theme functionality and functions there , we are exporting index.php and it has get_header(); and get_footer(); so make sure to create seperate header and footer files before exporting index.php
  • Select your (Index) artboard and open up Web Export > Export Artboard
  • Open the Template option and enter the Template markup (shown below)
  • Name the file index.php
  • Export the artboard (index.php) to it’s own directory (example-theme)
  • In that directory create a CSS file named styles.css with your details and styles in it. (shown below)
  • Optionally export an image of your artboard (CMD + E) and name it screenshot.png
  • Zip up all the exported files (example-theme.zip)
  • In your WordPress dashboard go to Themes > Add New > Upload Theme
  • Upload example-theme.zip and then activate it
  • Go to appearance > menu > create a menu and under Menu Settings assign menu location to (Main Menu) - (Registered in functions.php)
  • Similarly Go to appearance > customize > site identity > Add logo (Registered in functions.php)
  • View your site

styles.css:

/*
Theme Name:        Web Export Theme
Theme URI:         https://github.com/velara3/xd-examples/tree/master/web-export/examples/wordpress
Author:            Velara 3
Author URI:        https://discuss.velara3.com/
Author E-Mail:     contact@velara3.com
Description:       Example theme created with Adobe XD and Web Export
Version:           2021.6.26
Requires at least: 5.0
Tested up to:      5.4
Requires PHP:      7.0
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       webexport
*/

Feel free to edit the values above to fit your project.

Template Markup for Index.php:

<?php get_header(); ?>
<!--styles_content-->
<!--application_content-->
<!--scripts-->
<?php get_footer(); ?>
Template Name Template note
header.php “for generating the site’s header”
This template file usually contains your site’s document type, meta information, links to stylesheets and scripts, and other data.
footer.php “for generating the site’s footer”
This template file usually contains information like copyright notices, links to privacy policy, credits, etc.
single.php This template file is used when a visitor requests a single post.
index.php The main template file. It is required in all themes. (we used this template for creating blog page in our theme)
style.css The main stylesheet. It is required in all themes and contains the information header for your theme.
i.e theme name , theme version , about theme author etc.
comments.php The comments template.
page.php This template file is used when visitors request individual pages, which are a built-in template.
archive.php This template file is used when visitors request posts by category, author, or date etc.
search.php The search results template is used to display a visitor’s search results.
404.php The 404 template is used when WordPress cannot find a post, page, or other content that matches the visitor’s request.
search-form-snippet.php They are called “custom page templates”.
sidebar-snippet.php You can create more by adding this comment to your custom page template file :
comment-snippet.php <?php /* Template Name: Example Template */ ?>
functions.php The functions.php file behaves like a WordPress plugin, adding features and functionality to a WordPress site. You can use it to call WordPress functions and to define your own functions.

Additionally:
If you would like to create a video guide on this for the Velara 3 YouTube channel or your own channel I would be glad to list it here (or purchase it for the channel).

Related posts:

3

Look for the WordPress theme macros support in the next build: