part 2: the vanilla theme
Let’s have a look at the vanilla theme files which will form basis for the new theme build and do one first comparison of code. Instead of the page-by-page markup, the theme code now splits our page elements across multiple files.
The following is a quick summary of the video for reference.
design/file preview
To preview this theme, you’ll have to install and active it on your WordPress website.
The theme folder includes PHP/CSS files as well as subfolders. Code for the website is split into several files.
Next, take a closer look at the code and the WordPress functions which are set up to pull together all parts of your webpages.
comparing code structure
To prepare for the theme build, make yourself familiar with code of both the prototype and the theme files.
Work your way through the files to understand the setup. Pay close attention to the nesting of the content elements, for the CSS to work ~ the same structure has to be established for our theme file’s code.
Our prototype adds the sidebar as an <aside> — withint the main content <div>. The theme’a code at the moment closes that div and adds the sidebar below, something to address during theme build later.