• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Basic WordPress DevelopmentDiving 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