How to Add Content Boxes to Your Genesis Child Theme

Last updated on August 10th, 2018 at 03:41 pm

Do you love the Genesis theme as much as I do? Do you know how to add content boxes to your Genesis child theme?

If not then today is the day that you’re going to learn how easy it is. Grab a cup of your favorite beverage and let’s get started.

You’re going to love Genesis once you realize how easy it is to create content boxes that spice up the look of your blog posts.

Why I Love The Genesis Framework

To tell you the truth, I am biased. I purchased my Genesis license back in 2009. When I purchased them, it took me forever to log into my account and start using them.

I only purchased them because the Pro Package was on sale. To tell you the truth, I am not really sure why I bought them.

Maybe it was because I was scared to miss the sale. You know what they say about scarcity.

Anyway, I am glad that I purchased them. Now I have access to all the StudioPress child themes and can change them out whenever I want.

I’ve also learned how to work with the Genesis Child theme just by playing with it while using Desktop Server.

While I am NOT a PHP developer or designer. I’ve learned enough to make the changes and customize it to fit my needs.

It takes a little getting used to, that’s why I’ve created several Genesis tutorials to help you with the basics.

What Is A Content Box?

You may have seen bloggers who use contentbox modules to put text or important information. The border boxes help make your content stick out.

In fact, I use them a lot on my site. Here are some of the ones that I use on my blog.

Basically, anything you want to add to a content box can be done on Genesis with a little bit of coding.

Don’t worry, it’s not difficult. If I can do it, I have no doubt that you can do it. If you want the quick low down on adding one to your blog, you can go here.

[clickToTweet tweet=”Let’s Add Content Boxes to Genesis #FreeTraining #Genesis @susanvelez.com” quote=”Let’s Add Content Boxes to Genesis #FreeTraining #Genesis @susanvelez.com” theme=”style4″]

If you want to see how I created mine with a little bit of flare, then stay tuned. Like always, I am going to walk you through step-by-step and show you the exact code you need to add one to your Genesis child theme.

How to Add Content Boxes to Your Genesis Child Theme

You’ll need to access your WordPress files, I am on a Mac and I use Sublime text. If you’re on a PC, you might be using Filezilla.

Either one will work, just make sure that you backup your blog before you start messing with any of the files. You don’t want to lose any of your hard work.

Here’s the code you’ll need for the default style online.

By default you have 6 colors of content boxes you can use. Feel free to use any of the styles for the colors above.

You can play around with the padding or any other elements you choose.

Let’s Create A Fancier Content Box

The default content boxes for Genesis look amazing. They’ll definitely draw the attention of your readers, which is what you want.

However, if you’re like me, then maybe you don’t want to use the default style box sizing elements. Maybe you want one that has a little bit more flare.

The cool thing is that you can set the width and height to whatever you want. You can also style the border color or change the padding and border to whatever you want to do.

My Syntax Box Code

That’s what I’ve done. As you can see, I don’t always use the same colors. I love wrapping my syntax code inside of the black content box I created.

I personally think that it makes my code stand out better. If you use any type of syntax code on your blog, feel free to use this code.

Of course, you can always change up any of the style elements you want.

The great thing about using CSS, is that you can easily change any of the elements you want.

Scroll down to the bottom of this page and see my purple content box in action.

My Purple Content Box

If you’ve noticed some of my blog posts, I have a purple reference box that I’ve added to some of my blog posts. Click here to see one of my purple content boxes.

Here’s the code that I used to create my purple content box and make it a little fancier than the default one.

As you can see, you can create any type of content box that you want. As long as you’re a little bit familiar with CSS.

No you don’t have to be a designer, heck I’m not. I have managed to make the tweaks and styles to my blog that I have wanted.

Sure one day, I may hire a designer, but right now, I am fine with learning and playing and making the changes that I need.

Hopefully, by me sharing this tutorial, helped you learn how to add content boxes to Genesis.

Final Take Away

Most of us who start out don’t have the money to outsource little tasks like this. Don’t feel like you can’t dig into the stylesheet and make the tweaks that you need.

When I first started playing around with WordPress, I felt lost. If you’re not comfortable playing around with your live blog (which I don’t recommend) I personally use Desktop Server to set up WordPress on my localhost.

Hand Picked Articles for You

• Edit Footer Credits On Your Genesis Child Theme
• How to Style the Genesis Author Box Without A Plugin
• Exploring the WordPress Text Widget On Genesis

If you don’t want to spend any money, download something like Xamp or Wamp. Either one will work.

I just prefer Desktop Server because it can do so much. How comfortable are you with making small CSS changes like this on your blog? Let me know in the comments below, I’d love to hear your stories.