For the Theme From Scratch assignment we have asked that you first create a Photoshop comp of your home page. Next, you converted your comp to plain vanilla HTML/CSS along with an additional page that represents a typical blog post page. The final step is to convert this HTML code into the Templates that WordPress uses to create websites using it’s database and CMS. It’s simpler than you think.
First, read how WordPress breaks pages down into various components in Stepping into WordPress, the major components being Header, Content, Footer and Sidebar. Next, put comments into your HTML to indicate the start and end of these elements.
I decided to use fairly complex code from Brad Frost’s Mobile-First Responsive Design tutorial as an example. Rather than walk you through the code step by step, I will upload the code in three stages – HTML, HTML broken up into Templates as a Theme and finally the Theme with options put in place that strip away the placement images and use theme options.
Stage 1 – Working HTML code
HTML code working on my server with existing tutorial images and stylesheets.
Stage 2 – Start of the Theme
This is simply the HTML code broken into three parts. Still not really using the WordPress database, but making sure the core code displays correctly. Note, this version is simply broken up, and the image links and stylesheet links don’t work yet.
Stage 3 – Theme with user options
The final stage replaces the hard-coded logo with a user-provided logo for the site and ability to customize header image and background image. The theme is not finished, but one by one, we need to insert dynamic elements that can be used in place of the hard-coded HTML from our first stage. So far, I have replaced the Site Title, Header Menu, Footer Menu and Search functions with WordPress functions and data.
Key elements to note are- use
< ?php echo get_template_directory_uri(); ?>
to get the path to link images and stylesheets. Put
< ?php get_header(); ?>
< ?php get_footer(); ?>
in index.php to fetch the header and footer files.
You will need to read Stepping into WordPress to fully understand the WordPress Loop, which is the the main content area to really understand where and how to place that in your index.php page based on your design. After that, it’s fairly straightforward to add a sidebar.php and widget area based on the WordPress documentation and examples. Useful tutorials I used to create this example are:
The last thing to implement is The Loop, which is the body of the index pages and represent the actual blog posts, page content, galleries, etc. that users enter in the WordPress Dashboard. You will have to make some design decisions at this point, depending on your page layout. I decided to create a design that could use side scrolling or ‘smooth scroll’ since so many students seem to want to do that. This entails putting many posts and pages onto a single home page so that a click will cause the page to smoothly scroll by to the new content.
Nevertheless, to accomplish this I made some design decisions. First, we still need a standard index.php page to handle searches, error pages, archives and all the other pages so I kept that as my basic page. For any page I want to be smooth scrolling, I created a new Page Template called ‘page-smooth-scroll.php’. This page only loads the header, footer and a new sidebar/widget area called ‘sidebar-smooth-scroll.php’. The page shows up in the Pages options when creating a new Page, and the sidebar shows up in the Widget area. You can drag any widget onto the sidebar and voila, it is on any page that uses the custom Page Template.