Tagged: P2 Toggle Comment Threads | Keyboard Shortcuts

  • Jay Versluis 8:51 am on May 20, 2018 Permalink | Reply
    Tags: P2   

    Categories: Themes ( 28 ), WordPress ( 145 )   

    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:

    /* 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:

    #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.

    Happy hacking!

  • Jay Versluis 9:44 am on May 19, 2018 Permalink | Reply
    Tags: P2   

    Categories: PHP ( 29 )   

    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:

    class P2 {
    	// ...
    	function P2() {
                // ...

    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):

    class P2 {
    	// ...
    	function __construct() {
                // ...

    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:

    class P2_Post_List_Creator extends P2_List_Creator {
    	var $form_action_name = 'p2-post-task-list';
    	function P2_Post_List_Creator() {
                    // ...

    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:

    class P2_Post_List_Creator extends P2_List_Creator {
    	var $form_action_name = 'p2-post-task-list';
    	function P2_Post_List_Creator() {
                    // ...

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

  • Jay Versluis 9:52 am on May 18, 2018 Permalink | Reply
    Tags: P2, Releases   

    Categories: Themes ( 28 ), WordPress ( 145 )   

    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:

    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.

  • Jay Versluis 10:04 am on May 17, 2018 Permalink | Reply
    Tags: P2   

    Categories: Themes ( 28 ), WordPress ( 145 )   

    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).

    (More …)

  • Jay Versluis 12:53 pm on June 30, 2014 Permalink | Reply
    Tags: P2   

    Categories: WordPress ( 145 )   

    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:

    /* swap post title and date */
    #main h4 {
      margin-top: 30px;
      margin-bottom: 15px;
    #main .postcontent h2 {
      margin-top: -65px;

    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.

  • Jay Versluis 6:30 pm on May 21, 2014 Permalink | Reply
    Tags: , P2   

    Categories: WordPress ( 145 )   

    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:

    /* fix JetPack 3.0 Sharing Icons */
    .sd-content ul li {
        float: left;

    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 😉

    • Jay Versluis 1:14 pm on May 22, 2014 Permalink | Reply

      The Social Icons are meant to be displayed next to the “Share This” text of course – but I didn’t manage to make this happen yet in P2. Any improvements suggestions are welcome of course.

  • Jay Versluis 8:51 am on April 7, 2014 Permalink | Reply
    Tags: P2   

    Categories: Screencast ( 87 ), WordPress ( 145 )   

    How to use P2 (screencast) 

    Apple_Podcast_logoIn 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.


  • Jay Versluis 9:11 am on February 8, 2014 Permalink | Reply
    Tags: , P2   

    Categories: Themes ( 28 )   

    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:

    blockquote {
    	background: #fef;
    	padding: 20px;
    	font-size: 1.1em;
    	border-radius: 10px;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;

    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.

  • Jay Versluis 2:25 pm on December 11, 2013 Permalink | Reply
    Tags: P2,   

    Categories: Plugins ( 19 )   

    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:

  • Jay Versluis 3:09 am on October 11, 2013 Permalink | Reply
    Tags: P2   

    Categories: WordPress ( 145 )   

    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:

    // remove parent function
    function my_theme_setup () {
    	remove_action( 'wp_enqueue_scripts', 'p2_iphone_style', 1000 );
    add_action( 'after_setup_theme', 'my_theme_setup' );

    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:

    // replace parent function
    function my_addition () {
    	// your code goes here
    function my_theme_setup () {
    	remove_action( 'wp_enqueue_scripts', 'p2_iphone_style', 1000 );
    	add_action( 'wp_enqueue_scripts', 'my_addition', 1000 );
    add_action( 'after_setup_theme', 'my_theme_setup' );

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


    Further Reading

    • surajpasa 6:37 am on November 11, 2014 Permalink | Reply

      thank a lot. It helped me a lot and saved me a lot of time.

    • itsneverdullaroundhere 11:45 am on July 21, 2015 Permalink | Reply

      Thank you so much! I have search and tried many other and similar solutions for overriding Parent Functions. This is the first one that was presented in simple understandable way, so that my virgin php mind could implement. YOU ROCK!!!!!

      • Jay Versluis 12:53 pm on July 21, 2015 Permalink | Reply

        That is such a lovely thing to say, thank you! I’m so glad it helped you out. I remember this was driving me nuts too, especially when you’re not coding PHP on a regular basis.

        All the best from Miami Beach!

    • Camille 7:31 am on August 2, 2015 Permalink | Reply

      Hi thank you very much for the tip 😉

      I created a child theme to avoid loosing all the modifications I have done on my theme (Black and White – Modern Theme). In functions.php I have to put only the functions I have modified.
      I have only 3 functions I want to add in my child theme, these are the only ones I have modified in comparison to my parent theme.

      I tried to implement the function remove_parent_functions() on my child theme, in functions.php.
      It worked for the first one, but when I did it again for the second one I get this message : ”
      “Fatal error: Cannot redeclare remove_parent_functions() (previously declared in /home/lemarketmc/www/wp-content/themes/blackandwhite-child/functions.php:24) in /home/lemarketmc/www/wp-content/themes/blackandwhite-child/functions.php on line 49”.

      Please could you help me ?
      My code is available here : http://pastebin.com/tSCbFj7P
      On lines 2 to 26 everything is alright, but when I add lines 28 to 38 then I get the fatal error message.

      By the way I have anoter element to modify in the functions.php of my child theme but I just don’t manage to integrate function remove_parent_functions(). I guess I do it the wrong way, but I don’t know where are my mistakes.
      Here is the code to modify : http://pastebin.com/Mdq0Jg7e

      If you also culd help me on this, it would be great.

      Thank you so much in advance !
      Kind regards,

      • Jay Versluis 8:32 am on August 2, 2015 Permalink | Reply

        Hello Camille,

        you’re in luck, that’s an easy fix: in PHP, function names need to be unique. You can’t declare the same function twice (in your case, remove_parent_functions). Either add all the code into a single function, or call the second function something else (for example, remove_parent_functions_2). That should do the trick.

        All the best,


        • Camille 12:17 pm on August 2, 2015 Permalink | Reply

          Thank you for your fast answer ! I did what you said and it worked, I don’t have the fatal error message anymore. But I have another problem : nothing happen to my website when I put my modified functions.php in my child theme. As if the parent theme still get over it. Do you know what could be the reason ?
          Here is my global functions.php (in my child theme), it’s really short : http://pastebin.com/3yDvA94n

          I also have another problem : I tried to apply your solution to the function I told you in my previous message I have difficulties with and it doesn’t worked.
          Here is what I have done : http://pastebin.com/bH3XGZxj
          And I get this message : “Fatal error: Cannot redeclare blackandwhite_widgets_init() (previously declared in /home/lemarketmc/www/wp-content/themes/blackandwhite-child/functions.php:19) in /home/lemarketmc/www/wp-content/themes/blackandwhite/functions.php on line 132”.
          I don’t understant why is it question of the parent theme ?

          I am sorry to bother you again but your help is really appreciated !

          KInd regards,

          • Jay Versluis 5:27 pm on August 2, 2015 Permalink

            I’m not sure what’s happening with the CSS, it looks as if you’re calling your child theme’s style sheet correctly. I would probably check the path, perhaps hard code it for testing and see if the correct file is referenced. This may also help: http://codex.wordpress.org/Function_Reference/wp_enqueue_style

            As for the second problem, you’re re-declaring a function that appears to be present in the parent theme. Although you’re removing the hook, you cannot have two functions with the same name, even if they are in different files (just like with the earlier problem). In this case it’s blackandwhite_widgets_init(), which should probably be called new_blackandwhite_widgets_init() in your child theme.

            Hope this helps!

          • Jay Versluis 10:59 am on August 3, 2015 Permalink

            Hi Camille, I had another idea about your style sheet: your child theme’s style.css is called automatically, there’s no need to import it via wp_enqueue_scripts() in your functions.php. If you want to import additional style sheets, I would probably do it via CSS using the @import statement.

          • Camille 3:18 pm on August 3, 2015 Permalink

            Hi Jay ! Thanks for your reply. Sorry I did not answer earlier but I was at work.

            In fact I just realized that my child theme is not working 🙁
            Wordpress recognized it, I have activated it but it is not working.
            All the php files I have modified and that I put in my child theme are working but my functions.php and my style.css which are actually not working ! I checked my wordpress backoffice and I just get blank page for functions.php and style.css.
            I guess that is why nothing is changing when I modify them.

            This is really weird cause my files functions.php and style.css in my ftp are written.
            I tried to cpoy paste them into my worpress backoffice but nothing happened.

            Do you know why ?
            you already have my fuctions.php (in my chil theme) : http://pastebin.com/3yDvA94n
            and here is the beginning of my css child theme : http://pastebin.com/Kgjk0sjj

            This is really weird cause my files functions.php and style.css in my ftp are written.
            I tried to copy paste them into my worpress backoffice but nothing happened.

            It seems to me that I did the right way but I don’t understand why wordpress recognize my child theme but don’t upload functions.php and syle.css.

            I read that the @import method was not recommanded, but that the wp_enqueue was the good method, that is why I tried the wp_enqueue method.

            I am deseperated ;(

    • camille 3:52 am on August 4, 2015 Permalink | Reply

      PS : sorry I checked again and the style.css is ok in my backoffice. I just have the problem with functions.php.

      • Jay Versluis 5:56 pm on August 8, 2015 Permalink | Reply

        Hi Camille, it looks like your functions.php file is working just fine, because you’re pulling in the style sheet via wp_enqueue_scripts() – which is part of functions.php. Otherwise style.css wouldn’t be loaded. I’m guessing it’s the way you call hooks and actions. However I can’t help you with fixing those details – sorry! To troubleshoot, try something simple first before getting too advanced with your coding. Here’s an example:

        // adding one simple function on a hook
        function somethingSimple () {
          echo '

        THIS IS A TEST

        '; } add_action ('get_footer', 'somethingSimple');

        If you see the test message above the footer, you know your child theme is working in principle. See if your other functions work in principle with such a test first, then add the functionality you need.

        Good luck!

        • camille 10:02 am on August 10, 2015 Permalink | Reply

          Hi Jay !
          Thank you very much for your reply. You are right, the way I call hooks and actions is wrong. When you are not an expert in code that is quite difficult to deal with, and just to know where the error come from is a big step forward !
          I am gonna work on it and when it will finally work I will show you the results !
          Thanks again for your help ! and for your patience 🙂

Compose new post
Next post/Next comment
Previous post/Previous comment
Show/Hide comments
Go to top
Go to login
Show/Hide help
shift + esc