29 In Blogging

How I Redesigned My Blog

Today I wanted to share with you how I re-designed Sweet Miles, step by step! So, buckle in because this is going to be a long post! I’ll try to write everything as simple as possible without going into too many techie details! I’m sure I forgot something, so feel free to ask! At work we actually use a CMS called Joomla, so developing my WordPress blog served as good practice on a different platform!

*Edited 2016 – This was written in 2014, and looking back, there are things I would change, and different methods I would use. Please let me know if you have any questions.

how to custom design wordpress blog

1. First thing to note is that my blog is already self-hosted, so that is a good starting point! If you aren’t already, you need to be! Having access to all of your files is key to being able to FULLY customize your blog! Here’s what the “back end” looks like in Blue Host…

*Edited 2016 – I now host my blog through SiteGround, and highly recommend them. If you’d like to purchase a hosting plan, you can do that HERE, or you can read more about why I love them, HERE.

Screen Shot 2014-03-03 at 8.19.30 PM

The File Manager there at the bottom is where everything you need is. That’s where your blog lives.

Screen Shot 2014-03-03 at 8.21.25 PM

wp-admin and wp-content are the only places you’ll need to touch.

(Only look into wp-admin if you really know what you are doing!)

2. When I decided I wanted to do a blog makeover I had several reasons why, and several criteria I wanted to look for in a new template. Things like a responsive design, which is almost imperative these days, (meaning the template resizes and changes to fit any size screen or mobile device), nested comments, more Β SEO friendly code, and a more custom color scheme and logo.

3. I started looking through responsive WordPress templates and did some research on the best way to go about installing a new custom theme. I decided on the Genesis framework + a child theme route. Genesis is a very customizable, easy to work with, and clean coded framework for WP, and there’s a PLETHORA of online tutorials and a HUGE help forum on the internet. It’s a very widely used setup, so you’ll have no problem finding help should you need support!

4. Once I knew what route I was going, I decided on a child theme I felt would be easy to customize, and had a similar layout option and basic bones and structure that I wanted. When you’re looking for a new template or theme, FORGET about the colors and fonts and bells and whistles that you see and ONLY pay attention to the basic fundamentals, because you can really customize as much as you want! I picked one that I knew I could get down to pretty bare bones, that way I could really add whatever I wanted. I think I really only kept a font and the menu with the line above and below.

5. I picked out a theme by Studiopress, then purchased and downloaded it, as well as the Genesis Framework. My previous blog was built in ProPhoto, which without really explaining, is basically another framework for WordPress but with tons of different already pre-designed templates. It’s widely used for professional photographers and I already owned a copy.

6. I contacted a graphic designer friend at work and asked if she’d be willing to help me with some freelance work. I made an inspiration board, full of colors and logo ideas and sent it to her, along with a screenshot of what the theme I purchased looked like. We talked about what the overall vibe would be and what I liked, and she got to it!

inspirationboard2

7. I installed the Genesis framework FIRST then installed the child theme, and started making basic changes. A lot of changes can be made right off the bat such as theme layout, colors, menus, header, etc. (Think of Genesis like the skeleton of your blog, what holds it together. And the child theme is your colors, fonts, images, styles, etc.)

8. I set up my primary menu, hooked up my pages, then uploaded the appropriate sized logo from my graphic designer. I picked out my layout, sidebar-content-sidebar. I went through and turned off a few functions of the theme that I didn’t want.

9. I re-added and/or re-installed all of my widgets, plugins, and sidebar images and put them all back in place. When you change themes, some of them go into your “inactive” section and some just disappear. If you have any questions about what WP plugins I use, ask!

10. I got on my Google Adsense account and edited my ads, since a few of them would need to be re-sized.

