Beckydavisdesign.com @beckyddesign WordPress Themes.
-
Upload
mackenzie-sweeney -
Category
Documents
-
view
219 -
download
0
Transcript of Beckydavisdesign.com @beckyddesign WordPress Themes.
Beckydavisdesign.com @beckyddesign
WordPress Themes
Beckydavisdesign.com @beckyddesign
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
Beckydavisdesign.com @beckyddesign
Theme Files
Beckydavisdesign.com @beckyddesign
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)
Beckydavisdesign.com @beckyddesign
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
Beckydavisdesign.com @beckyddesign
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.
Beckydavisdesign.com @beckyddesign
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)
Beckydavisdesign.com @beckyddesign
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! ( <!--header--> )
Beckydavisdesign.com @beckyddesign
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)
Beckydavisdesign.com @beckyddesign
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
Beckydavisdesign.com @beckyddesign
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
Beckydavisdesign.com @beckyddesign
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