Ok a more complete Wordpress theme

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.

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

/* 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 */

Template Markup for Index.php:

<?php get_header(); ?>
<?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 */ ?>
How to create custom page templates?
Create a new file and give it a name like e.g : testing.php and then add this <?php /* Template Name: Testing Template */ ?>
video file name : snip.mp4 / link : https://url.upwork.com/_01W4oosYJFp0LV_nUUZi4ZR8TWU5yclA8p
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.

If you would like to create a video guide on this for the Velara 3 channel I would be glad to list it here or purchase it.

Related posts: