April 28th, 2020 by prisca
This tutorial is intended to walk you through the transfer of a given design to a WordPress theme. Please note that there is no audio and you might want to pause certain screens as I’ve tried to keep the length down and file size light.
To work along, I’ve prepared the files used in the videos as source files for you to download — and you are most welcome to keep using the vanilla theme on your own projects, of course :) open source \m/
↓ download prototype files (HTML/CSS)
The design prototype files, including 3 HTML sample pages and relating scripts
↓ download vanilla theme (PHP/CSS)
The theme files for the vanilla theme named ‘eyestyle’
demo of our vanilla theme
To show you what we’ll be using for the tutorial, I’ve set up a default WP site ~ keeping the very same content as given by default and using the vanilla theme for design. This shows you how your new WP site will look when you first install it and active this theme. Have a look!
This means the site includes only a single page, one post and category and a sample comment. The sidebar features the default example links.
Vanilla?
The term “vanilla” is used in the technical field to express the state of something as ‘plain’ or ‘default’. Applied to hardware as well as software, a vanilla version lacks refinement or customisation and is unmodified.
A vanilla WordPress theme is one that gives you the skeleton of the site, including only the core code which you will use as basis/foundation to build upon for your new theme. Well, that’s the theory anyway… If you search for Vanilla themes online, you will come across various degrees of complexity. As a newbie to WP, some might be too fragmented to start with. When you’re familiar with theme building, you will find those easier to understand and explore. Once you’re on your way – which avenue you choose to take for your theme builds will be up to. Many developers prefer a skeleton framework and find that most productive. Others thrive in complex systems and prefer a more specific starting point. The most important aspect for all remains to deliver a fast and easy-to-use website ;)
Posted in the tutorial | Comments Off on Tutorial files
April 14th, 2020 by prisca
We take a look at the design in hand, the prototype and its markup. Before you can work with this design, preview in browser, check the responsive layouts and menu toggles. Have a look at the files for subfolders and additional files, such as images.
Then take a closer look at the markup to know how the menu toggle is set up, what the code structure is for the different page elements.
Read the rest of this entry » Posted in the tutorial | Comments Off on part 1: the design prototype
April 13th, 2020 by prisca
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.
Read the rest of this entry » Posted in the tutorial | Comments Off on part 2: the vanilla theme
April 12th, 2020 by prisca
Before you can begin your theme build, your website has to have its content. This goes with our working method of ‘content out’ and has very practical reasons for the theme build. As webpages on our WordPress site are presented via settings, content in database and theme settings – you’ll have to prepare your website, input content (exemplary at least) and set up the site menu. Once content is in and structure in place, you’re ready to build the theme.
Read the rest of this entry » Posted in the tutorial | Comments Off on part 3: the content + structure
April 11th, 2020 by prisca
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.
Read the rest of this entry » Posted in the tutorial | Comments Off on part 4: theme build, the CSS
April 10th, 2020 by prisca
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.
Read the rest of this entry » Posted in the tutorial | Comments Off on part 5: theme build, the templates
