WordPress, WordPress Theme Customizations, Customizing WordPress Themes, Customizing WordPress Twenty Ten Theme

1. Basics of Customizing
WordPress Themes
http://www.newtricks.com

2. First - Set It Up Properly
Install and Set Up
Dashboard
–Privacy
–Permalinks

3. First - Set It Up Properly
–Privacy

4. First - Set It Up Properly
–Permalinks

5. Tools You Will Need:
Filezilla
Firebug
Programmers NotePad

6. Tools You Will Need:
•FTP Program: Filezilla
Free from:
http://filezilla.sourceforge.net/
Tutorial on New Tricks Website:
http://www.newtricks.me/
uploading-wordpress-themes-and-
plugins-through-ftp-with-filezilla/

7. Tools You Will Need:
•Firebug: Code Examiner
Free Firefox Add-on
Tutorial on New Tricks Website:
http://www.newtricks.me/
customizing-wordpress-themes
-with-firebug/

8. Tools You Will Need:
•Programmers Notepad
Free at: http://www.pnotepad
.org/
Tutorial on New Tricks Website:
http://www.newtricks.me/using-
programmers-notepad-to-edit-
wordpress-files/

9. WordPress Themes
How Do WordPress Site Files differ
from Static Website Files?

10. WordPress Themes
Static 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.

11. WordPress Themes
Static 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.

12. WordPress Themes
Static 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.

13. WordPress Themes
Static 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.

14. 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/

15. 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.

16. 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/

17. Modifying WordPress Themes
Twenty 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.

18. 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.

19. 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.

20. 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 {
3. Repeat with Description. color:#000000;
font-weight:bold;
text-decoration:none;
display: none;}

21. 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.

22. 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/

23. 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.

24. Creating an “Follow Me” Icon for Sidebar
1. 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 Plugin
and 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.

25. Styling the Sticky Post Box in Twenty-Ten
1. 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.

26. 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”