WordPress Theme Development : Beginner's Guide - Third Edition
-
Free ChapterGetting Started as a WordPress Theme Designer
- 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
-
Preparing a Design for Our WordPress Theme
- 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
-
Coding it Up
- 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
-
Advanced Theme Features
- 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
-
Debugging and Validation
- 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
-
Your Theme in Action
- 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
-
Tips and tricks
- 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
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.
- Publication date:
- March 2013
- Publisher
- Packt
- Pages
- 252
- ISBN
- 9781849514224