Time for action – planning our design
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
If you don't already have a full-blown design, you'll need to create some graphics as a starting point and some wireframes too. You can do this as follows:
- Using your preferred graphics program, create some design elements and concepts, such as buttons, color schemes, logos, backgrounds, or whatever else your site needs. Our design elements are all included in the design that we've seen in the previous figure.
- Either on paper or by using a wireframing tool, create some wireframes for the screen widths you're targeting with your responsive design. We'll do ours on paper for now. You may need to prepare wireframes for more than one area of the site, for example for sections of the site that have a different sidebar or no sidebar at all.
- Now revisit the considerations for your design and your site's users. Make any adjustments to your wireframes that you need to.
You've created your design. It may not be what you're used to, but you'll find it will include everything you need to create your mockup in the browser. Obviously we've just skimmed this process—depending on the needs of your site, this may have taken you a very long time.
Tip
Clean it up?
This might seem to defeat the purpose of rapid design—comping, but if you're working within a large design team, you may need to take an hour or so to clean your sketch up into a nicer line drawing. This may help other developers on your team to understand your WordPress theme idea more clearly.
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.