Beckydavisdesign.com @beckyddesign WordPress Themes

Beckydavisdesign.com @beckyddesign

WordPress Themes


What are Themes?Themes control the Look, Feel and (sometimes) the Functionality of a WordPress site and are separate from the content.

Ready-made themes

wordpress.org/extend/themes/ - free

Woothemes.com, ithemes.com, themetrust.com, studiopress.com etc. all offer premium (paid for) themes

Carefully investigate the documentation and support before purchase.

Themes can be built from scratch or modified

Child themes can be built based on a parent


Theme Files


Ready-Made Themes(no or minimal knowledge of CSS, HTML, PHP)

What to look for:

Structure, not color or slideshow

Compatibility with latest version of WP

Documentation & Support

Multiple template pages (layouts) available

Buzzwords:

Responsive, Widget Ready, Menus, Customizable (colors, background, header, logo, typography)


Modify a Theme(good knowledge of CSS, HTML, PHP)

You don’t want to overwrite the original, but you would like to write your own CSS or create new template pages:

1. Create a new folder in Themes directory

2. Copy theme into the new folder

3. Rename the theme in the style.css file

4. Now you can make all the changes you want

5. Advantage: Only 1 style.css and functions.php file


Why bother to create a child?

If the parent theme is regularly updated:

Change the styles, art etc. without worrying about it being overwritten during an update

1. Create a new folder in Themes directory

2. Create Style.css and other files as needed

1. Write style.css to pull in parent template

3. Child stylesheet overrides parent, but both stylesheets still in effect.


Style.cssThis is the code that makes your theme readable to WP.

/*

Theme Name: Zhulia3

Theme URI: http://beckydavisdesign.com/

Description: Custom theme for Zhulia Jewels with HTML5 enhancements, child of TwentyEleven, 2012 re-design

Author: Becky Davis

Author URI: http://beckydavisdesign.com/

Version: 3.0

Template: twentyeleven (*child theme)

*/

@import url('../twentyeleven/style.css'); (*child theme)


Core Theme Files

*Index.php – the Blog home page. Many posts in a list, or latest post or excerpts depending on the code.

*Style.css – The heart of the theme

Single.php – Single blog post.

Page.php – Static pages

Different template page files can be made

Sidebar, Footer & Header – just what they should be

Archive, Comments, Search – don’t generally need to edit

Functions – may need to add code for specific needs

Put a comment at the top of each file so you can see which one you’re dealing with, very helpful! (  )


Theme StructureAll of these files connect to the mySQL database. That’s where the content lives.

Widgets are containers that mostly live in the sidebar, but can be in the content area, footer or header too! New widgets can be created in the functions file.

Style.css controls the look of everything.

widget

widget

(Where the “Loop” happens)


Style.css

The heart of how the design works

CSS determines, color, size & placement of elements

Theme template (page.php) determines what elements are on the page

Use Chrome Inspector or Firebug to see where the style is coming from


Functions

Functions.php can add:

Widgets

Custom styles for the editor

Headers

Custom Post types etc.

The more PHP you know, the more you can do

Child themes :

Unlike style.css, parent and child functions work together

Functions have to be removed from parent before new child ones can replace it


Further Resources

http://codex.wordpress.org/Main_Page - Excellent documentation

http://wordpress.org/extend/ - Plugins, themes etc. http://www.wpdesigner.com/2007/02/19/so-you-want-

to-create-wordpress-themes-huh/ - Stupidest title, best step by step tutorial. Assumes you have little html/css/php knowledge.

Smashing WordPress by Hedengren Digging into WordPress by Coyier and Starr

Documents

Beckydavisdesign.com @beckyddesign WordPress Themes