Last week, I created a child theme to prepare the WordPress backend for my style changes. It’s important to create a custom child theme so that if Genesis gets updated in the future, you don’t lose all of your custom code.

Today, I created the first draft of a custom header, styled the navigation, adjusted the widths of the main content and sidebar, and adjusted the padding and margins throughout to give everything a little more breathing room. Things are still feeling a little too cramped to me, so I’ll continue working on it.

I also added in two sidebar widgets – my basic contact information and social media icons (using the “Simple Social Icons” plugin)

BEFORE:

 

AFTER:

 

What’s a fav icon? In your browser bar, there’s a little image next to the URL:

 

This image will also appear in browser tabs and in the bookmarks folder. Customizing it is a nice touch and helps readers find your site easily. The Genesis theme by StudioPress uses a black box with a G by default.

To create a fav icon, you can use an online generator like this, or you can create a 16px by 16px image in Photoshop. Save the file as “favicon.ico” (the name must be that, or it won’t work). That isn’t a default file type in Photoshop, so you can save it as a .png or .jpeg and just change the file extension afterward by renaming the file. Next, you’ll upload it to your WordPress theme’s folder on your server.

To do that, you can use an FTP client, or the File Manager from your web host’s cPanel (I use InMotion Hosting).

For this instance, I’m going to use the cPanel.

1. Click on “File Manager” and select “Web Root (public_html/www)”
2. In my case, I had to navigate to the Genesis theme folder’s image folder (/wp-content/themes/genesis/images)
3. Click “Upload files”
4. Click “Choose file” – then browse your hard drive for your “favicon.ico” file and select it
5. It’s a small file and uploads quickly.
6. Close that window.
7. I also had to upload the file to my child theme’s image folder (/wp-content/themes/epik/images) — If you’re not using a child theme you can skip this step.
8. Now, go back to your site and refresh the page (Cmd-R on a Mac, or F5 on a PC)
9. You should see your new image in the toolbar.

 

One more tiny thing checked off the to-do list! I still have a long way to go.

I spent a lot of time looking for a new baseline template for this site.

I love working on the Genesis Framework (created by Genesis theme by StudioPress) and chose to go with the Epik child theme, created by a 3rd party developer. The demo site is gorgeous. Here’s a look at the homepage:

And, as you can see, when I first installed the theme and imported some blog posts, the site looks pretty sad.

No navigation, no sidebar, no cool homepage. You have to add all of this in. So, I started out by adding a few key pages and created a new static page for my homepage. (To get the cool-looking homepage, you have to create artwork and configure special widgets. I just wanted to get something up that wasn’t my blog)

I am really disappointed at where the menu appeared. There are two menu placement options – one as you see here, and one where there would be a black bar above “Danielle Baird Design.” There isn’t a default way to get the navigation to appear to the right, as you see in the demo shot. I’ll have to edit the template’s CSS or find a plugin for the header widget area.

I’m able to troubleshoot this because I know how to edit the code, but this must be incredibly frustrating for the average person who’s trying to DIY.

Next, I’ll start making some design edits to the theme in order to customize the look.