Tag Archives: TwentyThirteen

How to bring back the date on Sticky Posts in TwentyThirteen

By default, the TwentyThirteen theme suppresses the date byline when a post is marked as Sticky (in which case, it’ll always be displayed at the top of the posts list).

That’s usually great, because Sticky Posts are often timeless announcements, and the fact that they’re a year or two out of date doesn’t look as handsome as if the date byline would simply be removed. I like this as a default behaviour.

Here’s what a default sticky post looks like, without the date displayed:

But of course, every now and again you may want to break the rules and shake up the whole universe. I did this on my iOS Dev Diary recently, where an announcement post would have been very helpful with the date displayed (I didn’t intent to keep it there for long).

So how do we bring back the date on Sticky Posts in TwentyThirteen? Let’s find out!

Continue reading How to bring back the date on Sticky Posts in TwentyThirteen

How to bring back the Author Byline in TwentyThirteen

I could have sworn that when I started using Automattic’s TwentyThirteen theme over five years ago, it displayed an Author Byline in the meta description. That’s the text right underneath the title of a post, the same line that displays the post date, categories and tags.

I remember this because there were many an instance on which I had to hide that Author Byline, because on single author websites, crediting yourself over and over again just leads to a cluttered reading experience. Furthermore, if you have several tags and categories to display, the meta line can easily run over into a second line, adding to more clutter than we want to see.

Turns out that over time, the WordPress team have had a lot of feedback about the Author Byline, and it turns out that nine times out of ten, people just didn’t want to see it. So they decided to invisibilise it by default.

Thanks to David Greene and P. Chandra for bringing this to my attention.

Let’s take a look at two options that can bring it back in TwentyThirteen. Continue reading How to bring back the Author Byline in TwentyThirteen

How to fix the Disappearing Mobile Header in TwentyThirteen

I’ve recently changed themes on this site, from my own development of P2 Categories to Automattic’s TwentyThirteen. P2 Categories was not mobile friendly by default, and TwentyThirteen gives all my major notebook sites a cohesive look, making maintenance easier for me.

One thing I’ve noticed about TwentyThirteen is a small bug that’s been discussed several times around the web: when no header text elements are shown (under Appearance – Customise – Site Identity), a graphical header image disappears on mobile devices. Or more accurately, when the screen width changes to anything below 767 pixels.

If a site title and description are shown, the bug does not present itself, and instead the theme resizes the header image as well as the text without issues. That’s the behaviour I’m experiencing on both my 3D Dev Diary and my iOS Dev Diary.

I did some digging and found a suitable solution for this problem. Let me share it with you here.

Continue reading How to fix the Disappearing Mobile Header in TwentyThirteen

How to turn plain URLs into clickable links in WordPress

The marvellous P2 Theme has an interesting feature: write out a plain link, and it magically becomes clickable without explicitly adding the a href tag.

This may not be a big deal if you’re writing posts in the visual WordPress editor rather than HTML, but for those of us who like to write in HTML, it’s just one less thing to worry about.

I was investigating this feature recently, and it turns out WordPress has a built-in function that can do this: they call it make_clickable(), and it works with URIs, FTP, Email addresses and anything starting with www. The function is really easy to use too: it only takes one parameter (a string), and returns the clickable HTML code.

Let’s see how to use it in context, using the TwentyThirteen theme.

Continue reading How to turn plain URLs into clickable links in WordPress

How to display Jetpack stats per post in WordPress

Some websites employ this or similar technologies to show how many views a single post has had. I was wondering how they did that without starting to count stats that have already been counted for several years, either by Google or by Jetpack.

Yesterday I came across this post by a WordPress dev named Topher about how to render Jetpack Stats: http://wpgr.org/2013/03/02/rendering-jetpack-stats/

I decided to test this in TwentyThirteen, and it works a treat – here’s how to do it. The principle will of course work with any theme.

Continue reading How to display Jetpack stats per post in WordPress

How to use the TwentyThirteen Theme by Automattic

In this screencast I’ll show you how to use TwentyThirteen, a simple yet powerful WordPress theme that looks gorgeous and is mobile friendly. I’ll explain Post Formats and their impact, how to show images in galleries and how to embed videos to your WordPress site too.

I’ll finish it off by demonstrating how the site looks like on a desktop browser as well as the iOS Simulator on iPad and iPhone. I’m using WordPress 3.9 for this demo.

I’m referencing some related articles in this video – here they are:

Catch this episode on my WP Guru Podcast:

How to style captions in Twentythirteen

I love the Twentythirteen theme – except for the captions that appear underneath images. If you’ve ever seen them they look so out of place as if someone forgot to style them altogether. Here’s what they look like by default:

Screen Shot 2014-04-14 at 10.47.48

Notice how the captions are actually larger than the post text. I wanted to drop this size a bit, but at the same time integrate the text better with images I post over at http://www.versluis.com, adding a bit of padding, some rounded corners and perhaps tint the background colour ever so slightly.

Here’s what I came up with:

Screen Shot 2014-04-14 at 10.47.08

And here’s how I did it:

Add this to your theme’s style.css file or override your stylesheet with an appropriate option. Here’s what this code does:

First we’ll reduce the 18 point caption size and bring it in line with the rest of the post text (1em). Then we’ll tint the background colour to a very light hint of grey. We’ll also add a bit of padding around all edges of the text, it looked a bit cramped in there before.

The second larger block is creating rounded corners at the bottom of the caption, but not at the top so it looks like an attachment. There’s a remarkable tool that lets you visually set this and return some code at http://border-radius.com – go check it out and have a play.

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