New Year, New Look. My WordPress Site Redesign.

Posted on December 23, 2015 «
Categories: Behind the Curtain «
Join in on the Conversation «
Is this a book review? Jump to the Quick Review


new look

No, you are not dreaming! There is a new design and color palette as of December 21. I took most of the day Monday to get everything changed over to the TweakMe v2 theme and officially made the new look open to the public around mid-afternoon.

How Got Ready for My New Look

Step 1. Bought the TweakMe v2 theme from Nosegraze. You won’t regret it. If you click on this link, I’ll get a bit of compensation as I’m a Nosegraze affiliate.

Step 2. Created a testing directory.
   Using cPanel, I created a directory called test in my public_html directory.

Step 3. Created subdomain.
   Using cPanel, I created a subdomain called test and pointed it to the test directory I just created.

Step 4. Installed WordPress at the subdomain.
   Via cPanel, I accessed Softalicious to do a secondary installation of WordPress.

Step 5. Exported a month’s worth of posts from my live site and imported them into my test site.
   I opted not to export my entire site. One of the goals of this site redesign was to figure out exactly what plug-ins I needed and would continue using with the redesigned site.

Step 6. Imported the posts into my test site.

Step 7. Installed the TweakMe v2 theme at my test site.

Step 8. Started messing with the TweakMe v2 settings.

Step 9. Shared the test site with a few trusted friends to get their opinions and made the changes that made sense.

Step 10. Finalized the design and made buttons and social media images to match.

Step 11. Rolled out the new design on the live site!

 

 

