Tag Archives: P2

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!

How to update legacy constructor methods in PHP 7

When I was fiddling with my P2 Categories theme last week, debug mode generated several warnings when run in PHP 7.2.1. That’s because class methods are no longer allowed to have the same name as the class itself.

This was allowed in PHP 5 and earlier, but from what I gather it’s no longer the way to do things. Back then such methods were used as constructors, or in other words, methods that would be run automatically when the class is instantiated.

Let’s take an example from the P2 theme. Here’s the beginning of the P2 class as of version 1.5.8:

This will work just fine in PHP 5, but will generate a warning in PHP 7 (even though the code will execute). To update this, all we need to do is change our function name to __construct (notice the two underscores at the beginning of the name):

Anything inside the __construct() function is executed as soon as an instance of the class is created.

When updating legacy code, there is the risk that the previous function name is called during instantiation. Consider this:

Here a class extends another class and calls a constructor method of the parent class by name. If we had just patched the parent class with _construct(), the child class would throw an “undefined function” error.

To avoid this we’ll also have to update any calls made to the original constructor method, like so:

And that’s really all there’s to it.

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 swap the post title and date in P2

wordpress-iconI’ve just posted this tweak in the WordPress P2 forum to help a user and thought I’d add it here too before I forget what I did.

To swap the post title and date in P2 we’ll first grab a reference to each element, then we move one up and the other down.

Like so:

Note that the date line does not have a selector for the author, so it’s difficult to remove it if that’s required. You can remove the entire line though (#main h4).

Add padding where appropriate.

  • http://wordpress.org/support/topic/blog-date-after-title?replies=2

How to fix JetPack 3.0 Sharing Icons in P2

JetPack 3.0 was released yesterday and it had quite a facelift: a new menu structure, dozens of graphical tweaks and a new set of Social Icons for sharing your posts. Those work well out of the box in TwentyThirteen and TwentyFourteen – but not in P2. Here’s how we can fix the problem.

First let me show you what we’re actually fixing here. In JetPack 2.9.3 and before the social sharing icons at the bottom of a post looked like this:

Screen Shot 2014-05-21 at 18.04.23

After you upgrade to JetPack 3.0, and if you’re running P2, then those icons are stacked up like this:

Screen Shot 2014-05-21 at 18.06.49

Not what we want, and not how it’s meant to be. What we really want is something like this – new icons, but in the same row as before:

Screen Shot 2014-05-21 at 18.09.06

And here’s how we can make this happen – with a hint of CSS:

I’ve only noticed this with P2 1.5.3 – but if you’re using a theme that causes the same problem, just add the above to the bottom of your theme’s style.css file, or add it to the “Edit CSS” box (under Appearance).

It’s not a perfect solution, but certainly a compromise for the interim.

Hope this helps 😉

How to use P2 (screencast)

In this video I will show you how to get the most out of the revolutionary P2 WordPress theme. It allows front-page posting and is an ideal solution for jotting down notes or communicating with others.

I will explain how to create lists with simple shortcuts, add links, how to embed YouTube videos by simply pasting the URL and some simple customisation options.

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.

P2 Header Ad – v1.3 released

I’ve just released a new version of my P2 Header Ad plugin, adding the following features:

  • added translation readiness
  • added German Translation
  • added Spanish Translation (thanks to Andrew Kurtis from WebHostingHub)
  • verified WordPress 3.8 compatibility

You can get the latest version simply by using the WordPress updates (under Dashbaord – Updates), or download it from one of the links below:

  • https://github.com/versluis/P2-Header-Ad
  • http://wordpress.org/plugins/p2-header-ad/

How to override a parent function from your Child Theme

When you’re writing a Child Theme you can easily add your own functions to a custom functions.php file. But sometimes you want to replace or remove a function that the original theme provides.

Because the Child Theme’s functions.php file is loaded BEFORE the parent’s file, you can’t just define the same function again because it would be overwritten. You also can’t rely on the original theme to provide a “pluggable” parent function, as suggested in the WordPress Codex.

What you can do however is to remove the parent’s function’s hook, and then re-hook your own function in its place. Let’s look at how to do this.

 

Removing the Parent Function

In this example the parent function has setup some styles which we don’t want, originally called via

add_action( ‘wp_enqueue_scripts’, ‘p2_iphone_style’, 1000 );

Let’s undo this:

Note that you’ll have to provide all parameters from the original hook.

 

Replace the Parent Function with your own

If you want to do something else instead, define it with another function:

First we remove the original action, then we add the same action again, plugging in our child theme’s function.

 

Further Reading

  • http://wordpress.stackexchange.com/questions/7557/how-to-override-parent-functions-in-child-themes
  • http://codex.wordpress.org/Child_Themes
  • http://codex.wordpress.org/Plugin_API/Action_Reference/after_setup_theme