Category: WordPress Toggle Comment Threads | Keyboard Shortcuts

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.

  • Jay Versluis 11:31 am on September 20, 2014 Permalink | Reply
    Tags:   

    Categories: WordPress ( 86 )

    P2 Header Ad – Version 1.5 released 

    Screen Shot 2014-09-20 at 11.15.53

    I’ve just updated my P2 Header Ad plugin with some new options:

    • you can now display the same ad again after the post content (before the comments)
    • you can do this on single posts, and additionally on the front page if you like

    These options are not enabled by default and work best if you have longer posts on your site – the look a bit naff if you use your P2 site mainly for short status updates.

    I’ve also spruced up the graphic assets that are used on WordPress.org while I was at it. Check out the new options in the Admin Interface (it’s still under Appearance – P2 Header Ad):

    screenshot-2

    Note on Google Adsense ads

    If you’re using both options above with Google Adsense ads, please note that those can only be shown up to 5 times on a single page. If your front page shows 5 posts or more, then the ad can no longer be displayed in the header (which is called last for performance reasons).

    If you want to use the after-content-front-page-ad feature, and you want the header to show first, you can tweak line 293 of the main plugin file (p2-header-ad.php) from this

    add_action ('get_footer', 'p2DisplayAdvert');
    

    to

    add_action ('get_header', 'p2DisplayAdvert');
    

    I may make this an option in the admin interface in a future update. Let me know if you have any questions. Enjoy the plugin, you can download it from within WordPress, on WordPress.org on GitHub:





     
  • Jay Versluis 12:30 pm on September 8, 2014 Permalink | Reply
    Tags:   

    Categories: WordPress ( 86 )

    How to add Icons and Banners for your Plugins hosted on WordPress.org 

     

    Screen Shot 2014-09-08 at 12.29.32

    WordPress 4.0 introduced a new way to browse Plugins in the admin interface: beautiful icons show up that make Plugins looks like Mini-Apps. When a user clicks on one they get a description right there and then without the need to browse to the WordPress site in a different tab. This gives easy and instant access to important info without disrupting the user experience. Simply put: it’s beautiful!

    It’s very simple to add your own icons and banners to this experience and stand out from the crowd. Let me show you how.

    Plugin Icons

    Create a square icon, much like you would for iOS and Android Apps. Avoid text and keep it simple. Icons can be either jpg or png (transparency is recognised in the latter format). You can upload two sizes with the following file names:

    • icon-128×128.jpg (or icon-128×128.png) for standard displays
    • icon-256×256.jpg (or icon-256×256.png) for retina/hi-res displays

    The second file is optional and will show up if a suer browses on an iPad or Retina Laptop. Both files need to reside in the plugin’s assets folder. This is something that is not download when a plugin is installed and only lives on the WordPress repo.

    Assets is the same folder that houses your screenshots you may have added which show up in the plugin descriptions. If yours live in the main plugin folder, perhaps now is a good time to move them into assets and keep downloads smaller.

    If you don’t already have an assets folder, create one in your root directory of your svn repo (as provided by the WordPress Plugin Master), on the same level as trunks, tags and branches:

    your-plugin-folder (root)
        trunk
            plugin-files-live-here
        tags
            1.0
            1.1
        branches
        assets
            icon-128x128.png
            icon-256x256.png
    

    Commit your files using your favourite SVN Tool and now they’ll show up in the WordPress admin interface as seen in the screenshot above. It’s that simple.

    Plugin Banners

    Banners were introduced to plugin authors sometime in July 2012. Back then they were only displayed on the WordPress.org site as part of your plugin URL, like this: http://wordpress.org/plugins/child-theme-wizard

    Screen Shot 2014-09-08 at 11.48.04

    The new feature in WordPress 4.0 is that those banners now show up when a user clicks your plugin to get more information.

    And just like with icons, those banners live in the same assets directory and follow the same pattern for standard and retina displays. Banner sizes are 772×250 and 1544×500 respectively. Again both jpg and png formats are accepted:

    your-plugin-folder (root)
        trunk
            plugin-files-live-here
        tags
            1.0
            1.1
        branches
        assets
            banner-772x250.png
            banner-1544x500.png
    

    Here’s what a banner looks like in the WordPress admin interface:

    Screen Shot 2014-09-08 at 11.50.08





     
  • Jay Versluis 8:41 am on September 1, 2014 Permalink | Reply  
    Categories: Plesk, Screencasts, WordPress ( 42 )

    How to use the WordPress Toolkit in Plesk 12 

    In this screencast I’ll show you how to use the WordPress Toolkit in Plesk 12.

    I’ll demonstrate how to update WordPress Core, Plugins and Themes selectively and across the entire server directly from within Plesk.

    Among many other features I’ll also show you how to secure WordPress instances, install and remove themes, and how to exclude WordPress instances from mass management.

     





     
  • Jay Versluis 8:45 am on July 28, 2014 Permalink | Reply
    Tags:   

    Categories: Screencasts, Themes, WordPress ( 56 )

    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:





     
  • Jay Versluis 1:05 pm on July 3, 2014 Permalink | Reply  
    Categories: WordPress ( 86 )

    How to avoid 500 Internal Server Errors when using the WordPress Importer 

    wordpress-iconI’ve used the WordPress Importer on many occasions – most of which gave me more grief than results. Usually I end up with a white screen telling me that there was an “Internal Server Error”. It basically means that something went wrong, but nobody knows what it was – and there is no way to find out.

    While entertaining ideas of finding another hobby, I searched the web one last time to sift through the hundreds of posts by other users sharing the same woes – until I came across this forum post by Anon who had the same problem:

    Anon did not give up so easily and found a solution which WORKS GREAT – even though it doesn’t make sense, or is in any way documented:

    Rather than simply importing the XML file you receive from Tools – Export, turn this file into a GZIP file, and then import it.

    I have no idea why this works, but I’ve just tried it with WordPress 3.9.1 and it works like a charm. On a Mac, simply

    • open Terminal
    • type “gzip ” (with a space)
    • then drag the file in question into the Terminal session
    • this will paste the full path of that file

    Hit return and you have a .gz file. The original file is deleted automatically.

    You can also do this from the command line like this:

    gzip yourfile.xml
    

    Anon suggests that if you’re a Windows user you can use 7zip to create a .gz file.





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

    Categories: WordPress ( 86 )

    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 8:35 am on June 16, 2014 Permalink | Reply
    Tags: Flickr, , , Vimeo,   

    Categories: Screencasts, WordPress ( 56 )

    How to embed YouTube and Vimeo videos in WordPress 

    In this screencast I’ll show you how to embed YouTube and Vimeo videos into your WordPress posts. There’s no need to copy and paste code snippets and position them anymore, thanks to a technology called oEmbed (sometimes called auto embed).

    WordPress parses the URL to your videos and adds the code needed to display those automatically – it even adjusts the width (if supported by your theme).

    oEmbed works with a variety of services, and while I’m at it I’ll show you how to embed items from YouTube, Vimeo, Flickr and Twitter. For a full list of supported services take a look at this:

     





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

    Categories: WordPress ( 86 )

    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 7:19 pm on May 4, 2014 Permalink | Reply
    Tags:   

    Categories: WordPress ( 86 )

    How to change the width of an automatic oEmbed in WordPress 

    wordpress-iconI was investigating an interring issue today: YouTube videos I was embedding on this very site did not fill the whole width of my theme. They were 500 pixels wide, and I know that P2 supports something a bit larger than that.

    It didn’t really bother me, until I thought that embeds on my other site which is also using P2 look so much better. What was going on? What was the other site doing that this one wasn’t?

    Turns out there are actually three different things to watch out for, and I’ll tell you about each one in a moment.

    I remember vividly that there was an option under Settings – Media where you could set how wide and tall your auto embeds should be – but as of WordPress 3.5 this has been removed. If your website has been around for a while (like mine has) then these residual values may still be in the database and WordPress may still use them – as was the problem in my case.

    (More …)





     
  • Jay Versluis 11:02 am on April 14, 2014 Permalink | Reply
    Tags: ,   

    Categories: WordPress ( 86 )

    How to style captions in Twentythirteen 

    I love the Twentythirteen theme – except for the captions that appear underneath images. If you’ve ever seen them they look so out of place as if someone forgot to style them altogether. Here’s what they look like by default:

    Screen Shot 2014-04-14 at 10.47.48

    Notice how the captions are actually larger than the post text. I wanted to drop this size a bit, but at the same time integrate the text better with images I post over at http://www.versluis.com, adding a bit of padding, some rounded corners and perhaps tint the background colour ever so slightly.

    Here’s what I came up with:

    Screen Shot 2014-04-14 at 10.47.08

    And here’s how I did it:

     /* make captions smaller */
     .wp-caption .wp-caption-text {
    
    	 font-size: 1.0em;
    	 background-color:#f7f7f7;
    	 padding: 10px;
    	 
    	 -webkit-border-bottom-right-radius: 10px;
    	 -webkit-border-bottom-left-radius: 10px;
    	 -moz-border-radius-bottomright: 10px;
    	 -moz-border-radius-bottomleft: 10px;
    	 border-bottom-right-radius: 10px;
    	 border-bottom-left-radius: 10px;
     }
    

    Add this to your theme’s style.css file or override your stylesheet with an appropriate option. Here’s what this code does:

    First we’ll reduce the 18 point caption size and bring it in line with the rest of the post text (1em). Then we’ll tint the background colour to a very light hint of grey. We’ll also add a bit of padding around all edges of the text, it looked a bit cramped in there before.

    The second larger block is creating rounded corners at the bottom of the caption, but not at the top so it looks like an attachment. There’s a remarkable tool that lets you visually set this and return some code at http://border-radius.com – go check it out and have a play.





     
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