Home Page Icon
Home Page
Table of Contents for
Table of Contents
Close
Table of Contents
by Tessa Blakeley Silver, Rachel McCollin
WordPress Theme Development Beginner's Guide
WordPress Theme Development Beginner's Guide
Table of Contents
WordPress Theme Development Beginner's Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
Who this book is for
Conventions
Time for action – heading
What just happened?
Pop quiz – heading
Have a go hero – heading
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
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
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
What just happened?
Creating your design – from the sketch to the screen
Time for action – creating our static HTML file
What just happened?
The semantic body
Time for action – adding in basic HTML structure
What just happened?
Time for action – adding in the semantic structure
What just happened?
Attaching our CSS stylesheet
Time for action – creating and including a style.css shell into your index.php page
What just happened?
Prepping for responsiveness – viewport and apple-mobile meta tags
Time for action – adding in the viewport and apple-mobile meta tags
What just happened?
Adding in content
Starting with the text
Time for action – adding sample text to our semantic sections
What just happened?
Styling our fonts
Styling font families
Time for Action – assigning your font families
What just happened?
@font-face techniques
Styling font sizes
Time for action – sizing your fonts
What just happened?
Time for action – handling search engine bots/screen reader text
What just happened?
Setting up our layout with CSS
Time for action – referencing our layout core to set up our positions
What just happened?
Time for Action – Adding our media queries
What just happened?
Setting up the desktop view
Time for action – standard settings
What just happened?
Time for action – checking in on larger desktops
What just happened?
Time for action – making sure smaller screens are handled
What just happened?
Setting up the tablet view
Time for action – adjusting the standard layout for tablets
What just happened?
Setting up the small screen view
Time for action – setting up our small screen layout
What just happened?
Adding design treatments
Time for action – setting up our graphic treatments in the stylesheet
What just happened?
Adding graphics and background images
Setting up our background images in our stylesheet
Time for action – adding background images to our design
What just happened?
Time for action – adding background image styling to the media queries
What just happened?
Don't forget the favicon and touch icon
Adding a favicon
Time for action – adding the favicon you just created
What just happened?
Have a go hero – making your favicon high-resolution
Touch icons
Time for action – adding a touch icon
What just happened?
Pop quiz – questions about theme design
Summary
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
What just happened?
Including WordPress content
Time for action – getting your CSS styles to show up
What just happened?
Understanding WordPress template tags and hooks
Template tags
Hooks
Looping it! – The WordPress Loop
The Loop in a nutshell – how it works
Time for action – creating a basic Loop
What just happened?
Time for action – adding content
What just happened?
Time for action – adding metadata, the timestamp, and author template tags
What just happened?
Keeping up-to-date with WordPress
Adding to the Loop
Time for action – displaying the number of comments
What just happened?
Time for action – adding in autogenerated classes
What just happened?
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
What just happened?
Separating out our sidebar
Time for action – creating the sidebar.php file
What just happened?
Finishing off with the footer
Time for action – creating the footer.php template file
What just happened
Time for action – don't forget the plugin hooks
What just happened
Creating a template file for static pages
Time for action – creating a custom page.php template file
What just happened?
Pop Quiz – questions about WordPress theme structure
Summary
4. Advanced Theme Features
Site settings
Time for action – configuring your site settings
What just happened?
Time for action – adding the site title and description to your theme
What just happened?
Pretty permalinks
Time for action – setting up pretty permalinks
What just happened?
Permalinks – a quick guide
Menus
Registering navigation menus
Time for action – registering a navigation menu
What just happened?
Time for action – adding menus to our theme's header.php file
What just happened?
Setting up our menu
Defining our Reading settings
Time for action – defining Reading settings
What just happened?
Creating a menu
Time for action – creating a new WordPress menu
What just happened?
Adding pages and other content to our menu
Time for action – adding pages to a menu
What just happened?
Time for action – adding a custom link to the menu
What just happened?
Time for action – adding a category link to the menu
What just happened?
The WordPress Menus admin – the possibilities
Widgets
Registering sidebars or widget areas
Time for action – registering sidebars in functions.php
What just happened?
Time for action – adding widget areas to sidebar.php
What just happened?
Time for action –adding widget areas to footer.php
What just happened?
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
What just happened?
Time for action – adding footer widgets
What just happened?
Featured images
Time for action – adding featured images to our theme
What just happened?
Time for action – adding featured images to the site
What just happened?
Time for action – displaying featured images differently in different template files
What just happened?
Parent and child themes
Pop Quiz – understanding advanced theme features
Summary
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
What just happened?
Time for action – finding and fixing errors
What just happened?
Time for action – fixing our code
What just happened?
Validating CSS
Time for action – using the W3C's CSS validator
What just happened?
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
What just happened?
Checking your work in Internet Explorer
Time for action – testing our theme with BrowserLab
What just happened?
Testing on mobile devices
Summary
6. Your Theme in Action
The WordPress Theme Review guidelines
The theme preview screenshot
Time for action – snagging a thumbnail of your theme
What just happened?
Packaging your theme up
Tidying up your theme
Time for action – tidying up your theme
What just happened?
Describing your theme in the stylesheet
Time for action – describing your theme
What just happened?
Your theme's license
Time for action – adding license information to our theme
What just happened?
Zipping up your theme
Time for action – zipping up your theme
What just happened?
One last test
Time for action – testing the theme
What just happened?
Have a go hero – using the WordPress Theme Unit Test
Pop Quiz - questions on packaging up your theme
Summary
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
What just happened?
Creating a custom page template
Time for action – creating a custom page template
What just happened?
Time for action – assigning a custom page template to a page in our site
What just happened?
Have a go hero – styling the custom page template
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
What just happened?
Time for action – using a conditional tag to hide our home page's title
What just happened?
Have a go hero – other ways of showing conditional content
The Theme Customizer
Time for action - adding the Theme Customizer to our theme
What just happened?
Time for action – adding some more options to the Theme Customizer
What just happened?
Time for action – ensuring Theme Customizer changes are carried through to the CSS
What just happened?
Theme Customizer – the possibilities
Have a go hero – adding a theme options screen
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
What just happened?
Using optimized meta tags – page titles and descriptions
Time for action – optimizing our theme's page meta tags
What just happened?
Summary
Pop Quiz Answers
Chapter 2, Preparing a Design for Our WordPress Theme
Pop quiz – questions about theme design
Chapter 3, Coding it Up
Pop quiz – questions about WordPress theme structure
Chapter 4, Advanced Theme Features
Pop quiz – understanding advanced theme features
Chapter 6, Your Theme in Action
Pop quiz – questions on packaging up your theme
Index
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
Cover
Next
Next Chapter
WordPress Theme Development Beginner's Guide
Table of Contents
WordPress Theme Development Beginner's Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
Who this book is for
Conventions
Time for action – heading
What just happened?
Pop quiz – heading
Have a go hero – heading
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
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
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
What just happened?
Creating your design – from the sketch to the screen
Time for action – creating our static HTML file
What just happened?
The semantic body
Time for action – adding in basic HTML structure
What just happened?
Time for action – adding in the semantic structure
What just happened?
Attaching our CSS stylesheet
Time for action – creating and including a style.css shell into your index.php page
What just happened?
Prepping for responsiveness – viewport and apple-mobile meta tags
Time for action – adding in the viewport and apple-mobile meta tags
What just happened?
Adding in content
Starting with the text
Time for action – adding sample text to our semantic sections
What just happened?
Styling our fonts
Styling font families
Time for Action – assigning your font families
What just happened?
@font-face techniques
Styling font sizes
Time for action – sizing your fonts
What just happened?
Time for action – handling search engine bots/screen reader text
What just happened?
Setting up our layout with CSS
Time for action – referencing our layout core to set up our positions
What just happened?
Time for Action – Adding our media queries
What just happened?
Setting up the desktop view
Time for action – standard settings
What just happened?
Time for action – checking in on larger desktops
What just happened?
Time for action – making sure smaller screens are handled
What just happened?
Setting up the tablet view
Time for action – adjusting the standard layout for tablets
What just happened?
Setting up the small screen view
Time for action – setting up our small screen layout
What just happened?
Adding design treatments
Time for action – setting up our graphic treatments in the stylesheet
What just happened?
Adding graphics and background images
Setting up our background images in our stylesheet
Time for action – adding background images to our design
What just happened?
Time for action – adding background image styling to the media queries
What just happened?
Don't forget the favicon and touch icon
Adding a favicon
Time for action – adding the favicon you just created
What just happened?
Have a go hero – making your favicon high-resolution
Touch icons
Time for action – adding a touch icon
What just happened?
Pop quiz – questions about theme design
Summary
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
What just happened?
Including WordPress content
Time for action – getting your CSS styles to show up
What just happened?
Understanding WordPress template tags and hooks
Template tags
Hooks
Looping it! – The WordPress Loop
The Loop in a nutshell – how it works
Time for action – creating a basic Loop
What just happened?
Time for action – adding content
What just happened?
Time for action – adding metadata, the timestamp, and author template tags
What just happened?
Keeping up-to-date with WordPress
Adding to the Loop
Time for action – displaying the number of comments
What just happened?
Time for action – adding in autogenerated classes
What just happened?
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
What just happened?
Separating out our sidebar
Time for action – creating the sidebar.php file
What just happened?
Finishing off with the footer
Time for action – creating the footer.php template file
What just happened
Time for action – don't forget the plugin hooks
What just happened
Creating a template file for static pages
Time for action – creating a custom page.php template file
What just happened?
Pop Quiz – questions about WordPress theme structure
Summary
4. Advanced Theme Features
Site settings
Time for action – configuring your site settings
What just happened?
Time for action – adding the site title and description to your theme
What just happened?
Pretty permalinks
Time for action – setting up pretty permalinks
What just happened?
Permalinks – a quick guide
Menus
Registering navigation menus
Time for action – registering a navigation menu
What just happened?
Time for action – adding menus to our theme's header.php file
What just happened?
Setting up our menu
Defining our Reading settings
Time for action – defining Reading settings
What just happened?
Creating a menu
Time for action – creating a new WordPress menu
What just happened?
Adding pages and other content to our menu
Time for action – adding pages to a menu
What just happened?
Time for action – adding a custom link to the menu
What just happened?
Time for action – adding a category link to the menu
What just happened?
The WordPress Menus admin – the possibilities
Widgets
Registering sidebars or widget areas
Time for action – registering sidebars in functions.php
What just happened?
Time for action – adding widget areas to sidebar.php
What just happened?
Time for action –adding widget areas to footer.php
What just happened?
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
What just happened?
Time for action – adding footer widgets
What just happened?
Featured images
Time for action – adding featured images to our theme
What just happened?
Time for action – adding featured images to the site
What just happened?
Time for action – displaying featured images differently in different template files
What just happened?
Parent and child themes
Pop Quiz – understanding advanced theme features
Summary
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
What just happened?
Time for action – finding and fixing errors
What just happened?
Time for action – fixing our code
What just happened?
Validating CSS
Time for action – using the W3C's CSS validator
What just happened?
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
What just happened?
Checking your work in Internet Explorer
Time for action – testing our theme with BrowserLab
What just happened?
Testing on mobile devices
Summary
6. Your Theme in Action
The WordPress Theme Review guidelines
The theme preview screenshot
Time for action – snagging a thumbnail of your theme
What just happened?
Packaging your theme up
Tidying up your theme
Time for action – tidying up your theme
What just happened?
Describing your theme in the stylesheet
Time for action – describing your theme
What just happened?
Your theme's license
Time for action – adding license information to our theme
What just happened?
Zipping up your theme
Time for action – zipping up your theme
What just happened?
One last test
Time for action – testing the theme
What just happened?
Have a go hero – using the WordPress Theme Unit Test
Pop Quiz - questions on packaging up your theme
Summary
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
What just happened?
Creating a custom page template
Time for action – creating a custom page template
What just happened?
Time for action – assigning a custom page template to a page in our site
What just happened?
Have a go hero – styling the custom page template
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
What just happened?
Time for action – using a conditional tag to hide our home page's title
What just happened?
Have a go hero – other ways of showing conditional content
The Theme Customizer
Time for action - adding the Theme Customizer to our theme
What just happened?
Time for action – adding some more options to the Theme Customizer
What just happened?
Time for action – ensuring Theme Customizer changes are carried through to the CSS
What just happened?
Theme Customizer – the possibilities
Have a go hero – adding a theme options screen
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
What just happened?
Using optimized meta tags – page titles and descriptions
Time for action – optimizing our theme's page meta tags
What just happened?
Summary
Pop Quiz Answers
Chapter 2, Preparing a Design for Our WordPress Theme
Pop quiz – questions about theme design
Chapter 3, Coding it Up
Pop quiz – questions about WordPress theme structure
Chapter 4, Advanced Theme Features
Pop quiz – understanding advanced theme features
Chapter 6, Your Theme in Action
Pop quiz – questions on packaging up your theme
Index
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset
