Blogging Design Tips: Customising Your Theme

Blogging Design Tips

The second part in my Blogging Design Tips! You can see the first part which is about choosing a theme here. I want to try and keep this post as short and concise as possible so I’ll just be going into what I feel like are the most important parts of your theme. Like I said in the Choosing A Theme post it’s all subjective; not everyone is going to like the same things, but hopefully I can help offer a few tips if you’re not really sure where to start!

Every theme will have different customisaton options, but the basic idea should be the same for all of them. Also, this is based on WordPress. I’m not sure how much you can get from this if you use Blogger, but hopefully there’s some general tips again that you can find useful. I figured the easiest way is to start from top to bottom so let’s go….

Titles & Header Images

 

I’m not going to go into the actual designing of a header image in this post (because that’s a potential post for later), but the main thing you need to keep in mind is the header size especially if you have a free account. If you have access to CSS customisation you can be more flexible in this area, but if you have a Free Plan then it’s really important to make sure your header is the size the theme suggests.

A header is one of the first things people see when looking at your blog so I really recommend having something there. Even if it is just a stock photo.

If you’re uploading a header image that you designed I highly suggest turning  off the Display Site Title and Tagline. I still recommend putting something in the boxes though because I’m pretty sure this is what Google uses when it indexes your blog.

Check these sites out if you want to design your own header:


The Navigation Bar

 

A navigation bar (along with a sidebar) is one of the most important parts of a good theme! If people don’t have an easy way to access your content then it’s going to be a lot harder for them to see if they should follow you.

The first thing you’re going to want to do is set up a new menu. You can do that by clicking on “Add a menu“. You can call it whatever you want I just use “Main Navigation” because that’s what it is? Haha.

 

Once you’ve added that menu you’re going to want to go into it so you can add different links and pages. Make sure you have the location set to “Primary Menu” because that’s the one that’s at the top of the page. If your theme allows it you can also add footer menus and social media menus.

Clicking on “Add Items” brings up a list of all your pages, categories and tags. You can use ones you’ve already set up (by clicking on the category heading) or you can create your own custom links.

You don’t want to overload your nav bar but some things I think are important to include on it are:

  • Home
  • About
  • Reviews
  • Book Tags / Memes – maybe even Wrap Ups and Hauls or Discussions, whatever features on your blog a lot
  • Review Policy
  • Contact

It’s a bit more complicated but I recommend taking advantage of the drop down menu feature that’s built into nearly all WordPress themes. Not all links on your navigiation bar need to have drop down options, but I think more category based ones like reviews ect. should. The menu builder in the theme is relatively easy to drag and drop. Drag links under other links to make a drop down. For example on my own blog I use it so people can find my reviews by specific ratings. It’ll look something like this:

 

If you have a theme were you use a custom front page instead of blog posts please please please have a “blog” link that shows ALL your posts. It’s a lot more helpful than just having ones that only shows reviews ect.

The Sidebar

 

Another super important part of your blog! If your theme doesn’t have a sidebar that’s fine. There’s no rule to say you need one, but I really suggest having one so you can include information like a welcome message, social media links ect.

Definitely take advantage of WordPress’s Widget features. There’s a lot of cool things in there. The ones I use the most are the Text Widget because it’s like a blank space that you can put whatever you want in. You can also use basic HTML in these boxes.

There’s a widget for Social Media links, but I like using the Text Widget for these because it gives me more control and I can add more than just the basic Twitter and Facebook. I use a website called flaticon and some HTML code.

<a href=”social media url“><img src=”image url“></a>

which is what resulted in the way my social media section on my blog looks:

ThemeSidebar2

The above HTML is also what you use if you want to add separate images or text links. To get an image url then once you’ve uploaded it to WordPress click on the edit button and copy this:

ThemeSidebar3

Past it in between the “” marks in the IMG tag.

This works the same way for links instead you just copy the web address so it’d be:

<a href=”website url“>text</a>

HTML can be kind of confusing, but I really think you should learn your basics because it’s interesting and very useful! If you guys would like a post solely on some basic HTML that you can use in posts then let me know because I’d be happy to try and put something together! Otherwise go give Code Academy a vist!

Other widgets I recommend using in your sidebar:

  • Archive
  • Follow Blog
  • Follow Button
  • Goodreads
  • Search
  • Social Media Icons
  • Twitter

I bolded the Follow widgets for obvious reasons. They make it so much easier for people to follow your blog! Each widget has it’s own options so make sure to check them all out!

If you’ve won Awards for your blog I suggest creating a Page for them instead of overloading your sidebar!


