Cover image for WordPress Theme Development Beginner's Guide

WordPress Theme Development Beginner's Guide

Author Tessa Blakeley Silver , Rachel McCollin
Release Date: 2013/03/01
ISBN: 9781849514224
Topic:
0%
140
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

With a little knowledge of HTML and CSS, you can kiss goodbye to third-party themes for your self-hosted WordPress sites and start building your own. This beginner’s guide shows you how in plain language and clear instructions.

  • 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

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.

Table of Contents

  1. WordPress Theme Development Beginner's Guide
    1. Table of Contents
    2. WordPress Theme Development Beginner's Guide
    3. Credits
    4. About the Authors
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. Who this book is for
      3. Conventions
      4. Time for action – heading
        1. What just happened?
        2. Pop quiz – heading
        3. Have a go hero – heading
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Getting Started as a WordPress Theme Designer
      1. Overview of WordPress perks
      2. Does a WordPress site have to be a blog ?
      3. Pick a theme or design of your own
        1. Drawbacks of using an off-the-shelf theme
      4. What about premium themes and frameworks?
        1. What exactly is a premium theme
        2. What is a framework theme
      5. Core technology you should understand
        1. WordPress
        2. CSS
        3. HTML
        4. PHP
        5. Other helpful technologies
      6. Tools of the trade
        1. HTML editor
        2. Graphics editor
        3. Web browser
      7. Basics of a WordPress theme
        1. The template hierarchy
        2. The Loop
        3. Template tags and API hooks
      8. Our development strategies
        1. Fonts and typefaces
          1. A CSS strategy – font sizing with ems
        2. A CSS strategy – working with a CSS framework
          1. 960
          2. Blueprint
          3. Layoutcore
      9. Setting up your WordPress sandbox
        1. Using WAMP
        2. Using MAMP
        3. Choosing a hosting provider
        4. Rolling out WordPress
      10. Summary
    9. 2. Preparing a Design for Our WordPress Theme
      1. Getting ready to design
        1. Designing in the browser
      2. Starting our design
        1. Planning and sketching our design
      3. Time for action – planning our design
        1. What just happened?
      4. Creating your design – from the sketch to the screen
      5. Time for action – creating our static HTML file
        1. What just happened?
        2. The semantic body
      6. Time for action – adding in basic HTML structure
        1. What just happened?
      7. Time for action – adding in the semantic structure
        1. What just happened?
        2. Attaching our CSS stylesheet
      8. Time for action – creating and including a style.css shell into your index.php page
        1. What just happened?
        2. Prepping for responsiveness – viewport and apple-mobile meta tags
      9. Time for action – adding in the viewport and apple-mobile meta tags
        1. What just happened?
        2. Adding in content
          1. Starting with the text
      10. Time for action – adding sample text to our semantic sections
        1. What just happened?
        2. Styling our fonts
          1. Styling font families
      11. Time for Action – assigning your font families
        1. What just happened?
          1. @font-face techniques
          2. Styling font sizes
      12. Time for action – sizing your fonts
        1. What just happened?
      13. Time for action – handling search engine bots/screen reader text
        1. What just happened?
        2. Setting up our layout with CSS
      14. Time for action – referencing our layout core to set up our positions
        1. What just happened?
      15. Time for Action – Adding our media queries
        1. What just happened?
        2. Setting up the desktop view
      16. Time for action – standard settings
        1. What just happened?
      17. Time for action – checking in on larger desktops
        1. What just happened?
      18. Time for action – making sure smaller screens are handled
        1. What just happened?
        2. Setting up the tablet view
      19. Time for action – adjusting the standard layout for tablets
        1. What just happened?
        2. Setting up the small screen view
      20. Time for action – setting up our small screen layout
        1. What just happened?
      21. Adding design treatments
      22. Time for action – setting up our graphic treatments in the stylesheet
        1. What just happened?
      23. Adding graphics and background images
        1. Setting up our background images in our stylesheet
      24. Time for action – adding background images to our design
        1. What just happened?
      25. Time for action – adding background image styling to the media queries
        1. What just happened?
      26. Don't forget the favicon and touch icon
        1. Adding a favicon
      27. Time for action – adding the favicon you just created
        1. What just happened?
        2. Have a go hero – making your favicon high-resolution
        3. Touch icons
      28. Time for action – adding a touch icon
        1. What just happened?
        2. Pop quiz – questions about theme design
      29. Summary
    10. 3. Coding it Up
      1. WordPress theme basics
        1. The Template hierarchy
          1. Why the Template hierarchy works the way it does
        2. The WordPress theme API
        3. Setting up your WordPress workflow
      2. Building your WordPress theme template files
        1. Starting with a blank slate
          1. Creating a new theme directory
      3. Time for action – setting up our theme directory
        1. What just happened?
          1. Including WordPress content
      4. Time for action – getting your CSS styles to show up
        1. What just happened?
          1. Understanding WordPress template tags and hooks
            1. Template tags
            2. Hooks
        2. Looping it! – The WordPress Loop
          1. The Loop in a nutshell – how it works
      5. Time for action – creating a basic Loop
        1. What just happened?
      6. Time for action – adding content
        1. What just happened?
      7. Time for action – adding metadata, the timestamp, and author template tags
        1. What just happened?
          1. Keeping up-to-date with WordPress
        2. Adding to the Loop
      8. Time for action – displaying the number of comments
        1. What just happened?
      9. Time for action – adding in autogenerated classes
        1. What just happened?
          1. One last look – our full loop
      10. Breaking the code up into template files
        1. Including everyone
        2. Creating a header file
      11. Time for action – creating the header.php file
        1. What just happened?
        2. Separating out our sidebar
      12. Time for action – creating the sidebar.php file
        1. What just happened?
        2. Finishing off with the footer
      13. Time for action – creating the footer.php template file
        1. What just happened
      14. Time for action – don't forget the plugin hooks
        1. What just happened
        2. Creating a template file for static pages
      15. Time for action – creating a custom page.php template file
        1. What just happened?
        2. Pop Quiz – questions about WordPress theme structure
      16. Summary
    11. 4. Advanced Theme Features
      1. Site settings
      2. Time for action – configuring your site settings
        1. What just happened?
      3. Time for action – adding the site title and description to your theme
        1. What just happened?
      4. Pretty permalinks
      5. Time for action – setting up pretty permalinks
        1. What just happened?
        2. Permalinks – a quick guide
      6. Menus
        1. Registering navigation menus
      7. Time for action – registering a navigation menu
        1. What just happened?
      8. Time for action – adding menus to our theme's header.php file
        1. What just happened?
        2. Setting up our menu
          1. Defining our Reading settings
      9. Time for action – defining Reading settings
        1. What just happened?
          1. Creating a menu
      10. Time for action – creating a new WordPress menu
        1. What just happened?
          1. Adding pages and other content to our menu
      11. Time for action – adding pages to a menu
        1. What just happened?
      12. Time for action – adding a custom link to the menu
        1. What just happened?
      13. Time for action – adding a category link to the menu
        1. What just happened?
          1. The WordPress Menus admin – the possibilities
      14. Widgets
        1. Registering sidebars or widget areas
      15. Time for action – registering sidebars in functions.php
        1. What just happened?
      16. Time for action – adding widget areas to sidebar.php
        1. What just happened?
      17. Time for action –adding widget areas to footer.php
        1. What just happened?
          1. Widget areas – not just for the sidebar and footer
        2. Adding widgets in the Widgets admin screen
          1. What widgets will we need
      18. Time for action – adding sidebar widgets
        1. What just happened?
      19. Time for action – adding footer widgets
        1. What just happened?
      20. Featured images
      21. Time for action – adding featured images to our theme
        1. What just happened?
      22. Time for action – adding featured images to the site
        1. What just happened?
      23. Time for action – displaying featured images differently in different template files
        1. What just happened?
      24. Parent and child themes
        1. Pop Quiz – understanding advanced theme features
      25. Summary
    12. 5. Debugging and Validation
      1. Debugging and validation workflow
      2. Browser tools for debugging
        1. Firefox
          1. The Web Developer toolbar
          2. Firebug
        2. Google Chrome
        3. Safari
      3. Validation
        1. Validating HTML
      4. Time for action – validating your HTML
        1. What just happened?
      5. Time for action – finding and fixing errors
        1. What just happened?
      6. Time for action – fixing our code
        1. What just happened?
        2. Validating CSS
      7. Time for action – using the W3C's CSS validator
        1. What just happened?
      8. Testing on multiple browsers and platforms
        1. Which browsers to support
        2. Approaches to browser support
          1. Graceful degradation
          2. Progressive enhancement
      9. Troubleshooting basics
        1. PHP template tags
        2. CSS quick fixes
      10. Fixing CSS across browsers
        1. Common browser problems
        2. Adding an IE-specific stylesheet
      11. Time for action – setting up an alternative IE stylesheet
        1. What just happened?
      12. Checking your work in Internet Explorer
      13. Time for action – testing our theme with BrowserLab
        1. What just happened?
      14. Testing on mobile devices
      15. Summary
    13. 6. Your Theme in Action
      1. The WordPress Theme Review guidelines
      2. The theme preview screenshot
      3. Time for action – snagging a thumbnail of your theme
        1. What just happened?
      4. Packaging your theme up
        1. Tidying up your theme
      5. Time for action – tidying up your theme
        1. What just happened?
        2. Describing your theme in the stylesheet
      6. Time for action – describing your theme
        1. What just happened?
        2. Your theme's license
      7. Time for action – adding license information to our theme
        1. What just happened?
      8. Zipping up your theme
      9. Time for action – zipping up your theme
        1. What just happened?
      10. One last test
      11. Time for action – testing the theme
        1. What just happened?
        2. Have a go hero – using the WordPress Theme Unit Test
        3. Pop Quiz - questions on packaging up your theme
      12. Summary
    14. 7. Tips and tricks
      1. Adding more template files to your theme
        1. A search.php file for search results
      2. Time for action – creating a search.php template file
        1. What just happened?
        2. Creating a custom page template
      3. Time for action – creating a custom page template
        1. What just happened?
      4. Time for action – assigning a custom page template to a page in our site
        1. What just happened?
        2. Have a go hero – styling the custom page template
      5. Working with conditional tags
        1. Conditional tags' syntax
        2. Incorporating conditional tags in our theme
        3. Using conditional tags to hide the home page's title
      6. Time for action – using CSS to hide our home page's title
        1. What just happened?
      7. Time for action – using a conditional tag to hide our home page's title
        1. What just happened?
        2. Have a go hero – other ways of showing conditional content
        3. The Theme Customizer
      8. Time for action - adding the Theme Customizer to our theme
        1. What just happened?
      9. Time for action – adding some more options to the Theme Customizer
        1. What just happened?
      10. Time for action – ensuring Theme Customizer changes are carried through to the CSS
        1. What just happened?
          1. Theme Customizer – the possibilities
        2. Have a go hero – adding a theme options screen
      11. Search engine optimization
        1. SEO checklist
        2. Clean, valid, standards-compliant code
        3. Semantic HTML5
        4. Making your theme run faster
        5. Search-engine optimized permalinks
        6. Optimizing images and links with alt and title attributes
      12. Time for action – optimizing a logo for SEO
        1. What just happened?
        2. Using optimized meta tags – page titles and descriptions
      13. Time for action – optimizing our theme's page meta tags
        1. What just happened?
      14. Summary
    15. Pop Quiz Answers
      1. Chapter 2, Preparing a Design for Our WordPress Theme
        1. Pop quiz – questions about theme design
      2. Chapter 3, Coding it Up
        1. Pop quiz – questions about WordPress theme structure
      3. Chapter 4, Advanced Theme Features
        1. Pop quiz – understanding advanced theme features
      4. Chapter 6, Your Theme in Action
        1. Pop quiz – questions on packaging up your theme
    16. Index
13.59.136.170