Time for action – setting up an alternative IE stylesheet
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 set up an IE stylesheet.
- In your
header.phptemplate file, add the following code after your full stylesheet call:<!--[if IE]> <link rel='stylesheet" type='text/css" href="ie-fix.css" media='screen, projection" /> <![endif]-->
- Save the
header.phpfile. - Now create a new stylesheet called
ie-fix.cssand save it to your theme's directory (that is, the same folder your stylesheet is in). This is where any IE-specific CSS will go.
We created a new IE-only stylesheet, and added a conditional tag in the header.php file to call it only when the theme is being run in IE.
The <!--[if IE]> and <![endif]--> tags are essential. The first one checks if the page is being viewed in IE, and the second ends the conditional tag, ensuring that all code after it is run by all browsers.
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.