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.
themeFromScratch_HTML.zip
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.
themeFromScratch_START.zip
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(); ?>and
< ?php get_footer(); ?> in index.php to fetch the header and footer files.
themeFromScratch_FINAL.zip
Finishing up
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:
Stepping into WordPress
https://codex.wordpress.org/Theme_Customization_API
http://themefoundation.com/wordpress-theme-customizer/
Completed Theme
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.
A significant downside to single-page websites like that are – they are ‘Dead to Google’. Meaning, Google will stop indexing the page after too much content and these sites show up poorly in search engines. They are also a ‘non-Responsive’ style of coding, meaning you are creating a huge page for people to load on their mobile device. Some fancy javascript might clean that up though.
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.
Finally, I wrote a Widget that is installed as part of the theme. In the widget area you can drag this widget to the smooth scroll, and set up latest posts or specific Pages you want to be on the page. If you set your home page to Static, and use the Smooth Scroll Template, it is ready to go. I did not implement the actual javascript to scroll, just the back-end to get it set up. Also, it would be much nicer to convert the widget to a drop-down selection list of Pages to include, but I will leave that as an exercise to the person wanting to do this.
themeFromScratch_Completed.zip