Customize Your WordPress Theme

After reading my post on WordPress Themes, you spent a few hours combing through themes until you found the perfect one. Then you gave your blog a few simple tweaks via the customize menu, added the necessary widgets and links for your Instagram, Twitter and Facebook accounts, and you were happy.

A month later you run across a blog using the same theme and realize that it looks too much like yours. The content is different, along with some of the widgets, but the header image is the same, the title uses the same font and one of the featured pictures is the same stock photo you recently used. You roll your eyes and think there’s not much more you can do…but you’re wrong. There are a few more simple tweaks you can make for your blog design to stand apart from rest.

But first you need to know how to begin customizing your theme.

How to Begin

Customizing your blog theme involves going to your blog, then clicking the Customize button at the bottom, right corner

customize button

Once you click on Customize, the Customize panel pops up on the left. This is where you make changes to your theme. Now that you know where to begin, here are four easy changes (and one for the advanced user) that will make all the difference.

Design Your Own Header Image

The header image is at the top of your blog and will be the first thing people see. WordPress comes with some nice pre-installed header images, but that doesn’t mean you have to use them. Make your own header image. Think about what your blog is about, then take your phone and use it to snap a few pictures. Keep in mind that you’ll have to crop the image to the size designated in customize > Header Image.

Once you have your photo for the header, use a program like Photoshop (Gimp, Affinity Photo, Paintshop Pro are good alternatives) to give the image a little style and crop it down to size. You can also edit the image directly on your phone, I have some Snapseed tutorials that might help.

Whatever you do, make sure your header image is unique.

Change the Font

Most people ignore the fonts used on their blog, but they’re a great way to show that your blog theme is not like the others. Most WordPress themes will give you some options for fonts, even with a Personal Plan, so take a peek in Customization > Fonts. The Premium Plan gives you more options for fonts, which is something to consider once people start drooling over your blog design.

Display Related Post Images

In your WordPress account go to Settings, it’s at the bottom, above WP Admin (which is the old Admin page).

WP Admin

At the top, right you’ll see Traffic. At the top you’ll see Related Posts. Check off all the options you want. There’s a preview below that will show you how it will look.

Design Your Own Featured Images

In fact, I say design all your own images. I know, this involves using a program like Phototshop, which has a bit of a learning curve. Take a look at the options I gave in Design Your Own Header Image and choose one, learn the basics and start designing your own featured images. I’m planning on having some Photoshop tutorials, similar to what I’ve done with Snapseed, so feel free to come back.

Having full control over the images will allow your blog to stand out. How many times have you seen the same stock photo used? Make your web site stand out. Use actual screen shots for tutorials, then find a way to use the screen shot in the Featured Image.

The only time I use an element that’s not mine is when I use a logo (i.e Snapaseed, Play Music, Play Books, etc…) I can’t imagine a company will get angry for advertising their product as long as you don’t change their logo or use it in a malicious way.

Featured images are added to each post in the Post Settings panel on the right. If you can’t see it, click on the cog to the left of the Preview button in the top, right corner. Post Settings > Featured Image.

preview panel

Use custom CSS

This is for advanced users with some knowledge of HTML and CSS. You will need a Premium WordPress plan to use the Custom CSS feature.

CSS stands for Cascading Style Sheets. This is not an easy design option for most people, and it has a high learning curve. However, if you’re comfortable with HTML, then this should be easy to learn.

Changes to the CSS are added in the CSS section in the Customization panel, Customize > CSS

The CSS added to the CSS panel will alter how specific HTML tags (e.i. P, BODY, A, etc…) are rendered on the page. Sometimes these HTML tags have a class (i.e.
<p class=”post-content”>) or ID (i.e <p id=”tutorial”>) added to them to specify which tag is altered by the the CSS.

Here’s some of the CSS I use to change how paragraphs are rendered.

.post-content p {
text-align: justify;
}

The tag <p class=”post-content”> will always be justified. I do this so all my posts will be justified regardless of how I align them in the WordPress post editor.

TIP: I use the W3Schools.com web site for CSS reference.

As you can see, this is an option if you already have basic HTML knowledge. The CSS needed to make changes to your theme is also very basic and easy to learn. The hardest part is finding the elements in your theme. Luckily WordPress has some great tutorials on how to do it. They also have a good tutorial on CSS Basics.

Keep in mind that CSS can do a lot more than designate how elements render, but all you need are the basics and a reference to make your theme stand out.

3 thoughts on “Customize Your WordPress Theme

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: