WordPress Theme Development : Beginner's Guide - Third Edition

More Information
Learn
  • Design a responsive mock-up for your theme using HTML and CSS
  • Convert your HTML to PHP files to create a WordPress theme
  • Add extra theme files making use of the template hierarchy
  • Add template tags and the loop to display content in your theme
  • Give your theme extra features like menus, widgets and featured images
  • Make your theme SEO-friendly, responsive and accessible
  • Debug and validate your theme to ensure it’s of high quality
  • Learn how to release your theme to the public
About

If you’ve been using WordPress to build websites for yourself or clients, you’ve probably reached a point where you need to build your own theme. Being able to build your own themes means you can build beautiful, bespoke websites using WordPress and means you’re not limited to the themes you can download.

WordPress Theme Development Beginner’s Guide will take you through the process of building your first WordPress theme. It will show you how to write the HTML and CSS your theme will be based on, then convert that code to PHP for use in WordPress. Once you’ve done that you’ll learn how to add more features to your theme and make it responsive, accessible and SEO-friendly.

Start by designing your theme using HTML and CSS, then work through the steps to turn this into a fully functioning WordPress theme, including creating template files, adding template tags and PHP to display content, and giving your theme extra goodies like menus, widget areas and more.

Create a gorgeous, responsive and standards-compliant design for your theme using HTML5 and CSS3. Take your HTML and use it to create PHP template files using the WordPress template hierarchy, then add in template tags and the loop to display pages and posts in your theme. Add widget areas, menus and featured images. Learn how to debug your theme and validate it, ensuring it’s standards-compliant and accessible. Find out what steps you need to take to release your theme to the public, and finally learn some extra tips and tricks such as how to enhance your theme for SEO and how to add support for the WordPress theme customizer.

At the end of WordPress Theme Development Beginner’s Guide you’ll have the skills you need to build quality WordPress themes using your own designs. Working through a straightforward worked example, you’ll learn the steps you need to follow to create a theme from scratch.

Features
  • Learn how to design WordPress themes and build them from scratch
  • Learn how to create a WordPress theme design using HTML5 and CSS3
  • With clear and easy to follow worked examples to help you build your first WordPress theme if you’ve never done it before
Page Count 252
Course Length 7 hours 33 minutes
ISBN 9781849514224
Date Of Publication 25 Mar 2013
Getting ready to design
Starting our design
Time for action – planning our design
Creating your design – from the sketch to the screen
Time for action – creating our static HTML file
Time for action – adding in basic HTML structure
Time for action – adding in the semantic structure
Time for action – creating and including a style.css shell into your index.php page
Time for action – adding in the viewport and apple-mobile meta tags
Time for action – adding sample text to our semantic sections
Time for Action – assigning your font families
Time for action – sizing your fonts
Time for action – handling search engine bots/screen reader text
Time for action – referencing our layout core to set up our positions
Time for Action – Adding our media queries
Time for action – standard settings
Time for action – checking in on larger desktops
Time for action – making sure smaller screens are handled
Time for action – adjusting the standard layout for tablets
Time for action – setting up our small screen layout
Adding design treatments
Time for action – setting up our graphic treatments in the stylesheet
Adding graphics and background images
Time for action – adding background images to our design
Time for action – adding background image styling to the media queries
Don't forget the favicon and touch icon
Time for action – adding the favicon you just created
Time for action – adding a touch icon
Summary
WordPress theme basics
Building your WordPress theme template files
Time for action – setting up our theme directory
Time for action – getting your CSS styles to show up
Time for action – creating a basic Loop
Time for action – adding content
Time for action – adding metadata, the timestamp, and author template tags
Time for action – displaying the number of comments
Time for action – adding in autogenerated classes
Breaking the code up into template files
Time for action – creating the header.php file
Time for action – creating the sidebar.php file
Time for action – creating the footer.php template file
Time for action – don't forget the plugin hooks
Time for action – creating a custom page.php template file
Summary
Site settings
Time for action – configuring your site settings
Time for action – adding the site title and description to your theme
Pretty permalinks
Time for action – setting up pretty permalinks
Menus
Time for action – registering a navigation menu
Time for action – adding menus to our theme's header.php file
Time for action – defining Reading settings
Time for action – creating a new WordPress menu
Time for action – adding pages to a menu
Time for action – adding a custom link to the menu
Time for action – adding a category link to the menu
Widgets
Time for action – registering sidebars in functions.php
Time for action – adding widget areas to sidebar.php
Time for action –adding widget areas to footer.php
Time for action – adding sidebar widgets
Time for action – adding footer widgets
Featured images
Time for action – adding featured images to our theme
Time for action – adding featured images to the site
Time for action – displaying featured images differently in different template files
Parent and child themes
Summary
Debugging and validation workflow
Browser tools for debugging
Validation
Time for action – validating your HTML
Time for action – finding and fixing errors
Time for action – fixing our code
Time for action – using the W3C's CSS validator
Testing on multiple browsers and platforms
Troubleshooting basics
Fixing CSS across browsers
Time for action – setting up an alternative IE stylesheet
Checking your work in Internet Explorer
Time for action – testing our theme with BrowserLab
Testing on mobile devices
Summary
The WordPress Theme Review guidelines
The theme preview screenshot
Time for action – snagging a thumbnail of your theme
Packaging your theme up
Time for action – tidying up your theme
Time for action – describing your theme
Time for action – adding license information to our theme
Zipping up your theme
Time for action – zipping up your theme
One last test
Time for action – testing the theme
Summary
Adding more template files to your theme
Time for action – creating a search.php template file
Time for action – creating a custom page template
Time for action – assigning a custom page template to a page in our site
Working with conditional tags
Time for action – using CSS to hide our home page's title
Time for action – using a conditional tag to hide our home page's title
Time for action - adding the Theme Customizer to our theme
Time for action – adding some more options to the Theme Customizer
Time for action – ensuring Theme Customizer changes are carried through to the CSS
Search engine optimization
Time for action – optimizing a logo for SEO
Time for action – optimizing our theme's page meta tags
Summary

Authors

Tessa Blakeley Silver

Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multi-media development, where she focuses on usability and interface design. Prior to starting her consulting and development company hyper3media (pronounced hyper-cube media) http://hyper3media.com, Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that met online educational requirements like 508, AICC, and SCORM. She has also worked as a consultant and freelancer for J. Walter Thompson and The Diamond Trading Company (formerly known as DeBeers) and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department. Tessa authors several design and web technology blogs. Joomla! Template Design is her first book.

Rachel McCollin

Rachel McCollin is an experienced WordPress developer and writer with a reputation for making difficult technical subjects easy to understand. She's been building WordPress sites for clients since 2010, and this is her fourth book on the technology. She's a regular writer for some of the most influential web design and development websites and her writing has helped thousands of people learn how to get started with WordPress and gain more from it.