Presentation is loading. Please wait.

Presentation is loading. Please wait.

WordPress Themes.

Similar presentations

Presentation on theme: "WordPress Themes."— Presentation transcript:

1 @beckyddesign WordPress Themes

2 @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 - free,,, 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

3 @beckyddesign Theme Files

4 @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)

5 @beckyddesign Modify a Theme (good knowledge of CSS, HTML, PHP) You dont 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

6 @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.

7 @beckyddesign Style.css This is the code that makes your theme readable to WP. /* Theme Name: Zhulia3 Theme URI: Description: Custom theme for Zhulia Jewels with HTML5 enhancements, child of TwentyEleven, 2012 re-design Author: Becky Davis Author URI: Version: 3.0 Template: twentyeleven (*child theme) */ @import url('../twentyeleven/style.css'); (*child theme)

8 @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 – dont 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 youre dealing with, very helpful! ( )

9 @beckyddesign Theme Structure All of these files connect to the mySQL database. Thats 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 (Where the Loop happens)

10 @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

11 @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

12 @beckyddesign Further Resources - Excellent documentation - Plugins, themes etc. 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

Download ppt "WordPress Themes."

Similar presentations

Ads by Google