Fonts, Colors & Backgrounds

 

If you’re going to use a background image I recommend using one that’s very subtle. A good site for free, subtle backgrounds is Subtle Patterns. Otherwise I suggest using a flat colour and something’s that an off white or light grey or something pale/pastel if you want more colour.

With fonts I recommend a serif or sans-serif (just your basic defualt print looking ones) one over a script one just because it’s easier for people to read. You could potentially use a script font for headings.

Unfortunately, free accounts don’t have a lot of customisation when it comes to colours or fonts.

Footer

ThemeFooter

Footers aren’t necessary but can be useful for putting things on your blog without cluttering up your sidebar. If you’re not sure then the Footer is what appears at the bottom of the page under the main content. So this is the footer of my blog:

ThemeFooter1

Footers work the same way as the sidebar and you can add all the same widgets. If you have a Bookstagram or want to show some (again, not all) of your Awards then I think this is the perfect place to do that. All themes are different but in my theme each Footer represents a new column.

Some of the widgets I recommend including in your Footer are:

  • Blog Stats
  • Blogs I Follow
  • Categories
  • Instagram
  • My Community
  • Recent Comments
  • Recent Posts
  • Text
  • Top Posts and Pages


Theme Options & Featured Content

 

 

I won’t be going into either of these too much because each theme has different options. If your theme allows Featured Content you can input a tag that you’ve used like “reviews” and those posts will be displayed usually at the top of the blog. I think this is a really cool feature, but for some reason it just doesn’t work for me?

Theme Options normally lets you control how your posts look. You can sometimes choose options as to whether you want to display categories, tags and featured images!

Things to Remember:

  • All themes have different options.
  • At the end of the day it’s your theme. Customise it how you want.
  • If you want to play around more with all the settings without affecting your blog create a test blog.
  • DON’T HIT SAVE UNTIL YOU’RE 100% CERTAIN!!!!!!!
  • Still stuck? WordPress has some Tutorials that probably explain this way better than I have.

sep

What’s been your experience with customising your theme? Do you just use the default settings or do you explore all the options?

Next up in the series: Posts, Pages, Categories & Tags

I hope you’re all having a fantastic day!

lauren xx.png

Find me: Twitter – Goodreads – society6 – RedBubble
Support Me: Kofi – Book Depistory affiliate link

Advertisements

