Basic WordPress Development

1. Basic WordPress Development
Diving Into Editing Your Theme

2. Tools
• Local Server – WAMP
http://www.wampserver.com/en/
• Remote Server – Filezilla
http://filezilla-project.org/
• WordPress - http://wordpress.org/
• File Editor – Notepad ++
http://notepad-plus-plus.org/
• Chrome Debugger or Firebug for Firefox
http://getfirebug.com/

3. Core Theme Files
• style.css – Only required theme file. Controls design
of site
• If used in child theme, style.css can overwrite parent
style or @import
• functions.php – Allows inclusion of PHP to control
WordPress functions
• Child theme functions.php is appended to parent
functions.php file

4. Additional Files
• index.php – First file loaded in hierarchy. Controls
front page if home.php is not specified
• home.php – Not in all themes. Custom home style to
include widgets/CPTs/media blocks/etc
• header.php – Opening of site down to beginning of
page layout. Controls style and script loading and
meta information
• footer.php – Closes site after layout. Additional
scripts loaded here

5. Additional Files
• 404.php – Displayed on non-existent pages (not on
“no content found” pages
• archive.php – Displays posts based on date
• author.php – Displays author archive pages
• category.php – Displays posts of a specified category
• comments.php – Formats and displays comments

6. Additional Files (cont.)
• page.php – Used to display standard pages
• search.php – Default page for search results
• sidebar.php – Controls default sidebar inclusion
• single.php – Used to display single post
• tag.php – Sorts posts based on specified tag

7. Getting Started
• Use a starter theme to save development time -
http://underscores.me/
• Create a child of a framework -
http://www.studiopress.com/
http://www.woothemes.com/
• Create a child of a theme similar to what you want
• Final approach is less custom but comes with greatly
reduced development time

8. Getting Started (cont.)
• Start with a plan. Determine page structure and
relevant information
• Select the base theme that works for this case
• Start with sample content if you don’t have client
content. This lets you see the theme in action -
http://codex.wordpress.org/Theme_Unit_Test
• Activate plugins/widgets that will be used AND affect
layout of site (no caching or SEO plugins yet)

9. Changing Element Style
• Use Chrome Debugger or Firebug to locate HTML
elements that you want to change
• Begin with magnifier and use file structure if needed
• Force hover or active state with Chrome Debugger
• Pay attention to cascading style hierarchy (most to
least important)
• Make edits in browser and copy to stylesheet