part 4: theme build, the CSS
We begin our build with the CSS. First, give the new theme a name and identify it with a screenshot. Proceed to transfer the CSS to the theme file and compare/update the code.
In the previous step, we’ve added our content which will now allow us to implement our prototype as new WP theme. Remember that ‘content first’ this time is a technical requirement ~ without content, parts of our theme might not be displayed at all.
The core steps now are to understand the commonalities and differences between the prorotype design and the theme files. Our prototype is plain HTML and features one file per page — the theme will now split the code into a number of different files.
Our theme folder consists primarily of PHP files (+ css) and features only one bitmap image. This is the screenshot of our new design and will help identify the theme within the WP admin (Appearance > Themes).
Next up, we’ll compare the code structure of our files. Open both the design prototype and the theme as projects within your code editor and set the windows side-by-side for easier comparison. Have a look at the list of files to understand the split of code and check on the code itself.
We can see that our prototype has far fewer files than the prototype. Comparing the index files shows that the theme file does not directly include the opening/closing <html> tags, for example. It is now a matter of putting together our code puzzle :)
Theme name
Before starting to edit our theme, let’s make sure to give it a name and a version number. This will be presented in the admin and allows us to keep track of versions easily. The top of the theme’s CSS is always a comment with details of the theme, starting with the name.
Next up, we replace the rest of the theme’s CSS file with the CSS of our prototype design. Check the code for all file paths and edit those to fit the current code/folder structure; copy any image files used in the design into the related theme folder.
This edit will of course not yet do much at all as we have yet to edit the theme’s PHP files to fit ~ which is our next and final step.