11. I made a list of what color changes and font size/style changes I wanted to make, and had my boss help teach me how to find and edit the css code in the style sheet. WordPress is pretty neat in that you don’t HAVE to edit the style sheet ON your server (as in Bluehost, or where ever your files are all hosted, such as your wp-content file) and you can actually pull up your style sheet under Appearance –> Editor. To make these changes, the long and short of it is this: go to your current theme (as if it’s live), right click on the element you need changed, inspect element, locate the line of code, copy and paste the location into the style sheet using search, click through and make sure you find the code in the right location and make sure it isn’t going to change in other places, change it, update file. Ta-da! It’s quite a bit more complicated than that obviously and there’s a lot more detail to know, but for time’s sake, that’s somewhat how it goes without going into css details πŸ™‚ It definitely takes a few days to get everything set up the way you want it, and get all the little quirks out. I feel like it’s a huge learning curve, and trial and error, but I’m having SO much fun learning a new “language!” If you work with a designer/developer to re-do your blog or website, don’t assume you can just click a button to change the color of something, because more often than not it actually is something that has to be changed in the stylesheet. Because a lot of times, something that’s styled a certain color in one place, might also be in another place you haven’t noticed yet. (A stylesheet is the code that accompanies websites and dictates colors and hence, STYLES, of the site.)

Screen Shot 2014-03-03 at 6.59.59 PM

Screen Shot 2014-03-03 at 7.02.38 PM

Screen Shot 2014-03-03 at 7.04.56 PM

Be sure and make a copy of your style sheet before you edit it, or edit it in a program such as Dreamweaver! CSS is NOT very forgiving!! Like at all. One wrong semicolon or period can totally screw up your entire site.

**Editing within the WordPress editor is NOT the BEST way to do it! Using a program such as Dreamweaver is MUCH safer, and smarter! Trust me! I only have Dreamweaver installed on my work computer and was too lazy to use something else at home**

12. To change out my social media icons, I installed a social widget, then had my graphic designer create same-sized custom social images. Then, I found where these social images were located on my server, and uploaded the new images to replace the old ones. An easy switch-eroo.

facebook

I added .bak to the end of the original file so I’d still have the original in case the new one didn’t work.

Screen Shot 2014-03-03 at 8.27.51 PM

**Be sure you consider if the plugin is to update, as your new files could potentially be messed up once it does!**

I learned an easy way to think about websites is this: when you’re looking at a URL, every ‘/’ is a file, and websites are made up of files and images. So this,Β http://sweetmiles.com/wp-content/plugins/top-25-social-icons/images/circle/facebook.png, is where that Facebook icon above lives. On sweetmiles.com, in the wp-content folder, then in the plugins folders, then in the top 25 social icons folder, then in images, then circle, then the actual file name is facebook.png. Make sense?

13. To update the footer text I installed a Genesis Plugin called “Simple Edits.”

14. The round bio pic was made by my graphic designer, and it lives in a simple image widget with text aligned to the right. There are several different ways of doing the “bio area”, this is just the way I chose to do it.

15. The Twitter widget is called Genesis Latest Tweets, and you had to go in and set up some things within the Twitter for Developers site. Same with the Instagram widget. It involved getting your API key, but it walks you through it, and is really easy!

16. The favicon on top of the browser (still needs to be customized but for now it’s just a color block), lives in a folder on my server, so I just pulled the old one off, figured out what size it was, made a new one, uploaded and replaced it. There’s probably a plugin that would do this for you!

Screen Shot 2014-03-03 at 8.22.22 PM

17. I turned off the footer and the header ad section. I’m not a big fan of seeing ads first thing when I come to a blog! *Edited 2016 – this has since changed.

18. I thought about resizing the column widths, but when I made the width of the primary sidebar (the larger one on the right), it effected my google ads, and I didn’t want to mess with resizing them again. But if you’re curious, the column widths CAN be resized if you want one bigger or smaller. It’s also contained in the stylesheet.

19. I made sure my Google Analytics code was still in place.

20. I finally published it and made it live because it’s always going to be a work in progress! It’s certainly not perfect, but for not it’s much more customized than what the theme looks like straight out-of-the box.

Would love to know if you have any questions!!

Have you worked with a web designer? Have you redesigned your own blog before? Did all of this fly over your head or make sense?

*Affiliate links were included in this post. As always, thank you so much for supporting Sweet Miles!

