Basic WordPress DevelopmentDiving Into Editing Your Theme
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/
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
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
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
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
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
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)
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
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.