34 thoughts on “Blogging Design Tips: Customising Your Theme

  1. These posts are so useful! I wish I had them when I started out.
    And about the header image, YES! I was playing around with a few themes recently, and I had to make different headers for all of them because of the size differences. It was so frustrating!

    Liked by 1 person

  2. I am really loving your Blogging Design Tips and I keep learning new great things! Thank you so much for doing these! I was always wondering how people got the drop down menus on their blogs but could never work it out so I just left it and then you explained it today and I was like ‘It’s that simple???’ and now I can finally display all the things in my menu bar I wanted to without it being cluttered! Thank you!

    And I definitely agree, I think a basic knowledge of HTML (or at least knowing WHERE to look for help) is definitely something bloggers should have!

    Liked by 1 person

    1. Aw, thank you so much!!! I’m so glad I was able to help you figure it out. It definitely seems a lot more complicated than what it actually is. Honestly, WordPress could probably explain it a bit better because there’s kind of no real instructions haha. I’m glad you’ve got it now though 😀

      Definitely! It doesn’t have to be anything advanced, but some basic stuff (especially links and images) is super helpful.

      Liked by 1 person

  3. Great post Lauren, and definitely one I will be bookmarking for later because I imagine this will be really helpful when I next go through the re-design process on my blog. I’ve been on WordPress nearly two years and I’m still not exactly an expert when it comes to designs, and forget HTML, I know nothing about it!
    When it comes to customizing my theme I just go with whatever looks good to me. I love seeing what other people do with their themes though, sometimes it gives me ideas for things I can incorporate into my posts.
    Also everyone mentions Canva as something they use, I don’t but I’m wondering if I should check it out at some point because, well why not! 🙂
    Again great post, and incredibly helpful as well, for newbie bloggers and older ones like I am! 😀 ❤

    Liked by 1 person

    1. Thank you so much, Beth! Haha, I think your blog design looks amazing so I wouldn’t worry about it too much ♥ HTML isn’t a necessity, but I think knowing some of the simple bits like even just links/images can be helpful. If you’re ever curious or have some spare time then Code Academy is quite good. It’s extremely beginner friendly.

      Other bloggers are definitely a huge inspiration for me when it comes to design/theme. I love seeing what everyone comes up with.

      I’ve never used it myself, but I think it’s a great resource for people who don’t have Photoshop!! I’ve thought some people have used Photoshop for their blog designs, but it turns out they’ve actually used Canva, haha.

      Liked by 1 person

      1. That’s all right, and thanks Lauren. It means a lot you think that, and not just because it means I don’t need to worry about re-design or learning HTML for a little longer. 😀
        Well I’m one of those bloggers who don’t have Photoshop so I should definitely check it out in that case. Who knows I may end up really loving it. 🙂

        Liked by 1 person

  4. wow, this is such a helpful post, lauren!
    I have literally spent DAYS just trying to figure all of this out by myself.. i wish this post was there when i was starting out! i actually have been using canva for a while now for designs and stuff.. i got that rec from you actually. i think it was a q&a post of yours.. if i am not wrong. so thank you! ❤
    anways great post. cant wait for the others in the series!

    Liked by 1 person

  5. Such a brilliant tutorial Lauren. I’m on Blogger and can code Blogger but WordPress has always been a mystery to me. I was thinking of migrating a few years ago and even purchased hosting but just felt so overwhelmed with trying to customise the themes and the dashboard and crawled back off to Blogger again. Really looking forward to your tutorial series ❤ ❤

    Like

    1. Thanks so much, Kelly!! I considered Blogger for a while when I decided to start blogging because of how much more customisation you get. I eventually decided on WordPress though because I preferred the cleaner interface. I’m still really jealous of how much more coding you can do on Blogger though, haha.

      Like

  6. I personally prefer having all my info and a welcome message on my about page as opposed to my sidebar – it looks nice on a lot of blogs, but when I tried putting my info in there it felt way too full. I just have categories, archives, and a search bar in the sidebar I believe 😛
    I would love a post on basic HTML! I already know quite a bit from an IT class I took in high school, but I could use a refresher 😝

    Liked by 1 person

    1. Sometimes I think about doing that too because I have a shortened version in my sidebar and it always sounds so tacky and forced, but I keep it there because I know there’s people out there like me who are too lazy to click anywhere else 😂

      I honestly think I need a refresher too because ever since my Digital Media course ended I’ve hardly used it, haha. I’ll probably definitely put a post together at some point in this series though!!

      Like

  7. I’m kind of lazy and basically make my sister do all the work for our blogging design hahaha. But we’re planning to redesign and start a new blog soon so this is actually a super useful post. Getting the right size header image is really hard, but it is so much fun to make you blog look nice.

    Like

  8. I remember exploring all the options (or trying to!) when I first made a blog two or three years ago but it’s been awhile so this post was quite helpful in refreshing my memory! I think it’s time I fiddled with the theme and changed things up again!

    Rachana @ Spun

    Liked by 1 person

  9. I really love this post, it’s so helpful, Lauren 🙂 I always try and explore all of the options but it’s been a while since I played with all of them, this is making me want to have, well, a sort of a make-over now hahaha 🙂

    Liked by 1 person

  10. I knew most about it, yet I learned a few extra things reading your post! (such as using the text widget instead of the social media widget to be able to put more social media icons up there). I also consider using the footer more now, let’s see where this will take me. Thank you for your helpful post, it really is appreciated!
    xo Annina | Blattzirkus

    Liked by 1 person

  11. Thanks for this post! I’ve been doing quite a bit of re-designing on one of my blogs and it is super helpful. I’m also really grateful that you explain all this simply as I’m not particularly computer savvy.

    Liked by 1 person

  12. I love how you explained such a complicated process in such a straight-forward way. A lot of this is stuff I’ve had to play around with to figure out BUT I did recently figure out the drop down menu thing and I think it’s really changed the way my blog looks. I’m not savvy with html AT ALL but I’m definitely bookmarking this post to come back to so I can play around with the social media stuff like you mentioned. I’m annoyed that Bloglovin’ doesn’t let you insert their button on WordPress so I’m going to try and figure that out at some point. Great post, Lauren! ❤

    Like

    1. Aw, Christine thank you so much!!! It annoys me so much that you can’t use scripts on WordPress. You can even use them on Tumblr themes so I don’t understand why you can’t on WordPress considering it’s way more associated with businesses. Anyway, rant aside, with Bloglovin’ you can save an image version of the button and use the HTML I listed above! So for example it’d be:

      <a href=”your bloglovin url”><img src=”https://www.bloglovin.com/images/logo_2x.png”></a>

      You can get different versions of the image here: https://www.bloglovin.com/widgets

      Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s