29 Comments

  • Reply
    Heather @fitncookies
    March 4, 2014 at 6:56 am

    One day when I get brave enough I am totally doing this and using your tricks!
    Heather @fitncookies recently posted…Accomplishing a To Do List: MIMMMy Profile

  • Reply
    Taylee @ twist me fit
    March 4, 2014 at 8:12 am

    Awesome post! Very helpful.
    Taylee @ twist me fit recently posted…Hello world!My Profile

  • Reply
    Meranda@fairytalesandfitness
    March 4, 2014 at 8:39 am

    Your blog looks great. I know our blog is in need of an update but quite frankly all this technical talk scares me!
    Meranda@fairytalesandfitness recently posted…Disney’s Enchanted 10K: Where the skirt doesn’t matter.My Profile

  • Reply
    Becky@TheSavedRunner
    March 4, 2014 at 11:07 am

    You are awesome, that’s all I can say! I am not tech savvy at all, so this is all so confusing to me! I am in the process of switching to self-hosting now, and I know I will want to design my blog to make it cute, but I will have no idea where to start! I don’t want to spend a ton of money to do it, but I’m afraid I won’t be able to do it myself.
    Becky@TheSavedRunner recently posted…Week of Fitness 2/24-3/2/2014My Profile

  • Reply
    Leslee @ Her Happy Balance
    March 4, 2014 at 11:57 am

    Love it, it’s very fresh and clean looking and the color scheme is just perfect! πŸ™‚ It’s so awesome that you detailed the process and it will definitely be helpful when I decide to give the blog a facelift πŸ˜‰
    Leslee @ Her Happy Balance recently posted…Spring Break Snacking – Snack Pack {Giveaway}My Profile

  • Reply
    Ashley
    March 4, 2014 at 12:37 pm

    Seems like a lot of work but the end product is GREAT!
    Ashley recently posted…Fresh Air and Salty Sweat Solves The World’s ProblemsMy Profile

  • Reply
    Ashley @ Brocblog
    March 4, 2014 at 2:15 pm

    Thanks for the tutorial on all that, I really need to redesign but It sounds so hard! The new design looks great!
    Ashley @ Brocblog recently posted…Today is Pancake Day!My Profile

  • Reply
    Patty @ Reach Your Peak
    March 4, 2014 at 3:44 pm

    wow this is just stuff that goes way over my head! I just hired someone from etsy to do my blog redesign and help me with WP transfer and stuff. I am clueless with that stuff but your blog looks great!
    Patty @ Reach Your Peak recently posted…DIY Craft IdeasMy Profile

    • Reply
      Sweet Miles
      March 7, 2014 at 12:56 am

      YAY good for you! I can’t wait to see how it turns out!! πŸ™‚ Thanks!

  • Reply
    jenn @ runnderlust
    March 4, 2014 at 4:16 pm

    Ah, all of this is way over my head no matter how hard I try! BUT your blog looks great!!
    jenn @ runnderlust recently posted…Motivation Monday: Can we fulfill long term goals?My Profile

    • Reply
      Sweet Miles
      March 7, 2014 at 12:55 am

      Oh girl, don’t even worry! If I didn’t work with this stuff at my day job I would be lost too! I just love it though, I wish I had majored in web stuff back in college πŸ™‚

  • Reply
    Kristina @ Damn Ten Pounds
    March 4, 2014 at 8:12 pm

    I have needed to switch to self hosting and spruce my space up, but it’s intimidating!! The Blue Host screen shot was clutch for me. Maybe it’s not so scary after all πŸ™‚ Thank you for this!
    Kristina @ Damn Ten Pounds recently posted…This is why I don’t BakeMy Profile

    • Reply
      Sweet Miles
      March 7, 2014 at 12:53 am

      It’s not scary! Do it do it! Trust me, it’s MUCH better for your blog to have it off of wordpress or blogger hosting!

  • Reply
    Christine@ Apple of My Eye
    March 4, 2014 at 8:40 pm

    Everything looks fantastic! I love the fresh start that redesigning your blog gives you πŸ™‚
    Christine@ Apple of My Eye recently posted…White Chocolate Cranberry Protein BarsMy Profile

    • Reply
      Sweet Miles
      March 7, 2014 at 12:52 am

      Thanks Christine! πŸ™‚ I love it too, such a great feeling!

  • Reply
    Jessie
    March 4, 2014 at 10:13 pm

    I gotta be honest – you lost me… which isn’t hard since I’m not tech savy at all! However… your blog looks GREAT xoxo

    • Reply
      Sweet Miles
      March 7, 2014 at 12:51 am

      I figured that might happen with most people! I told someone I mainly wrote this up as a reference for myself later, and because I learn and remember best if I write things down πŸ™‚ I think you could pick it up!

  • Reply
    Ashtonhawker@hotmail.com
    March 5, 2014 at 2:39 am

    Oh my gosh. I tried to follow this, bc my blog could use some major help. This kind of made me realize what a grandma I am at technology… Yikes.
    Ashtonhawker@hotmail.com recently posted…Trophy Wives: Your Complete GuideMy Profile

    • Reply
      Sweet Miles
      March 7, 2014 at 12:50 am

      Haha no worries!! I LOVE this stuff and play with websites all day work πŸ™‚ You’re not a grandma at all!

  • Reply
    Tia @ Arkansas Runner Mom
    March 5, 2014 at 9:20 am

    Looks great!! If I were a little more tech savvy I might understand those steps. Lol!! John bought me a domain at christmas for my blog which I love but I still keep my blog pretty basic (started in blogger). You are so talented in this area!
    Tia @ Arkansas Runner Mom recently posted…The Little Rock Half Marathon Weekend and Race Recap- EPIC!!My Profile

    • Reply
      Sweet Miles
      March 7, 2014 at 12:49 am

      Haha! I noticed that your domain name was flying solo these days! Yay! I love your blog πŸ™‚

  • Reply
    Presley @ Run Pretty Blog
    March 5, 2014 at 12:38 pm

    I keep toying with the idea of a total redesign, but then I end up just changing something small and forgetting about it for a while. I need to just do it!
    Presley @ Run Pretty Blog recently posted…I Actually Ran + A Bit About The Blogger SurveyMy Profile

    • Reply
      Sweet Miles
      March 7, 2014 at 12:49 am

      It’s SUCH a commitment to do a complete overhaul! I had been putting it off too!

  • Reply
    Kirsten @ Fit + fab
    March 5, 2014 at 5:19 pm

    Absolutely love the color palette you picked out!
    Kirsten @ Fit + fab recently posted…Week 9 Progress [vlog] (& double chocolate protein waffles!)My Profile

    • Reply
      Sweet Miles
      March 7, 2014 at 12:48 am

      Thank you!! I do too πŸ™‚

  • Reply
    Anna
    March 25, 2014 at 4:59 pm

    You’ve convinced me. I’m still scared. But it’s time. You know you rock, right?

    • Reply
      Sweet Miles
      March 25, 2014 at 5:15 pm

      Haha! Oh please. You rock, my dear πŸ™‚

  • Reply
    Heather @fitncookies
    October 19, 2014 at 5:14 pm

    Hey Sarah.. How did you work on everything and redo it without touching your old blog? Like, you had yours still up (unless maybe you didn’t.. it’s been a while!) while you worked on redoing it. I am currently beyond frustrated with mine since I don’t really know what I’m doing, and am contemplating starting new. What child theme did you choose btw?
    Heather @fitncookies recently posted…Benson does yoga with meMy Profile

    • Reply
      Sweet Miles
      October 20, 2014 at 10:13 am

      Hey! I actually put it on maintenance mode while I did all of the hard stuff! It was down for about 3 days! You can install a plug in that will allow you to still see it but will prevent visitors from seeing it and all they will see is a landing page that you can customize. I knew what I wanted to do ahead of time so it didn’t take as long. And on WordPress, it’s really as simple as turning on or off a new theme! Your old one will still be there if you mess up your new one!

    Leave a Reply

    CommentLuv badge