Basics of Customizing WordPress Themes

http://www.newtricks.com

First - Set It Up Properly

Install and Set Up Dashboard

–Privacy

–Permalinks

First - Set It Up Properly

–Privacy

First - Set It Up Properly

–Permalinks

Tools You Will Need:

Filezilla

Firebug

Programmers NotePad

Tools You Will Need:

•FTP Program: FilezillaFree from: http://filezilla.sourceforge.net/

Tutorial on New Tricks Website: http://www.newtricks.me/uploading-wordpress-themes-and-plugins-through-ftp-with-filezilla/

Tools You Will Need:

•Firebug: Code ExaminerFree Firefox Add-onTutorial on New Tricks Website: http://www.newtricks.me/customizing-wordpress-themes-with-firebug/

Tools You Will Need:

•Programmers NotepadFree at: http://www.pnotepad.org/

Tutorial on New Tricks Website: http://www.newtricks.me/using-programmers-notepad-to-edit-wordpress-files/

WordPress Themes

How Do WordPress Site Files differ from Static Website Files?

WordPress ThemesStatic Website Files vs WordPress Files?

• Static Site Page Files are created Page by Page. One Page, One File.

• The page is marked up into all of the sections with html ( hyper text markup language).

• All Text and Images are inserted into the divisions of the page when the page is created.

• The files all end in page_name.html.

• CSS file(s)applied to the site for the styling.

WordPress ThemesStatic Website Files vs WordPress Files?

• WordPress is a database program made up of core program files and theme files.

• You need at least one set of theme files to have WordPress show up.

• WordPress themes are made up of a group of files that combine html and php scripts. The html provides the structure and the PHP calls content from the data base rather than having it all hardcoded into each page.

WordPress ThemesStatic Website Files vs WordPress Files?

• WordPress is a database program made up of core program files and theme files.

• You need at least one set of theme files to have WordPress show up.

• WordPress themes are made up of a group of files that combine html and php scripts. The html provides the structure and the PHP calls content from the data base rather than having it all hardcoded into each page.

WordPress ThemesStatic Website Files vs WordPress Files?

• WordPress Theme Files end in filename.php

• Rather than one file per page, WordPress files tend to be separated into functions. Such as: header.php, index.php, sidebar.php, footer.php, custom functions.php

• WordPress themes also have css stlye sheets applied to them to create the styling of the site.

WordPress Themes

How to Choose a WordPress Theme?

• Open-Source creates 1000’s of great themes.

• Some free some “premium” 25 – 85 dollars.

• Google search “WordPress Themes” or go to http://wordpress.org/extend/themes/

WordPress Themes

How Beginners should Choose a Theme?

Most important to customization is to choose a theme that has the “bones” that you want. For example: If you want a site with a custom header that you can create with your logo and tag line in it, then find a theme that already has a header and not just a text title and description.

WordPress Themes

How Beginners should Choose a Theme?

Another example: If you want a site with a large scale graphic image behind the content box, then find a site that already has that built in. Like: http://www.amypink.com/en/themes/city-dreams-wordpress-theme/

Modifying WordPress ThemesTwenty Ten Theme

Before you start:

1. Add Content or Install Dummy Content Plugin:http://wordpress.org/extend/plugins/wp-dummy-content/

2. Add Page Titles

3. Add Categories and assign one post to each.

Modifying the Header Twenty-Ten

1. Check the size of the Header with Firebug. 940 x198

2. Create a Header the same width. 940 x226

3. If it is higher find the file that determines ht and width of header.

4. Go to Appearances, Header and Upload the Header. Whoops it is too tall. Find the file for Ht of Header.

5. In this theme it is not in header.php where you would expect it. It is in functions.php since there are user options that are in this file.

6. Open the Editor and Change the height to 226 px.

7. Go back to Appearance Header and Upload.

Modifying the Background in Twenty-Ten

1. Go to Appearances, Background and Upload the Background image.

2. Configure it as to whether it is tiling and in which way.

3. You can also just change the background color by adding a color to the hex box. If you add both background image and color, then the colored background will come up when the image takes longer to load.

Removing Title and Description

1. Firebug the Title and see if you can remove the title with css, display: none;

2. Go to the css file and find that ID and Attribute and make the change.

#site-title a {

color:#000000;

font-weight:bold;

text-decoration:none;

display: none;}

3. Repeat with Description.

Removing the excess padding in above header

1. Firebug to find the ID and attribute that needs to change.

#header {

padding:30px 0 0;

2. Change the padding to 10 or 0 in the css style sheet.

Add Your Plugins

• Plugins extend WordPress Functionality.

• Some Plugins Create Sitewide Functionality.

• Some Plugins create Widgets for sidebars.

• Ten Must Have Plugins on New Tricks:

http://www.newtricks.me/ten-must-have-wordpress-plugins-for-every-wordpress-websites/

Creating an “About Me” Sidebar Widget

1. Go to Appearance Widget.

2. Select Text Box and drag it into position.

3. Give it a Title.

4. Go to Post, Add New and add the photo and text to the post box as if it were a little post.

5. Select html view and copy the contents of the post edit box.

6. Go to Widgets, open the text box and add the text. Check it out.

Creating an “Follow Me” Icon for Sidebar1. Go to Plugins, Add New, Search for “Follow Me”

2. Add the Plugin and Activate it.

3. Go to Settings and find the Follow Me Pluginand configure it.

4. Add the various social media addresses.

5. Choose “Old Style” and Choose Size.

6. Go to Widgets, Find Follow Me and Drag it to Sidebar. Under the About Me Text Box.

Styling the Sticky Post Box in Twenty-Ten1. Go to a post and make it “Sticky”. It will have a

blue background.

2. Use Firebug to find the code for the Sticky Post Box Color, .home .sticky {

3. Make the change to another color in CSS.

I hope this wet your appetite for customizing WordPress Themes. Get Yourself a good cheat sheet for CSS and HTML you will learn a lot and most of all have Fun!

Judi Knight

Our motto is, “It’s Never too Late”