Blogger to WordPress: Customizing Your Design

By Gina | March 12, 2015

To continue my series about moving from Blogger to WordPress, I want to share the ways I learned how to customize the design of my WordPress site. Designing for Blogger and designing for WordPress are two different things, and although I had basic knowledge of HTML and CSS, which helped me massively for customizing Blogger designs, learning the WordPress platform was a learning curve, but very helpful and useful as a blogger and graphic designer.

How to Design Your Blog - Switching from Blogger to WordPress

As we go through the whole process of transferring from Blogger to WordPress, it’s important to keep in mind your design from the beginning.

Series: The Blogger to WordPress Process

  • Part 1: Choosing Blogger or WordPress – Blogger has a lot of customized design options if you want to dabble in graphic design and coding. WordPress has extensive features with its many plugins, templates and themes to choose from. You can also make nearly endless customizations with a self-hosted version of WordPress.
  • Part 2: Making the Switch: Transferring Your Posts & Pages to WordPress – It’s important to organize your posts and pages when making the switch. It’s also important to know how you want your blog to look. Coming in with your design elements will make a huge difference in the process! I suggest creating a mockup of your design, complete with your ideal layout, colors, fonts and functionality.
  • Part 3: How to Design Your Blog – Transferring to WordPress – This requires researching WordPress themes and learning a little bit more about HTML, CSS, the backend of WordPress and PHP. This is what we’re talking about today!

How do I customize my design in WordPress?

If you have some good knowledge of HTML and CSS and were pretty comfortable making advanced changes to your Blogger blog, customizing your WordPress design should be very doable. It could be a challenge at first, but after some quick tutorials, I found I learned a lot more about coding and web development, specifically for WordPress.

1. Research Themes & Frameworks

As I mentioned in previous posts, the Genesis Framework has become a great tool for WordPress blogs. With Genesis blogs, one thing to understand is that there is both a framework and a child theme associated with your template. Child themes are the visual themes you can purchase that add different layouts and functionality to your site–just like adding a premium theme to your WordPress blog. There are multiple reasons to consider doing the Genesis Framework + Child Theme combo, and Kristie from Blog Ambitions puts together reasons why she loves Genesis.

Some themes I love are:

2. Learn the backend of WordPress

In WordPress, you have access to the basic HTML, CSS, and PHP files, which you can edit through the “Editor” tab under the “Appearance” section. Depending on your theme and framework, you may want to do simple changes with CSS or you may want to add more functionality to your site, such as adding a “widget” area to give you more room for your content. You can do all of those things through the Editor tab, under the Appearance section. If you are brand new to WordPress, though, give yourself some time to navigate the WordPress platform and find different areas like the Settings tab, the Widgets area, the Appearance tabs and more.

3. Learn how to edit your Genesis child theme with Lynda.

One specific tutorial made a huge difference when I worked on making changes to my site:

Lynda.com : Customizing Themes with Genesis for WordPress – While Lynda does require membership, the tutorials available blow my mind. This one was about an hour, and she did a great job of explaining the Genesis framework and how a developer would make basic changes to Genesis child themes. It is a must-watch if you want to customize your WordPress site with your own branding and design elements!

Some of the basic customizations you may want to consider are:

  • Changing the size of your header space to fit your logo
  • Updating the copyright information at the bottom of your page
  • Adding additional widget areas to your site
  • Changing the fonts of your body copy and headings
  • Making customized color changes to match your brand
  • Making advanced changes to the layout, dimensions or graphic elements to the theme

Some other tutorials that may help are:

The Bottom Line:  Making the switch from designing in Blogger to designing in WordPress has a learning curve, but with the right tutorials you can improve your technical and design knowledge!

This post was an overview of how I went from designing in Blogger to WordPress, but let me know if you have any more specific questions!

Need more WordPress help? Not sure to switch to WordPress, check out these popular posts!

Posted in Blogging, Graphic Design