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.
Proceed to compare the code structure across the template files to understand how content is presented. One of the core aspects of WordPress is it’s loop. This will run repeatedly as set and pull in related content.
For example: our prototype page might include 2 or more articles 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.
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.
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.