WordPress Theme Development - Beginner's Guide


WordPress Theme Development - Beginner's Guide
eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats
$20.39
save 15%!
Print + free eBook + free PacktLib access to the book: $63.98    Print cover: $39.99
$39.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • 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

Book Details

Language : English
Paperback : 252 pages [ 235mm x 191mm ]
Release Date : March 2013
ISBN : 1849514224
ISBN 13 : 9781849514224
Author(s) : Rachel McCollin, Tessa Blakeley Silver
Topics and Technologies : All Books, CMS and eCommerce, Beginner's Guides, Open Source, WordPress

Table of Contents

Preface
Chapter 1: Getting Started as a WordPress Theme Designer
Chapter 2: Preparing a Design for Our WordPress Theme
Chapter 3: Coding it Up
Chapter 4: Advanced Theme Features
Chapter 5: Debugging and Validation
Chapter 6: Your Theme in Action
Chapter 7: Tips and tricks
Pop Quiz Answers
Index
  • 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
      • Drawbacks of using an off-the-shelf theme
    • What about premium themes and frameworks?
      • What exactly is a premium theme
      • What is a framework theme
    • Core technology you should understand
      • WordPress
      • CSS
      • HTML
      • PHP
      • Other helpful technologies
    • Tools of the trade
      • HTML editor
      • Graphics editor
      • Web browser
    • Basics of a WordPress theme
      • The template hierarchy
      • The Loop
      • Template tags and API hooks
    • Our development strategies
      • Fonts and typefaces
        • A CSS strategy – font sizing with ems
      • A CSS strategy – working with a CSS framework
        • 960
        • Blueprint
        • Layoutcore
    • Setting up your WordPress sandbox
      • Using WAMP
      • Using MAMP
      • Choosing a hosting provider
      • Rolling out WordPress
    • Summary
    • Chapter 2: Preparing a Design for Our WordPress Theme
      • Getting ready to design
        • Designing in the browser
      • Starting our design
        • Planning and sketching 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
        • The semantic body
      • Time for action – adding in basic HTML structure
      • Time for action – adding in the semantic structure
        • Attaching our CSS stylesheet
      • Time for action – creating and including a style.css shell into your index.php page
        • Prepping for responsiveness – viewport and apple-mobile meta tags
      • Time for action – adding in the viewport and apple-mobile meta tags
        • Adding in content
          • Starting with the text
      • Time for action – adding sample text to our semantic sections
        • Styling our fonts
          • Styling font families
      • Time for Action – assigning your font families
        • Styling font sizes
    • Time for action – sizing your fonts
    • Time for action – handling search engine bots/screen reader text
      • Setting up our layout with CSS
    • Time for action – referencing our layout core to set up our positions
    • Time for Action: Adding our media queries
      • Setting up the desktop view
    • Time for action – standard settings
    • Time for action – checking in on larger desktops
    • Time for action – making sure smaller screens are handled
      • Setting up the tablet view
    • Time for action – adjusting the standard layout for tablets
      • Setting up the small screen view
    • 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
      • Setting up our background images in our stylesheet
    • 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
      • Adding a favicon
    • Time for action – adding the favicon you just created
      • Touch icons
    • Time for action – adding a touch icon
    • Summary
      • Chapter 3: Coding it Up
        • WordPress theme basics
          • The Template hierarchy
            • Why the Template hierarchy works the way it does
          • The WordPress theme API
          • Setting up your WordPress workflow
        • Building your WordPress theme template files
          • Starting with a blank slate
            • Creating a new theme directory
        • Time for action – setting up our theme directory
          • Including WordPress content
      • Time for action – getting your CSS styles to show up
        • Understanding WordPress template tags and hooks
      • Looping it! – The WordPress Loop
        • The Loop in a nutshell – how it works
      • Time for action – creating a basic Loop
      • Time for action – adding content
      • Time for action – adding metadata, the timestamp, and author template tags
        • Keeping up-to-date with WordPress
      • Adding to the Loop
      • Time for action – displaying the number of comments
      • Time for action – adding in autogenerated classes
        • One last look – our full loop
      • Breaking the code up into template files
        • Including everyone
        • Creating a header file
      • Time for action – creating the header.php file
        • Separating out our sidebar
      • Time for action – creating the sidebar.php file
        • Finishing off with the footer
      • Time for action – creating the footer.php template file
      • Time for action – don't forget the plugin hooks
        • Creating a template file for static pages
      • 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
            • Permalinks – a quick guide
          • Menus
            • Registering navigation menus
          • Time for action – registering a navigation menu
          • Time for action – adding menus to our theme's header.php file
            • Setting up our menu
              • Defining our Reading settings
          • Time for action – defining Reading settings
            • Creating a menu
        • Time for action – creating a new WordPress menu
          • Adding pages and other content to our 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
          • The WordPress Menus admin – the possibilities
        • Widgets
          • Registering sidebars or widget areas
        • 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
          • Widget areas – not just for the sidebar and footer
        • Adding widgets in the Widgets admin screen
          • What widgets will we need
        • 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
              • Firefox
                • The Web Developer toolbar
                • Firebug
              • Google Chrome
              • Safari
            • Validation
              • Validating HTML
            • Time for action – validating your HTML
            • Time for action – finding and fixing errors
            • Time for action – fixing our code
              • Validating CSS
            • Time for action – using the W3C's CSS validator
            • Testing on multiple browsers and platforms
              • Which browsers to support
              • Approaches to browser support
                • Graceful degradation
                • Progressive enhancement
            • Troubleshooting basics
              • PHP template tags
              • CSS quick fixes
            • Fixing CSS across browsers
              • Common browser problems
              • Adding an IE-specific stylesheet
            • 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
                • Tidying up your theme
              • Time for action – tidying up your theme
                • Describing your theme in the stylesheet
              • Time for action – describing your theme
                • Your theme's license
              • 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
                  • A search.php file for search results
                • Time for action – creating a search.php template file
                  • Creating a custom page template
                • 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
                  • Conditional tags' syntax
                  • Incorporating conditional tags in our theme
                  • Using conditional tags to hide the home page's title
                • 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
                  • The Theme Customizer
                • 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
                  • Theme Customizer – the possibilities
              • Search engine optimization
                • SEO checklist
                • Clean, valid, standards-compliant code
                • Semantic HTML5
                • Making your theme run faster
                • Search-engine optimized permalinks
                • Optimizing images and links with alt and title attributes
              • Time for action – optimizing a logo for SEO
                • Using optimized meta tags – page titles and descriptions
              • Time for action – optimizing our theme's page meta tags
              • Summary
                • Pop Quiz Answers
                  • Chapter 2, Preparing a Design for Our WordPress Theme
                  • Chapter 3, Coding it Up
                  • Chapter 4, Advanced Theme Features
                  • Chapter 6, Your Theme in Action

                  Rachel McCollin

                  Rachel McCollin is a web designer and developer specializing in WordPress development. She discovered WordPress when looking for a CMS that made the transition from static HTML relatively straightforward, and hasn't looked back since. Rachel runs Compass Design, a web design agency based in Birmingham, England, but with clients across the UK and internationally. The agency was established in 2010 and quickly began specializing in building WordPress themes and sites, with a slant towards responsive themes. The agency now has a great team of designers and developers, including some WordPress specialists.

                  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.

                  Sorry, we don't have any reviews for this title yet.

                  Code Downloads

                  Download the code and support files for this book.


                  Submit Errata

                  Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                  Errata

                  - 9 submitted: last submission 07 Apr 2014

                  Errata type: Typo Page No: FM6

                  About the Reviewers
                  created with a a knowledge and thorough.
                  Should be created with a knowledge and thorough

                  Errata type: Typo Page No: 9

                  Chapter 1
                  “WordPress site with a coding experience ” should be “no coding experience”

                  Errata type: Typo Page No: 9

                  Chapter 1
                  “have been easier to start form scratch” should be “from scratch”

                  Errata type: Content related Page No: 17

                  Chapter 1
                  “plus the Appendix will have a complete Quick Reference “ is incorrect. There is no Appendix in the book

                  Errata type: Code | Page number: 186

                  <body <?php body_class($class); ?>> should be: <body <?php body_class('bg-main'); ?>>

                  Errata type: Code | Page number: 44

                  h1 {
                  font-size: 280%;
                  font-weight: 600;
                  }
                  h2 {
                  font-size: 220%;
                  border-bottom: 1px solid #ccc;
                  padding-bottom: 10px;
                  }
                  h3 {
                  font-size: 180%;
                  }
                  h4{
                  font-size: 200%;
                  color: #999
                  }
                  h5{
                  font-size: 115%;
                  }
                  h6{
                  font-size: 100%;
                  }
                  p {
                  line-height: 150%;

                  margin-bottom: 17px;

                  }

                  Errata type: Code | Page number: 38

                  The code in the second step is as follows

                  <div id="container"><!--container goes here-->
                  <header>
                    <hgroup class="screen-text">
                    <h1>OpenSource</h1>
                      <h2>Online Magazine</h2>
                      <p><em>Using Open Source for work and play</em></p>
                      </hgroup>
                    <div id="date">Current Month and Year</div>
                  </header><!--//header-->

                  Errata type: Technical | Page number: 18

                  The first paragraph under Fonts and typefaces section is incomplete, it should be as follows:

                   

                  Thanks to some special CSS, JavaScript, and Flash techniques, we have more choices today for typography than ever before. However, it's best to start out with the "lowest common denominator" and work with the most common fonts out there first. Sure, we'll enhance our typography later with the @font-face CSS technique or Cufon JavaScript technique, but for now, let's get some basic typography working.

                   

                   

                  Errata type: Code | Page number: 38

                  The 4th line of the code on the page is:

                  <h1>OpenSource</h2>

                  It should be:

                  <h1>OpenSource</h1> 

                  Sample chapters

                  You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                  Frequently bought together

                  WordPress Theme Development - Beginner's Guide +    WordPress Plugin Development Cookbook =
                  50% Off
                  the second eBook
                  Price for both: €27.35

                  Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                  What you will learn from this book

                  • 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.

                  Approach

                  A Beginner's Guide packed with clear step-by-step instructions to create powerful and professional themes for your WordPress website

                  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.

                  Code Download and Errata
                  Packt Anytime, Anywhere
                  Register Books
                  Print Upgrades
                  eBook Downloads
                  Video Support
                  Contact Us
                  Awards Voting Nominations Previous Winners
                  Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                  Resources
                  Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software