Time for action – snagging a thumbnail of your theme
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 create a screenshot for our theme.
- Using whatever screen capture software you have on your system, take a screenshot of a site running your theme.
- Save the file and open it in an image editor.
- Crop the image and resize it so that it's 600px wide x 450px high.
- Save the image as
screenshot.png—it must have this name or it won't work. - Copy the new
screenshot.pngfile to your theme directory.
We created a screenshot of our theme and saved it in the format used by WordPress.
Now, when I view the theme in the Themes admin screen, the following screenshot is displayed:
For more on theme screenshots, see http://codex.wordpress.org/Theme_Development#Screenshot.
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.