Category Archives: Themes

Sometimes we have to dive deep into some scary code to make a theme or plugin do what we want. Here are some articles that deal with such things.

Keep in mind that software evolves fast and a tweak that worked a year ago may not work anymore today.

How to replace fonts in TwentyThirteen

I must admit that the new default font in TwentyFourteen looks damn sexy – but I’ve only just gotten used to the TwentyThirteen theme. Don’t get me wrong, if you’re after a magazine style theme then TwentyFourteen does a great job.

Since I didn’t want to change themes again over at versluis.com, I thought perhaps I’ll just replace the default fonts in TwentyThirteen (Bitter and Source Sans Pro) with TwentyFourteen’s new font Lato.

Here’s how:

Screen Shot 2013-12-15 at 14.21.14

Screen Shot 2013-12-15 at 14.28.15

Lato is an open source font by Warsaw based designer Ɓukasz Dziedzic hosted on Google Fonts. Lucky for us we can link to it in our CSS stylesheet right away. Do this somewhere near the top, just below any other @import statements:

Next, overwrite the existing TwentyThirteen declarations with this bit of CSS. If you’re using a child theme, add this right after the import statement. If you’re tweaking the original (which you shouldn’t) then you can add this to the very bottom of style.css. Alternatively you can declare this as additional CSS if you have the option (Jetpack does this for example):

This will style the following elements, overriding existing TwentyThirteen declarations:

  • site title and description
  • all post/page headlines
  • input text areas
  • drop down menus
  • button text

Remove items as appropriate (for example the site title). If you don’t fancy Lato and would like to use another font instead, just link to it with an @import statement, then replace “Lato” in the font-family declaration with your own font. Here’s an article I’ve written that shows you howto do this:

  • https://wpguru.co.uk/2013/10/how-to-use-a-custom-font-in-css/

This tweak may also work on WordPress.com with the CSS extension subscription, but since I haven’t got that I couldn’t test it.

Hope it helps!

  • http://www.google.com/fonts#UsePlace:use/Collection:Lato
  • http://www.google.com/fonts/specimen/Lato

How to use your own random header images in TwentyThirteen

I really wanted to use the new WordPress TwentyThirteen theme over on my other site http://www.versluis.com. But I didn’t like the idea of using the default header images.

Since my previous theme had random header images, I thought it would be great to tap into the now built-in function and prepare a child theme that overrides those existing header images with my own. Here’s how I did it:

  • first we’ll create a child theme
  • then we’ll remove the existing header images
  • and add our own images

As a final touch I’ve tweaked the site title font and gave it a Photoshop-like outer glow, all in CSS. Let me talk you through it step by step.

Continue reading How to use your own random header images in TwentyThirteen

How to add drop down categories to Automattic’s P2 Theme

You know I love P2. I always have, and I always will. It’s the perfect theme that turns my WordPress installation into a notebook site.

Many users – me included – have often wished for the addition of categories to P2, so that when you write a post, you can add it to the category from the front page, perhaps via a convenient drop down menu.

Here’s how to do it with P2 Version 1.5.1.

And if you don’t want to hack the code yourself, I’ve got a full working project on GitHub that’s ready to rock.

Continue reading How to add drop down categories to Automattic’s P2 Theme

How to style the Add Media button in P2

Screen Shot 2013-02-20 at 11.08.52
Before…

I’ve noticed that the Add Media button in P2 version 1.4.2 is a bit too low when you write a Blog Post.

The button usually sits neatly above the status box, however it cuts into the top of the box due to the additional text field for the blog post – like so:

It’s not so pretty. As a quick fix we can shift it a few pixels higher, therefore it won’t interfere with the box anymore:

 

Add it to the bottom of your style.css sheet and you’re golden!

... and after the fix
… and after the fix

How to bring back Post Categories in P2

We’re all excited about the new features in Automattic’s P2 Theme v1.4.0 – however many of us have setup custom tweaks around Post Categories. In the latest version these have been replaced with Post Formats.

Post Formats are great, but they are limited to values defined in the WordPress core. If you wanted to create a new post menu like “critical” or “alarm” this wouldn’t work. We could use Custom Post Types to add to those formats, however it’s way too big an operation for I wanted to achieve: which is bringing back the “posting into categories” feature we’ve come to love from the previous version.

In this article I’ll show you how to back-port categories so posts will appear as they did in P2 v1.3.3 while retaining all functions of the latest update.

Continue reading How to bring back Post Categories in P2

How to tweak P2: adding and replacing categories

Today I’m going to tweak the marvellous P2 Theme by Automattic.

P2 is one of my all time favourite themes – not only because it transforms WordPress into something completely different, but also because it’s an innovative way we communicate internally here at WP Hosting. If you don’t know P2 yet, do check it out at p2theme.com and watch the video.

At the time of writing P2 is at Version 1.3.3 and has been since November last year. Code changes quickly, so by the time you’re reading this my ramblings may be out of date.

Let’s have a look at how we can add and amend the default categories (i.e. Status Update, Blog Post, Quote and Link).

Continue reading How to tweak P2: adding and replacing categories

How to style the Motion Theme for WordPress

I had a closer look at this theme the other day when I made some upgrades on Nadia’s website.

I really like the look and feel of Motion but I felt certain things were missing from this wonderful theme, such as drop down submenus.

Let’s take a look at some tweaks and how you can make Motion your own.

This article was written for Version 1.1.6 – these tweaks may not work in later revisions of the theme.

Continue reading How to style the Motion Theme for WordPress

How to style the BuddyPress Default Theme

Ray and I have been working on Livestatus, a status report system for television broadcasters. We decided that BuddyPress would be a superb platform to use for this and went with it.

There aren’t many Themes available for BuddyPress so we went with the default theme which I think works best. However there’s still a lot of clutter we didn’t need so I made some quick amendmends.

Here are my notes if you’d like to have a go.

Continue reading How to style the BuddyPress Default Theme

How to style Modularity Lite 1.3 by GraphPaperPress

Modularity Lite returns with version 1.3, this time boasting WordPress Menus and a dynamic slideshow option to keep us excited. You can even change colours and your background image. Making it your own was never easier. Here are my notes from when I created minor amendmends for Simon’s website SoundCredit.tv.

My original article on how to style this puppy goes back to version 1.1. With each update, the code has dramatically changed and therefore needs different tweaks. If you’re running an older version of Modularity Lite, check out my instructions for Version 1.2.

Continue reading How to style Modularity Lite 1.3 by GraphPaperPress

How to style AutoFocus by Allan Cole

One of my all time favourite themes is AutoFocus by Allan Cole – it’s a superb portfolio theme that lets your pictures to the talking. Great for sites that show off images.

I wanted to use it over at Cloud-TV but thought that a different colour scheme would better suit my pictures – so I took some notes on how to amend certain aspects of the theme. You may find these useful if you’d like to style the theme to your own needs.

Please note that at the time of writing AutoFocus is at Version 1.0.1 – it is likely to be the final standalone theme and it’s no longer under active development. These tweaks will NOT work for Autofocus Plus or Plus Pro.

Continue reading How to style AutoFocus by Allan Cole