Tips and Tricks on WordPress usage and development. I am very passionate about WordPress, but it doesn’t work just by itself – it needs a rich environment to live and breathe in.
If you’re after theme and plugin alterations, we have a category for that.
In this episode I’ll show you how to hide and remove those (almost daily occurring) WordPress Update Notifications. I’ve built this functionality into a plugin I’ve written over 5 years ago called ZEN DASH. The plugin’s main purpose is to hide all kinds of clutter from the WordPress admin interface, such as unused tabs, dashboard widgets, footer attributions – and Update Notifications.
You can install the plugin by searching under Plugins – Add New, or download it from the official WordPress repository here: https://wordpress.org/plugins/zen-dash
Sometimes we need to add additional text or elements to the_content in WordPress. This can include links, icons, shout outs, author biographies, and so forth. I wanted to add an Apple Podcasts badge underneath each post in my podcast categories, adding a link to the badge, depending on the category. I’ll elaborate how I did this in a later post.
Right now, let’s have a look at how we can add elements to the content retrieved from WordPress. This should work independently of your theme, and no theme-file-hacking is necessary to accomplish this.
All we need to do is intercept the_content as it is requested, append our elements and return an amended version of the_content. Let’s see how this works.
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!
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.
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.
In this episode I’m explaining the implications of the new default text editor in WordPress 5.0. It’s called Gutenberg, named after the man who invented the printing press (and hence revolutionised how printed books were duplicated and distributed at the time).
I’ll also show you how to test drive the Gutenberg editor in WordPress 4.9 and earlier, and how to bring back the Classic Editor if Gutenberg is not for you.
I’m not going into details on how to use the new editor, this is just an explanation what Gutenberg means, where the change will happen and how to remedy your WordPress instance if you feel lost with it (like I did when I first tested it last week).
If you’ve ever tried to upload an ebook in .MOBI or .EPUB format with the WordPress Media Uploader, you will have noticed an error message appear. Something along the lines of “Sorry, this file type is not permitted for security reasons”.
The only way then appears to be to ZIP the file and share it. That’s not a great experience for mobile users, who would simply like to click on a file and open it in an application such as iBooks or Kindle.
The solution to this puzzle lies in adding the required mime types to WordPress, so that these file types are allowed.
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:
1
2
3
4
/* larger text for post box and editing */
#postbox textarea #posttext, textarea.posttext {
font-size:1.3em!important;
}
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:
1
2
3
4
#respond textarea, .textedit textarea {
font-size:1.3em!important;
color:#555;
}
By default the font colour is black, so #555 tweaks it to be the dark grey that the rest of the P2 text has.
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:
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.
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).
