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 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 increase the font size in Automattic's P2 Post Box

Front page posting is what the P2 theme is all about – but I personally find the default font size on the front page a bit too small. Perhaps it’s my raging tired eyes. In every child theme I write for P2, I usually increase this – both for immediate posting, as well as for text editing (which also happens inline on the front page).

To do that, add the following to your style.css file:

This will address the font size for both inline editing as well as posting. I’ve chosen 1.3em because it integrates well into my other settings, but feel free to choose something larger or smaller (1.2em or 1.4em respectively). You can also choose a defined point size like 16px if you like.

To also address the text box for default comments, we can add this:

By default the font colour is black, so #555 tweaks it to be the dark grey that the rest of the P2 text has.

Happy hacking!

P2 Categories – Version 1.6 released

 

Last week I found some time to update my fork of Automattic’s P2 theme, aptly titled P2 Categories. In addition to all the greatness of P2, it’s been adding front-page category posting since 2013 (and hasn’t seen an update since then either).

Here’s what’s new in the latest version:

  • fixed the drop down menu, which was no longer working since Safari 10
  • rewrote the whole theme from scratch, based on P2 v1.5.8 (2016)
  • fixed a bug that would not show the correct number of posts in a category
  • added new p2-categories-functions.php file
  • updated a call to a deprecated WordPress function with wp_get_current_user()
  • fixed several PHP 7 deprecation warnings
  • updated class constructors to use __construct() methods
  • hunted down undocumented features and documented them
  • added a changelog file

P2 is no longer maintained by Automattic, except for dire security patches. I’ve noticed several deprecation notices, both for WordPesss 4.9 as well as PHP 7.2.1 and fixed those as well.

Get the latest version on GitHub

You can download the latest version of the theme over on the official GitHub Repository. Feel free to examine the code, tinker with amendmends and share with everyone who wants to use P2 with categories:

  • https://github.com/versluis/P2-Categories

Why is this version not on WordPress?

I had submitted previous versions of P2 Categories to the WordPress repos too, and you can still download version 1.5 there. However, since 2013 web standards have become more strict, and there’s no way my theme would pass modern tests the theme team are using for new submissions. Sadly I’m not a web developer and it’ll be very difficult for me to update aspects of the theme I don’t fully understand.

Having said that, if you know how to pass modern web standard tests, feel free to send me a pull request on GitHub.

How to display categories in Automattic’s P2 Theme

By default, Automattic’s phenomenal P2 theme does not support posting into categories from the front page, it only supports tags. My fork of the theme called P2 Categories does that though and lets you conveniently select a category from a drop down menu right there on the front page.

I wrote an update to it last week, and in so doing my article from 2013 came in handy that explains how to add this functionality to P2. Nothing much has changed in the source code, so it’s still relevant and accurate.

What the above article did not explain however was how to show which category a post belongs to. And because it’s still fresh in my  memory how to do this, I thought I’d better write it down for next time (and anyone who’s interested in how to do it).

Continue reading How to display categories in Automattic’s P2 Theme

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 move the sidebar to the right in TwentyFifteen

I’ve never liked themes with sidebars on the left – probably because we in the western world start reading on the left, and I’d like there to be as little clutter as possible. Or perhaps I’m used to navigation items on the right.

I was looking around for solutions to move the sidebar in Automattic’s TwentyFifteen theme to the right, and several options can be found on the internet. Here are two that worked for me:

Option 1: CSS Tweak

Thanks to the Stack Exchange community, this CSS tweak works a treat (for left-to-right languages):

Add these declarations to your own TwentyFifteen Child Theme and you’re good to go. If added via a CSS widget or to the bottom of the original theme (which is a really bad idea), additional “!important” statements may be necessary.

Kudos to toschero and Anteru for the combined solution to this puzzle. Check out the full discussion here:

  • http://wordpress.stackexchange.com/questions/173783/how-to-move-the-sidebar-in-twentyfifteen-to-the-right

Option 2: Pre-made Child Theme

Ruhul Amin from Tips and Tricks HQ has built a ready-to-use child theme and solved this puzzle in PHP. You can check it out here:

  • https://www.tipsandtricks-hq.com/wordpress-twenty-fifteen-2015-child-theme-with-right-sidebar-7732

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 block quotes in P2

I’ve just snazzed up the blockquotes styling on a couple of my P2 sites and thought I’d share the code that did it. Here’s an example of the final result in P2:

This is a block quote. You can create one by adding blockquote tags to the beginning and end of a block of text you’d like to look a little different. It doesn’t always have to be a quote, just something you’d like to give a little emphasis to.

This is a little plain in the original P2 and I thought it deserved a bit of styling. Here’s what creates the above:

The first line creates the background colour for the block. Any f/e variations work well as they give only a slight highlight. Try the following:

  • #eee for grey
  • #eef for yellow
  • #ffe for blue
  • you get the picture…

Next we add a bit of breathing space all around the block of text by adding some padding, and we’ll increase the font size to something more readable.

The border-style property adds the dotted outline to the blocks. Feel free to remove it if that’s too much emphasis, or try any of the following values as variations:

  • groove
  • double
  • ridge
  • dashed
  • dotted
  • inset
  • outset
  • solid
  • thin

And finally we’ll add some rounded corners to those blocks with the last three lines (courtesy of that marvellous http://border-radius.com generator)

Fell free to experiment with those values, and let me know if you find anything else that may look interesting. Add the above code to your child theme’s style.css file, or add it to a custom CSS field in your WordPress installation.

Note that the effect of this styling will only be visible upon a browser refresh, as this is overriding styles provided by P2. So when you write a post, you’ll see the old (plain) version being inserted. Visitors will see the new styling right away.