Design/build: WordPress themes

from design prototype to theme : how to get started

part 5: theme build, the templates

The final step is now the longest and most involved – to compare all code and ensure it is the same structure across all files, resulting in the same mark up as the prototype. The video will show you how to start and cover the core files ~ to complete the build, you’ll have to check on all .php files in the theme folder.

The puzzle to solve now is which theme files are being used across our new site — the prototype’s code structure now has to be mirrored in the theme files in order to implement our design.

The main difference between our prototype and the theme files is that the prototype marks up the content elements specifically while the theme files include functions and loops to pull those elements out of the database.

For example: our index.html file start with DOCTYPE, opens the <html> tag, shows the full <head> tag and opens the <body> tag. The theme’s index.php file however shows the WordPress function <?php wp_head(); ?> instead. This action hook is vital to all pages and will pull in the header.php file (which in turns includes all our prototype file does) and can be extended.

How does the content end up on the page?

One of the main stumbling blocks in terms of understanding is how the content added via the editor ends up being shown on the webpage once published. In short, the content gets added to the editor and saved to the database ~ related details such as date, author and tags are added as well. Once published and viewed, the related theme file gets accessed and the code will pull in the content.

The title of our page or post will be get retrieved via <?php the_title(); ?> as the first element within our <article> tag. This is followed by the function for the core content.

Looking at the page.php file – we can see this function: <?php the_content(); ?> which is what will retrieve the content from the database and present it on the page. This is an inner element inside our <article> tag and will render the formatted text and all content.

When we check the category.php for the same, we can see that in this case, the loop now uses <?php the_excerpt(); ?> function which will not get the full content but an excerpt instead. The single.php file again uses the <?php the_content(); ?>.

We can use the InspectElement to check on the final output:

Code structure edits

Proceed to compare the code structure across the template files to understand how content is presented. One of the core aspects of WordPress is its loop. This will run repeatedly as set and pull in related content.

For example: our prototype page might include 2 or more <article> tags within a given page. In our WordPress site, we will have created separate posts which will now need to be pulled out of the database to be shown. This is where the loop comes in — it will run through its functions and checks, access the content and then run again for any additional posts. We will need to ensure that the <article> tag itself is inside the loop in order to mirror our prototype’s structure.

This is a very clear logic but be warned — it is also the most likely part of the code you will break while you’re learning :D but once you’ve got your head around this, it will be fairly easy to work with.

Additional files

Once our code files have been edited, the final additions are any JS functions and the font CSS file. While it is possible to keep this code within the theme files (as in the prototype) – the recommended method is to use wp_register_script() within the functions.php file. WordPress will load a number of scripts already (such as jQuery) and this method will allow you to register new scripts and enqueue them correct, do read up in the codex for more details.

For our design’s menu toggle, we’re using CSS only ~ so the only addition left is now to link out webfont. We’ll then call this file from within the functions.php.

If your CSS rules do not apply to your page as you planned in your prototype, you can change your CSS selectors according to the HTML structure output by WordPress. Open the page in the browser and use DevTools to inspect the HTML structure.
Note: you will also see new CSS classes and ids that have been added by WP which you can use in your CSS to further tweak your design or add missing rules.

Install & activate theme + test! test! test!

Once we’re done, the final step is now to upload the theme and activate it for testing. You can use the ‘upload’ function in WP admin (Appearance > Themes > Add New > Upload) to upload the theme folder as ZIP archive ~ or you can add the folder manually via FTP.

Bear in mind that WordPress has a whole suite of folders which are essential to run the software as well as perform updates. The only folder you should ever use for your files is the wp-content folder ~ which houses the theme folder into which you’ll upload your new theme.

April 10th, 2020 by prisca