Free Sample
+ Collection

WordPress Theme Development : Beginner's Guide - Third Edition

Beginner's Guide
Rachel McCollin, Tessa Blakeley Silver

Learn how to design and build great WordPress themes
$23.99
$39.99
RRP $23.99
RRP $39.99
eBook
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849514224
Paperback252 pages

About This Book

  • 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

Who This Book Is For

If you’ve used WordPress to create self-hosted websites using themes you’ve downloaded but want to start building your own, this book is for you. You will need an understanding of how to use WordPress and some understanding of HTML and CSS. Simple PHP will be included in the book but you don’t need any prior PHP knowledge or experience – it will all be explained for you.

Table of Contents

Chapter 1: Getting Started as a WordPress Theme Designer
Overview of WordPress perks
Does a WordPress site have to be a blog ?
Pick a theme or design of your own
What about premium themes and frameworks?
Core technology you should understand
Tools of the trade
Basics of a WordPress theme
Our development strategies
Setting up your WordPress sandbox
Summary
Chapter 2: Preparing a Design for Our WordPress Theme
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
Chapter 3: Coding it Up
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
Chapter 4: Advanced Theme Features
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
Chapter 5: Debugging and Validation
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
Chapter 6: Your Theme in Action
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
Chapter 7: Tips and tricks
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

What You Will 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

In Detail

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.

Authors

Read More