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.
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…
The File Manager there at the bottom is where everything you need is. That’s where your blog lives.
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!
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.)
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.
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.
**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!
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!