OFFICIAL BLOGHER '10 LIVEBLOG: Creating (or Massively Altering) a WordPress Theme

BlogHer Original Post

Welcome to the liveblog of the BlogHer '10 panel: Geek Lab: Creating (or Massively Altering) a WordPress Theme (Int. to Adv.). Click here for more info.

This panel starts Saturday, August 7 at 3 pm and ends at 4:15 pm Eastern time.

More and more of our community are using Wordpress. Ed Donahue and Shazia Mistry will focus on taking your blog design and layout to new heights, getting into the nuts and bolts of everything beyond basic HTML and CSS.

This session was live-blogged by @momisageek who can be found at this blog

Development
The easy way to set up a wordpress environment is to create a local copy. Download the XAMPP server, the XAMPP lite version is enough. http://www.apachefriends.org/en/xampp-windows.html Install it on your PC and use xampp_control.exe to start up the server. Download the wordpress software and put it inside the C:/xampp/htdocs directory. Then you can pull up wordpress by putting in the URL http://localhost/wordpress.

Editing
Suggest you use Visual Studio Light to edit your code. It is free. Code is not self-documenting, the programmer has to do it. Color-coding will show syntax.

Finding Themes
Themes are found in wp-content/themes under the wordpress subdirectory.
Example: Hot_orange

You can look at the structure to see how the images go together. Look into index.php to see the loop that will display your posts.

To find the section of code you are interested in, look for a tag on the code. VB Studio Express provides a search box for looking for code.

Question: Where does the code come from?
Answer: All the code is in the theme you can pull off the Internet. Use Google to search for Wordpress Themes.

Instead of deleting code, comment it out. That way it is easier to restore the code, rather trying to re-integrate it. // (two slashes) indicates everything after the double slash is ignored.

Change to grunge themes (less classy, more dirty).

Changing the header

The theme is hard-coded, and goes home on every page. The header doesn't look at what pages are in the directory, it writes the labels from its stored hard-coded labels.

Changing to header to use a wordpress function can make the page list reflect what it in the directory. If you add a page, it appears in the header even if you haven't edited the header code.

Advanced discussion

Use a framed theme means less structure and more flexibility. Create child themes instead of changing their themes. The child theme allows you to customize your theme, and every time they upgrade, you get the new functionality and keep your changes.

To create a child theme, copy the functions,php or one CSS file into a child theme folder. The child theme, in its CSS, declares its parent. It inherits from the parent.

Examples can be found at : http://www.shaziamistry.com

You edit your copy of the functions, not the original.

Instead of using custom fields you can set up a custom type.

(Remainder of session was point and click demos) Shazia will be posting a video on her site on the step-by-step.

Contact Shazia and Ed for further suggestions.

Comments

In order to comment on BlogHer.com, you'll need to be logged in. You'll be given the option to log in or create an account when you publish your comment. If you do not log in or create an account, your comment will not be displayed.