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