What I Wanted to Keep

  • I love my dark color scheme. I know the in thing right now is lighter and brighter, but honestly, it stresses my bad eyes. This is especially noticeable when a lightweight font is paired with a solid white background (#000000).
  • I love my header. I paid for that image from Shutterstock and I’m going to get my money’s worth from it. It’s not going anywhere.
  • I love my primary font, Special Elite. When I think of writing, I think of old typewriters click clacking away. It fits with the idea that I’m not always reading and writing about the latest and greatest hits. (Although typewriters are back in fashion again.)
  • I love that my header is an image map. It gives me freedom to put other items in my sidebar and menus because I have key links appearing there.

 

What I Wanted to Change

  • The width of my site. I was starting to feel boxed in with my Behind the Curtain and In the Spotlight features which are often text heavy.
  • My secondary font. If my site was going to be wider, I wanted to find a font complementary to Special Elite that would be easy to read.
    • I basically googled “What fonts go well with Special Elite,” and landed on Merriweather. It was easy to read on an off white background.
    • Did you know that if you review the Google fonts on Google, they give suggestions on the Pairings tab? Check it out.
  • Add at least one accent color. I loved the gray, but wanted to add another color (or two) that would draw the eye to key areas.
    • In the end, I decided to move away from the monotone color scheme. I stuck with the original colors of my header image and added blue as an accent color. Thanks to my sister and my friend, Erin, for giving me the push. My sister said the orange made her think of reading a book by a fireplace.
  • Feature my Features better. In the Spotlight and Scenic Sundays are my babies and I wanted everyone who visits the site to know these are key posts.
    • There are large buttons in my header image and a section on Center Stage (home page) to bring attention to these features. I also added a bit of a description of each of these post types on my Features page.
  • Get the MailChimp Subscribe Box on the Same Line as the Email Box. A little annoyance that has been bothering me for ages.
    • I didn’t really accomplish this because I don’t know enough about responsive design. I did learn that you can strip out most of the styling tags in the Super Slim Embedded form to give you a bit more flexiblity.

 

wordpress site redesign

 

Fun Stuff I Figured Out

  • Make sure to have the Hook enabled in the TweakMe v2 if you actually want your code to work.
  • There is amazing stuff hidden in WordPress’s Screen Options. And it can be different in every screen!
    • I used the Menu #2 in the TweakMe v2 theme for my Social Media Icons and wanted to have them open in a different window and be tagged. Both of these options are available under Screen Options when you set up your Menus.
  • Using the Display Widget plugin and the Recent Posts Extended Widget plugin, I have greater control on my side bars and footers. Here are some examples (these links should open new pages).
    • 2016 #ShelfLove Challenge. Check out the sidebar—quick and easy access to the monthly link ups!
    • A Book Review. Upcoming Reviews, Recent Reviews, Events & Challenges and Giveaways in the sidebar.
    • In the Spotlight post. Easy access to Events & Challenges, Giveaways and a complete list of past In the Spotlight participants in the sidebar. In the footer, quick access to the most recent In the Spotlight posts and giveaways.
    • Behind the Curtain (this post). Access to the most recent Behind the Curtain posts and giveaways in the footer.

 

Resources I Used

 

Grab My Button
Second Run Reviews

 

My WordPress Site Design…in a Nutshell

Yes, I took about a month to roll out the new design. Is that necessary? No, not really, but I work full time, it’s the holiday season and I was sick. So yes, it took me nearly a month. But I’m happy I took the time. The time allowed me to mess around with the color scheme more and find something way different from the monotone colors I have had for two years.

I’m thankful for the WordPress gals I know and for my sister. The new site would not be possible without their help and advice. And don’t worry, this is just an overview post, there are sure to be more Behind the Curtain posts because I learned a lot in the last month.


So what do you think of the new look? If you’ve gone through a site redesign, what did you learn from the process?


Tags: , ,


28 responses to “New Year, New Look. My WordPress Site Redesign.

  1. Terri, I LOOOOOOVE IT!!!! I already commented in your previous post that I love the new colors. The fact that you don’t go with the trends is what make your blog so unique 🙂
    Thanks for sharing the process with us! It remind me of those endless days when I started the blog and all I did was google fonts pairing and colors! I’ve use about four different fonts but have a weakness for Special Elite. I think Ashely’s themes and plug ins are fantastic! I bought her UBB back in September and I haven’t come around to install it! hopefully this week that I will be home with the kiddos. 🙂
    I wish you had a button because I wanted to add your blog to my “Otherworldly Blogs” slider, I kept coming back hoping you had it 🙂 but… never mind! I just made one! I couldn’t not have your blog feature so I hope you don’t mind 🙂 Happy Holidays

  2. I like the change! It freshens things up, and it looks simple yet elegant. Thank you for sharing all these steps. One day I will eventually move to self-hosted WP and will need all the help I can get. We write our As the same!

    • There are some wonderful tutorials out there for moving from one type to the next. I moved from Blogger to WP self-hosted in September 2014. It was a wonderful decision and I’ve enjoyed all that I’ve learned to date.

  3. I like your new design, it looks great! I haven’t gone through many site redesigns since I started blogging, my only one was when I switched to wordpress two years ago. After that I switched my banner, but that’s about it. I never felt the need to do a redesign as I like my current design, but I do tweak a efw thigns now and then. I use the tweak me theme version 1 and I love the theme.

    I don’t mind the lighter themes that are in nowadays, but I do like te text to be quite a lot darker than the background, so it’s easy to read. As I’ve seen some sites that had really light text, which made it hard to read.

    I always set-up and try out new thigns on my live site, it always sounds like so much effort to try it on a test site, but your explanation of how you did that is pretty clear, so if I ever do a big redesign I might try that out.

    I like the way you bring attention to your most promiment features! That way visitors can get a quick feel of what your site is about and what type of posts they can expect.

    • I had the Tweak Me v1 theme prior to this and took advantage of Ashley’s Black Friday deal to upgrade. Totally worth it! I doubt I’ll change the design again any time soon. I like the new layout and am delighted each time I see the site. 🙂

  4. I love it! I’m also very glad you took the time to learn what you needed to learn to do everything properly. When I worked tech support for a web hosting company last year, the one thing that irked me the most was how many customers would start messing with things without any real knowledge of what they were doing and then call all ticked off and yelling about their site being broken. I was much more willing to help the nice but clueless customers, but the ones that were rude? “I’m sorry, but coding isn’t a part of our technical support.” (and it wasn’t, so I wasn’t lying.)

    • I work in software support as well and totally get what you mean. Clients don’t seem to get that we can’t fix everything and that we are at the mercy of our information technology and development staff.

  5. Ohh thanks for the tips! And of course, for helping me set up mailchimp 🙂

    I love the new colors. I used to go for the black/dark a few years ago but my goal was to be more minimalist and white was what worked. BUT this is a nice color palette – still keeping the darker theme but not using black 🙂

    I also wrote down all the things I wanted for my site redesign 🙂 and I’m still working on cleaning up my categories!

  6. Wow loving this redesign! Your blog is looking great! I think it is so organized and very easy on the eyes. I’m with you on darker being easier to stare at. I think it is cool how there is no sidebar on the post pages and everything is so dynamic.
    We definitely need a redesign. I need inspiration lol.

  7. I’m using the same theme! It’s amazing how different sites can look using the same theme, when it’s well designed and has lots of room for tweaking. I like the way it looks on your blog!

    • I think that is what I love most about the TweakMe themes, Nikki. It’s the same theme, but each user personalizes to to their heart’s content. I never would have guessed you are using the same theme!

  8. I love the new look! The orange-y color is really pretty. I almost bought Tweak Me v2 during Black Friday as well. But I’m still happy with my current design and didn’t want to have to go through and copy all the settings over!

    • Thanks, Silvara. 🙂 Until I started working with my sister on the main header image, the only thing I had planned to change was the layout of a few pages and it just kind of spiraled from there. 🙂

  9. Congrats on your new design! 😀 I’m really glad I didn’t have to go through all of this though, heheh, that’s why it’s handy having a web-designer for a relative. I’m totally technologically challenged when it comes to making blogs work. XD

    • I built my first web site in 1996. I love technology and love learning new stuff! Ashley’s Tweak Me themes make it so easy. I’m not sure I could ever build a theme from the ground up, but it is something I would love to try.

  10. I LOVE the new look! Like so, so much! It’s unique and still very classy and readable! The color is so pretty, and I love the combinations you chose. But wow, what a process! It is HARD trying to figure all this stuff out. I love the idea of the social media icons being in menu #2! Like, SO MUCH. I spent like, a month trying to figure out how to code ONE small thing, and it still isn’t working exactly as I like it, so for you to do all this in a month is kind of amazing! Great job, and thanks for all the handy tips!! (Going to check the hook in Tweak Me 2 right now!)

    • Well, if you have the Tweak Me v2 theme, you can put the Font Awesome Icons tags in Menu #2. Then I picked a font that was close to GoodRead’s font for the ‘g.’ Let me know if you need help. 🙂