Time for action – validating your HTML
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
- Preface
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- Pop Quiz Answers
- Index
Let's see how validation works. The process for validating your code is different, depending on whether you're working locally or remotely. First, the process for working remotely:
- Go to http://validator.w3.org/.
- Type in the URL of the site running your theme—in the case of my site, it's http://rachelmccollin.co.uk/opensourcemagazine/.
- Click on the Check button.
Next, the process if you're working locally:
- Save a static HTML file with the markup that WordPress outputs from your theme. To do this, in your browser, click on Save Page As and save as an HTML file.
- Go to http://validator.w3.org/.
- Click on the Validate by File Upload tab.
- Upload your file.
- Click on the Check button.
You used the W3C validation service to check the code in your theme.
Let's see what the results are:
As you can see from the previous screenshot, there are some problems at the moment. To find out what they are, let's scroll down the page:
There are three instances of the same error relating to a category tag.
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.