Tagged: p2 Toggle Comment Threads | Keyboard Shortcuts

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

    Categories: WordPress ( 135 )

    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 ( 135 )

    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, WordPress ( 74 )

    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 ( 25 )

    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-style:dashed;
    	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 ( 135 )

    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,
      Camille

      • 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,

        JAY

        • 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,
          Camille

          • 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 '<h1>THIS IS A TEST</h1>';
        }
        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 🙂

  • Jay Versluis 9:47 am on October 8, 2013 Permalink | Reply
    Tags: p2   

    Categories: Themes ( 25 )

    How to add drop down categories to Automattic’s P2 Theme 

    You know I love P2. I always have, and I always will. It’s the perfect theme that turns my WordPress installation into a notebook site.

    Many users – me included – have often wished for the addition of categories to P2, so that when you write a post, you can add it to the category from the front page, perhaps via a convenient drop down menu.

    Here’s how to do it with P2 Version 1.5.1.

    And if you don’t want to hack the code yourself, I’ve got a full working project on GitHub that’s ready to rock.

    (More …)





     
    • Jay Versluis 5:54 pm on November 22, 2013 Permalink | Reply

      I forgot to mention:
      To make those categories show up inside posts (like tags to by default), examine the entry.php file in my project. This is where we display those categories.

  • Jay Versluis 3:09 pm on October 6, 2013 Permalink | Reply
    Tags: p2,   

    Categories: Plugins ( 19 )

    Introducing The P2 Header Ad Plugin 

    P2 Header Ad IconI always loved Automattic’s P2 theme: it’s one of the most innovative ideas for blogging I could find. I’m using it on several of my notebook websites, including this one. I’ve been tweaking P2 for quite some time, and one thing I wanted to do is display an advert inside the P2 header.

    As you may know, P2 doesn’t like child themes very much, so I wrote a future proof solution as this handy plugin.

    P2 Header Ad let’s you display an advert of your choice inside the header. And when the theme is updated, your advert stays in place. Neat, huh?

    (More …)





     
  • Jay Versluis 11:20 am on February 20, 2013 Permalink | Reply
    Tags: p2   

    Categories: Themes ( 25 )

    How to style the Add Media button in P2 

    Screen Shot 2013-02-20 at 11.08.52

    Before…

    I’ve noticed that the Add Media button in P2 version 1.4.2 is a bit too low when you write a Blog Post.

    The button usually sits neatly above the status box, however it cuts into the top of the box due to the additional text field for the blog post – like so:

    It’s not so pretty. As a quick fix we can shift it a few pixels higher, therefore it won’t interfere with the box anymore:

    /* The Add Media button is too low when a blog post is selected */
    #media-buttons {top: -2px;}

     

    Add it to the bottom of your style.css sheet and you’re golden!

    ... and after the fix

    … and after the fix





     
    • Scophi 9:37 pm on February 25, 2013 Permalink | Reply

      I found your P2 User Guide website and am glad that this theme is still active and being developed. I enjoyed reading about what you can do with lists. Very impressive.

      I wanted to let you know that I have a P2 site that I have modified heavily. I have re-organized and simplified the stylesheet, corrected some postbox problems, and made a few other tweaks. I’d be honored if you took a look.

      http://www.scophi.com

      I would not mind if you used any of my tips or tricks in either of your blogs. I don’t need credit. I just want to share what I have learned about P2.

      Thanks!

      • Scophi 9:39 pm on February 25, 2013 Permalink | Reply

        Sorry, I forgot to mention that my list of modifications is a page, not a post, called P2 Theme Modifications. Here’s the link:

        http://www.scophi.com/?page_id=206

        • Jay Versluis 11:38 am on February 26, 2013 Permalink | Reply

          Thank you Scophi, always good to meet a fellow P2 lover 😉 I’ll add your link it to the P2 User Guide!

          • Scophi 7:54 am on March 15, 2013 Permalink

            Jay-

            I have changed my website and no longer use P2. But I did update my P2 modifications page and wanted to give you the updated link so you could correct the reference links here and on P2 User Guide.

            Scophi’s P2 Theme Modifications: http://scophi.com/archives/8

            Thanks!

          • Jay Versluis 10:14 am on March 15, 2013 Permalink

            Thanks for the heads up, very kind of you. I’ve updated the P2 User Guide with your new link.

    • Jay Versluis 11:24 am on May 8, 2013 Permalink | Reply

      UPDATE:
      A new version of P2 has been released (1.4.3) which addresses several improvements under the hood. Sadly they haven’t fixed the above graphical problem, but I’ve just checked – my tweak still works with version 1.4.3.

      See the new improvements in the P2 User Guide before they disappear from the front page of p2theme.com:
      http://p2guide.wordpress.com/2013/05/08/p2-version-1-4-3-released/

  • Jay Versluis 10:24 am on April 16, 2012 Permalink | Reply
    Tags: p2   

    Categories: Themes, WordPress ( 25 )

    How to bring back Post Categories in P2 

    We’re all excited about the new features in Automattic’s P2 Theme v1.4.0 – however many of us have setup custom tweaks around Post Categories. In the latest version these have been replaced with Post Formats.

    Post Formats are great, but they are limited to values defined in the WordPress core. If you wanted to create a new post menu like “critical” or “alarm” this wouldn’t work. We could use Custom Post Types to add to those formats, however it’s way too big an operation for I wanted to achieve: which is bringing back the “posting into categories” feature we’ve come to love from the previous version.

    In this article I’ll show you how to back-port categories so posts will appear as they did in P2 v1.3.3 while retaining all functions of the latest update.

    (More …)





     
    • Ali 3:19 am on May 6, 2013 Permalink | Reply


      <a id="thoughts" class="post-format-button"class="selected" href="" title="">
      <a id="culture" class="post-format-button" class="selected" href="" title="">
      <a id="news" class="post-format-button"class="selected" href="" title="">

    • HG 7:14 pm on July 27, 2013 Permalink | Reply

      Hello, this hack works in P2 version 1.5.1 ?

    • Chris Bell 11:11 pm on September 22, 2013 Permalink | Reply

      What I’d like to be able to do is assign all of the P2 posts into an existing custom post type, e.g. Status Updates.

      I’m integrating P2 with a parent theme, so I’m hacking the theme as best I can.

      • Jay Versluis 9:50 am on September 23, 2013 Permalink | Reply

        Hi Chris,

        the answer lies in a file called post-form.php. This generates the buttons above the post box and sets the post type for each button. Look for an unordered list towards the top of the file and change them to your desired format.

        One thing about P2 child themes: they don’t seem to work properly, I’m not sure why. I’ve noticed that some modifications you make in your child theme don’t make it into the final output.

        • Chris Bell 3:59 pm on September 23, 2013 Permalink | Reply

          Hi Jay,

          My oversight: I accomplished posting to a special post_type by adding a hidden post_type input field.

          Now if only I could get the p2_load_entry to work correctly. 🙂

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel