Style Your WordPress Footer Widgets On Genesis Without A Plugin

Last updated on August 1st, 2018 at 06:22 pm

Your footer credits are an important part of your blog. The great thing about a self-hosted blog is that you can design your footer widgets anyway your little heart desires. In today’s tutorial, I am going to show you how to style your WordPress footer widgets using nothing more than CSS.

You might be thinking, why should I be concerned with styling my footer? If you’re trying to turn your blog into a profitable business, you’re going to have to work on the cohesiveness of it. I had no clue what that meant when I started my first couple of blogs.

I’m talking about making your blog the same throughout. If you look at any successful blogger, you will notice that they are using the same colors throughout their blog. This means that they’ve either hired a designer or used a WordPress theme that allowed them to style it the way that they wanted.

For my blog, I use the Genesis Framework and whenever I learn something new, I share it with you. Hopefully, my tutorials will help you learn the ins and outs of this powerful framework. Here’s my affiliate link for the Genesis Framework.

In today’s tutorial, I’ won’t be talking about putting different types of elements in your footer like, pages, affiliate links, images, maps or whatever. Really it’s up to your imagination what you can include in the footer.

Instead what we’re focusing on is customizing different elements, such as bullets, colors, headings and etc…. The best part is that we are going to do it without a plugin.

[clickToTweet tweet=”Learn to manage your blog, skills to profit. #freetraining #WordPress susanvelez.com ” quote=”Learn to manage your blog, skills to profit. #freetraining #WordPress susanvelez.com ” theme=”style1″]

Even if you don’t know CSS, you can still follow along as I will be providing you with all the code you can use with the Genesis Centric Pro child Theme.

What You Will Learn

• Why you should style your WordPress footer widgets on Genesis
• Change the background color of your footer widgets
• How to change the link colors
• Changing the link hover colors
• Removing bullets from lists in footer
• Styling the Footer Widget Titles

Style Your WordPress Footer Widgets On Genesis Without A Plugin

As a DIY blogger, you’re going to have to learn how to make small tweaks to your blog. When I first started blogging, I knew absolutely nothing about CSS. It took me literally hours to get anything done.

I found myself searching for information and tutorials online that would show me how to do what I needed to do. It’s so time-consuming and searching for the content takes away from your productivity.

That’s why I’ve decided to start my blog, to help you with the techie aspects of blogging so you can start, grow and monetize your own blog.

Not only that, but imagine what you can do when you learn these skills. You can start offering your services in exchange for money on your blog. Basically, the opportunities are endless.

So I think it’s extremely important to learn the basics of managing your own WordPress blog, especially, if you’re trying to turn your blog into a profitable venture.

We are NOT going to be doing a complete redesign. We are just styling basic elements of your blog.

If you want a complete redesign, I highly recommend that you hire a web designer.

If you’re someone who wants to learn how to change basic elements on your own blog, follow along as I am going to show you how to do it on the Genesis child theme.

Here’s a great site to help you brush up on your CSS skills.

Let’s get started.

Watch Over My Shoulder

If you’d rather watch over my shoulder as I show you the exact method that I used to style my WordPress footer widgets on my localhost using Desktop Server, watch the video below.

Let’s Customize Your Footer Widgets

In order to follow along with this tutorial, you will need to access your CSS stylesheet for your Genesis child theme. Open up your WordPress files on FTP and go to wp-content > themes > Centric Pro

Open up your stylesheet in your favorite text editor. We will be placing our styles directly into the stylesheet.

If you’re using a different theme, you will want to make sure that you have a child theme. The elements I am targeting with the Genesis theme will be different. Update: I am no longer using the Centric Pro theme for my blog, I’ve switched my theme to the Daily Dish Pro.

However, this tutorial will work if you’re using the Centric Pro theme.

Change the Background Color of the Footer Widgets

Let’s say that you want the background color of your footer widgets to be purple. I am NOT going to focus on matching the colors. As I mentioned, I am NOT a designer, if you need one then hire one.

The purpose of this blog post is to show you how to change small elements of your website so you can save money and manage your own blog.

[clickToTweet tweet=”Learn to manage your blog, skills to profit. #freetraining #WordPress susanvelez.com ” quote=”Learn to manage your blog, skills to profit. #freetraining #WordPress susanvelez.com ” theme=”style4″]

I will be using this site to grab my hex color codes. There are literally tons of different sites, so feel free to use anyone you want. I just chose this one because it was the first one to come up in the search engines.

If you still haven’t downloaded the Chrome Web Developer extension, you definitely want to do that now. This will help us find the class elements we are targeting.

The first thing we want to do is open up our blog in the Chrome browser. For my Mac I press Control while I click on the mouse.

This is what you should see.

Scroll down until you see the class of footer widgets. You will notice that when you place your cursor over the element, it will highlight.

This means that you are targeting the correct class. For the rest of this tutorial, I am just going to show you the CSS code I used to target the elements in my Genesis child theme.

Feel free to use them for your site, if you’re using the Genesis theme. You can just change out the colors to match the rest of your blog.

This is the Code I Used to Make My Footer Widgets Purple

I am NOT deleting any of the style elements on the stylesheet. I am either just changing out the current colors or adding more elements.

The footer widget code starts around line 1884 on my stylesheet.

Changing Link Colors In Footer Widgets

Now that our footer is purple our black links may not look very good. In fact, they may be hard to see. So let’s say that we want to make the links white. This will help them stand out more.

The footer widgets link color starts on line 2000 for the Centric Pro Charcoal template layout.

As you can see, I’ve underlined the links in the footer. If you don’t want your links underlined, just delete the text-decoration.

Changing Link Hover Colors In Footer Widgets

Let’s say that you want the links to change to a different color when someone hovers over them. For this example I will change the links from white to black when they are hovered.

The code for the link hover color can be found on line around 1985. (yours may be different depending which template layout you’re using.)

I removed this section from line 1985 and added it out on it’s own.

Removing Bullets From Lists In Footer Widgets

I don’t know about you, but I hate it when I create lists in the footer and there are bullets in front. I personally think it looks tacky.

If you like the bullets in front, then you don’t have to do anything. That’s the great thing is that you can style your blog anyway you want. This is why it’s so important to have a self-hosted blog.

The footer widgets li code can be found on line 1903.

Styling the Footer Widget Titles

Sometimes you may want to change the style elements of the footer widget titles. So for this example I will make my footer widget titles white and will make them bold.

The footer widget title code can be found on line 821

As I mentioned before, you can change out the colors of the elements to match the rest of your blog.

My New Footer After The Customizations

Here is how my new styles look like after I’ve applied the following styles above.

Yours probably looks different as you may have used different colors. If you’re using the Genesis Child theme are are still having issues trying to get your blog footer to look like you want.

The next step would be to visit the forums. They are extremely helpful and will be happy to help you target stubborn elements.

As I mentioned earlier, this is not a complete design tutorial. I am only helping you make small tweeks to your CSS styles. For a more advanced course, you may want to consider signing up with Lynda.

Final Take Away

You don’t have to hire a designer for your blog when you start blogging. As a matter of fact, I don’t recommend it. There’s so many great WordPress themes that look great. You won’t have to spend a lot of time customizing them.

Learn the basics of WordPress and take care of basic elements on your own blog. You don’t have to be an experienced techie to do this. I still don’t know a lot about PHP and CSS.

However, I don’t let that stop me from working towards my goal of creating a profitable blog.

There are tons of tutorials online that you can learn from. I went to a community college for 2 years. However, I’ve taught myself more than I ever learned in school. Now I am not saying education isn’t important, I’m just saying it’s possible to learn the basics so you can start and grow your own blog.

Hand Picked Articles For You

• How to Style The Genesis Author Box Without A Plugin
• How to Add An Opt-in Box To Your 404 Page
• Modify Not Found Error 404 Page On Genesis Framework

It’s possible to teach yourself new skills. As long as you’re willing to do the work necessary. How long have you been working with WordPress? Were you able to style your WordPress footer widgets? If so then comment below so I can take a look at your customized widgets.