getting Started: customizing a WordPress theme

The tutorial assumes that you have some basic knowledge of html and css. The steps outlined for css customization will work whether you are using WordPress.com or your own hosted version of WordPress. For beginners, it’s best to use a theme with the layout that you like as a starting point and then customize the colors, fonts, and other attributes, instead of trying to modify the layout of your theme.

Finding your css

For WordPress.com, you will need to “upgrade” your account for the ability to edit your stylesheet, you may do so my selecting “design” on your dashboard, then “edit css”, and then selecting the “Custom CSS Upgrade”.
For self-hosted WordPress, from “Presentation” tab you will be able to edit all of your files, look for the one ending in “.css”, this is the one we need to edit.

Before you start editing your css, save a backup copy of it, and save and test every change that you make, just to be on the safe side – if you don’t like a change that you make, it will be easy to erase it.

If you are not familiar with css, it may be helpful to read this beginner CSS guide before continuing with this tutorial.

Changing colors

The most simple changes you can make to your template to customize it is to change the colors.

Within your css, they key things that you want to look for are “selectors” (the names of each section – on the left, example body) that contain attributes starting with ‘background’, ‘color’, or ‘border’ – most likely these will contain some color information for your template. Color within a css will look like ‘#fff’ or ‘#f0f0f0’ – a 3 or 6 letter/number (it is a hex number – the 3 digit format is shorthand) combination that is preceded by a ‘#’ sign. You can use this color schemer resource to find the codes that match any color that you want to use.

The color schemer will also give you some color scheme suggestions based on whatever primary color that you choose, making it easier for you to coordinate the colors that you use for different elements within your template.

The best way to get comfortable with making changes is to just experiment – I suggest that you look for colors within you css, change them, and then test you template to see how the new colors look.

Changing images

The template background is usually embedded into ‘body > background’ within you css.

Option 1 – if you want the easiest way to replace the image, ensure that your replacement image has the same dimensions and filename of the original and that will overwrite the one that is there

Option 2 – if you do not want to use any images, and instead just want a solid color, you can just erase the image:

background:#e6e6e6 url(images/bodybg.png) repeat-x; will become background:#e6e6e6;

Option 3 – if you have a file that is hosted elsewhere (most likely if you are using WordPress.com), you need to put in the full url to the new image:

background:#e6e6e6 url(http ://farm2.static.flickr.com/1280/filename.jpg?v=0 repeat-x);

Changing Fonts

You may change the fonts within you template, but since everyone who visits your website may not have the same fonts installed on their computer, you will need to stick to simple, common fonts. But by changing the font size, font color, font weight, line height, and letter spacing, (refer to css reference for a full list of attributes) you will be able to get a different look for your template.

For example:

appears as:

And making slight changes:

Results in:

Other changes

If you are not able to create your own graphics, you can easily modify borders and backgrounds in creative ways to obtain a great looking template without the use of much graphics. Using other websites as inspiration is a good way to get some great ideas for your own theme.

Remember to experiment and have fun!

getting Started with WordPress.com

If you are considering becoming a professional blogger, most likely would want to have your own domain name, and a custom blog design, luckily for you, WordPress.com offers you an excellent, affordable service to do just that – without the stress!

step 1 – register your domain

This is not a required step for setting up a blog on WordPress.com, but if you are seriously considering blogging or especially if you want to become a professional blogger, it would be to your benefit to use your own domain name from the beginning.

Before you start, your will need to register your domain name, using godaddy, namecheap, or your favorite domain registrar, and set the domain name servers to “ns1.wordpress.com”, “ns2.wordpress.com”, and “ns3.wordpress.com”.

If you are using namecheap.com, you need to select the option “Transfer DNS to Webhost”, and enter the WordPress.com nameservers into the fields provided (see screen capture below).

step 2 – create a WordPress.com account

To setup a WordPress.com account, you need to click over to www.wordpress.com, then use the “sign up” link to create an account.

The sign up form will take about 10 seconds to complete, screen capture below.

In the next step, select a name for your WordPress.com blog, although you already registered your domain name, you still need to create a blog name for WordPress.com to associate with your domain name, once you submit your blog name, your blog will be automatically set up for you.

You can take some time to read about all the wonderful features of your new WordPress.com blog – the feature list will introduce you to everything that you can do with your new WordPress.com blog (most of the same features are available on a self-hosted WordPress blog as well). For a more detailed user guide, you can try the WordPress.org website. And finally, if you are not already reading Lorelle, you really need to, so visit her and subscribe to her feed.

step 3 – point your domain to WordPress.com

Once you are logged into the main control panel, you should notice that the labels are all easy to understand and the interface is simple to use.

To set up your own domain, you need to navigate to “Options” (from the main, light blue menu), then to “Domains” (from the sub, dark blue menu), then add in your domain name, “example.com” (without the http://) into the “Add a Domain” field on the page, and select “Add domain to blog”. Once this is completed, your blog should have it’s own domain!

optional – create a community of bloggers

Creating a community blog on WordPress.com is extremely easy! All the bloggers within the community need to create a WordPress.com account, just like in step 2, then you will need to add them into your new blog. Using the “users” tab, located in the top, light blue navigation, add the email addresses of the bloggers who would be contributing to your community blog. These community bloggers need to log into their own WordPress.com accounts and they would be allowed to make posts to the community blog. Easy as pie! And your account remains private.

Costs (per year):
1) Domain name (brand new ones are usually less than $10 per year, while domains on the market can go for thousands) – $8.88 at NameCheap
2) WordPress.com’s DNS changes – $10
3) WordPress.com Custom CSS service (optional) – $15

So for $18.88, you can have a no-stress, WordPress blog up and running on your OWN domain! Or for $33.88, you can have a WordPress blog with your own domain name, and a custom look and feel! Pretty good deal if you ask me! And because you are using your own domain name, once you are established and ready to move out on your own, your domain rank should remain in tact.

UPDATE: You cannot run ads on WordPress.com, but this is still an excellent way to get your feet wet without significant cost or setup time.

Up next: how to customize your WordPress theme using only the CSS

create a single rss feed using pipes by Yahoo!

Pipes can do many, many things, you can view and use a lot of the pipes created by the community on the pipes website.

I wanted a way to get all my blog feeds together so I can offer it as a subscription choice to my readers.

You can use your Yahoo! account information to login to pipe, but you can also easily create an account if you don’t already have one.

First, click on the “create a pipe” button on the top right of the page.

Next, drag in the ‘fetch feed’ pipe from the left navigation.

Add in your feed url into the text fields, you can click on the little ‘+’ sign to add as many feeds as you need.Once you are done, you can save your pipe, and/or publish it, I just chose to save mine, as it is just for personal use, but if created a really useful pipe, it’s probably a good idea to share it with the community.

Once you view your pipe, you should see your recent blog posts show up, much like your regular feeds.

I could not figure out how to actually get the actual rss url for my pipe, so I clicked on the ‘rss’ button, selected my feed reader, then grabbed the url from there. I burned that rss url in feedburner and I was ready to go!!

I then added my Adventures in Motherhood feeds, and created a ‘super’ rss feed, if you will, of everything by me!