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 9:58 am on November 21, 2015 Permalink | Reply
    Tags: ,   

    Categories: WordPress ( 140 )

    How to display Jetpack stats per post in WordPress 

    Some websites employ this or similar technologies to show how many views a single post has had. I was wondering how they did that without starting to count stats that have already been counted for several years, either by Google or by Jetpack.

    Yesterday I came across this post by a WordPress dev named Topher about how to render Jetpack Stats:

    I decided to test this in TwentyThirteen, and it works a treat – here’s how to do it. The principle will of course work with any theme.

    (More …)

  • Jay Versluis 2:21 pm on November 19, 2015 Permalink | Reply

    Categories: Plugins, WordPress ( 19 )

    Zen Dash – Version 1.5 released 


    I’ve just released an update to my Zen Dash plugin. Besides adding funky zen-bamboo artwork to the page, I’ve made the following minor amendments:

    • the option to hide the Jetpack menu now only shows up when Jetpack is activated, otherwise it’s hidden
    • I’ve verified compatibility with the immanent release of WordPress 4.4
    • added funky zen-artwork (see above, courtesy of GraphicStock)

    I’ve you’re one of the 70+ active lucky users, you can upgrade the plugin from within WordPress as usual, or you can download a copy from GitHub or the plugin repository:

    Questions, suggestions, translations and pull requests are always welcome!

    What is Zen Dash again?

    Zen Dash is a magical plugin that lets you get rid of the myriad of options in the WordPress admin area. I’ve created it because sometimes less is indeed more, and new users can get overwhelmed by the sheer volume of menu items, dashboard widgets and upgrade notifications.

    While it is possible to let casual users have privileges less than administrators (and therefore see less items), I found this ineffective. With Zen Dash you simply flick a switch and make things disappear that you don’t want to see everyday. You can just as easily bring them back if you need them.

    You can read more about Zen Dash in my release post, which even includes a video on how to use the plugin.

  • Jay Versluis 1:15 pm on November 12, 2015 Permalink | Reply
    Tags: ,   

    Categories: Plugins, WordPress ( 19 )

    Child Theme Wizard – Version 1.1 released 


    I’ve released a new version of my popular Child Theme Wizard plugin today. Everything remains the same, except for one thing: the parent theme is no longer loaded via CSS, it’s now being loaded via PHP. Let me explain why.

    When I wrote this little tool in 2014, the best practice to create a child theme was to load the parent’s style sheet via CSS. This was done with an @import statement, like this:

    @import url("parent-theme/style.css");

    While this approach works just fine, this is no longer regarded as the best approach to the puzzle. That’s because the parent theme’s full path is hard coded into your child theme, and should the parent theme ever change it’s folder name, your child theme would stop working.

    There’s a better way to get the same thing done by loading the parent style sheet via PHP in the functions.php file. Here’s how it’s done:

    function theme_enqueue_styles() {
        $parent_style = 'parent-style';
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style )
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

    So that’s what the update does: switch from the older way of loading the parent theme to the new one. There. Keeping up with the times and all 🙂

    Download Child Theme Wizard

    You can download the plugin from the official WordPress Plugin repository, or take a look at the source code on GitHub. Enjoy!

    • John McCulloch 7:59 pm on February 2, 2016 Permalink | Reply

      Mr. Versluis,

      Thank you for creating the child theme wizard. I watched your video and read the documentation associated with it, but I still don’t understand what the Child Theme URL field is referring to. Could you please explain further? Thank you,warm regards,

      John M.

      • Jay Versluis 2:56 am on February 6, 2016 Permalink | Reply

        Hi John, the URL field is a metadata field. If you take a look at your installed themes, you’ll find that the ones made by WordPress link to – that’s the URL you put in there, one that links to your theme (say a Github page, or where or where others can download your theme). Needless to say it’s optional.

    • dutchguru 6:03 pm on March 21, 2016 Permalink | Reply

      Hello mr Jay Versluis,

      The plugin made a subdir, copied the style.css and a start for the function.php. So far so good.
      [A] I have lot of CSS made for shadow buttons and so on. But were not executed. Made the extensions by hand in the ‘normal’ style.css and it’s working. ( but I have still a few websites to go.

      [B] I made an enhancement to the footer.php, can I arrange this by coping the footer.php to the Child-directory ?

      • Jay Versluis 10:33 pm on March 21, 2016 Permalink | Reply

        Hi there! As for A, I have no idea. Anything in the child theme’s style.css should be pulled in. If it doesn’t work, I don’t know why. And B, yes indeed – you’re absolutely right: copy the footer.php (or any other amended file) into the child theme’s directory, and WordPress will load that instead of the original. As a rule of thumb, if a file is present in the child theme, it will be loaded instead of the original.

        • dutchguru 6:25 am on March 22, 2016 Permalink | Reply

          Hello, thanks for your answer.
          Regarding [B]
          if the theme author made also an enhancement in the footer.php, I’missing by copying the full file.
          What if I take this footer.php, just only my lines ….. or will it be completely overwritten ?

          • Jay Versluis 7:15 am on March 22, 2016 Permalink

            You’ll have to copy the entire file over, WordPress will replace it completely. Partial amendments only work with style.css, all other files will be overwritten completely by the child theme.

    • David Knoerr 6:44 pm on August 11, 2016 Permalink | Reply

      Your plugin worked great thank you!!! No problems.

      • Jay Versluis 11:06 pm on August 11, 2016 Permalink | Reply

        Excellent, glad to hear it. Thank you, David!

  • Jay Versluis 12:28 pm on November 10, 2015 Permalink | Reply

    Categories: WordPress ( 140 )

    How to open WordPress Custom Menu links in a new tab 

    My wife is currently attending a blogging course at The Daily Post’s Blogging University.

    One thing that was bugging her (and me) was that Custom Links in the WordPress Menu do not open in new browser tabs. The default behaviour is to open links in the same tab, which is useful for internal site navigation.

    I explained to her that in plain HTML, we would just use a target such as “_blank” in our link tag, but I didn’t see how to apply my old fashioned knowledge to something so sophisticated and elegant as the WordPress Menu Manager.

    Thanks to the wonderful Kathryn Presner, my wife just told me the solution to this puzzle: enable the link targets in your WordPress Screen Options!

    Screen Options is this little menu at the top left in the WordPress admin interface we often forget to look at. Its content changes dynamically for every part of WordPress, and it includes a wonderful help system too – in case we ever get stuck.

    So how do we do this new tab thing?

    Head over to Appearance – Menus and select Screen Options at the top right. It will open a menu similar to this:


    See the tick box that reads Link Target? Click it and close the menu again.

    Now open one of your links (or create a new one) and find another magic tick box labelled Open link in a new window/tab.

    Screen Shot 2015-11-10 at 12.04.21

    Tick it and save your menu. Head over to the front page and see your link open in a new tab from now on. #result

    Thanks to Julia and Kathryn for bringing this to my attention 😉

  • Jay Versluis 12:08 pm on November 5, 2015 Permalink | Reply
    Tags: , ,   

    Categories: WordPress ( 140 )

    How to change fonts in TwentyFifteen by Automattic 

    TwentyFifteen uses the Noto Serif font. It looks swish and comes with an Apache license, and it can be pulled from Google Fonts too. It’s a fine font indeed – but individuals that we are, it may not be for everybody.

    It’s easy to change it to something else though, and in this article I’ll show you how.

    By default, TwentyFifteen and Noto Serif looks like this:

    Screen Shot 2015-11-05 at 11.58.15

    If we want to change this to something else, we must first import said font into our style sheet, and then declare it for a couple of classes. In this example I’m going to use Lato, another fabulous font that’s featured in the TwentyFourteen theme:

    /* import the new font */
    @import url(;
    /* change the font to something else */
    body, .entry-content, .page-title {
    	font-family: Lato, Georgia, "Times New Roman", Times, serif;

    Now TwentyFifteen will look like this:

    Screen Shot 2015-11-05 at 11.59.27

    If for some reason Lato cannot be downloaded, the browser will try to display text in the next font we declared (Georgia – and if that fails, it’ll try Times New Roman… you get the picture).

  • Jay Versluis 11:52 am on November 5, 2015 Permalink | Reply
    Tags: ,   

    Categories: WordPress ( 140 )

    How to avoid hyphenations in TwentyFifteen by Automattic 

    By default, TwentyFifteen will hyphenate text on posts and pages. This works well for most, but some find this feature annoying. It’s easy to override with a small CSS tweak – let me show you how.

    Here’s what a post might look like by default:

    Screen Shot 2015-11-05 at 11.39.53

    Notice the hyphenations in lines 3 and 4. Now add the following to your stylesheet:

    /* stop hypenating words */
    .entry-content, .entry-summary, .page-content, .comment-content {
    	-webkit-hyphens: none;
    	-moz-hyphens: none;
    	-ms-hyphens: none;
    	hyphens: none;
    	word-wrap: normal;

    Now the post should look like this – no more hyphens in sight:

    Screen Shot 2015-11-05 at 11.40.14

    And in case you ever want to bring it back, delete the above, or set them to their default values:

    /* start hypenating again */
    .entry-content, .entry-summary, .page-content, .comment-content {
    	-webkit-hyphens: auto;
    	-moz-hyphens: auto;
    	-ms-hyphens: auto;
    	hyphens: auto;
    	word-wrap: break-word;

    Under the hood, CSS uses two distinct properties: hyphens and word-wrap. However, not all browsers acknowledge each property – and with the above we’ll target most common browsers in use today.

    Check out the following links for more information on the hyphens and word-wrap properties:

    • juliav305 12:10 pm on November 5, 2015 Permalink | Reply

      Excellent – exactly what I’ve been looking for. It was definitely a feature that was annoying me.

  • Jay Versluis 12:23 pm on October 4, 2015 Permalink | Reply

    Categories: Themes, WordPress ( 25 )

    How to move the sidebar to the right in TwentyFifteen 

    I’ve never liked themes with sidebars on the left – probably because we in the western world start reading on the left, and I’d like there to be as little clutter as possible. Or perhaps I’m used to navigation items on the right.

    I was looking around for solutions to move the sidebar in Automattic’s TwentyFifteen theme to the right, and several options can be found on the internet. Here are two that worked for me:

    Option 1: CSS Tweak

    Thanks to the Stack Exchange community, this CSS tweak works a treat (for left-to-right languages):

    body:before {
        right: 0;
        left: auto;
    	direction: ltr;
    .sidebar {
        float: right;
        margin-right: auto;
        margin-left: -100%;
    	direction: ltr;
    .site-content {
        float: right;
        margin-right: 29.4118%;
        margin-left: auto;
    	direction: ltr;
    .site-footer {
        float: right;
        margin: 0 35.2941% 0 0;
    	direction: ltr;

    Add these declarations to your own TwentyFifteen Child Theme and you’re good to go. If added via a CSS widget or to the bottom of the original theme (which is a really bad idea), additional “!important” statements may be necessary.

    Kudos to toschero and Anteru for the combined solution to this puzzle. Check out the full discussion here:

    Option 2: Pre-made Child Theme

    Ruhul Amin from Tips and Tricks HQ has built a ready-to-use child theme and solved this puzzle in PHP. You can check it out here:

  • Jay Versluis 1:07 pm on September 28, 2015 Permalink | Reply  
    Categories: Screencast, WordPress ( 76 )

    WordPress Screencast, Part 10: Users, Roles and Capabilities 

    In this video I’ll show you the multi-user capabilities of WordPress: how to create new users, and what capabilities the different user roles have over your WordPress site.

    This feature can come in handy if you collaborate with other users: each user can create posts, but such users can be restricted from deleting other people’s posts, or change the layout and functionality of the website.

    The full course is aimed at beginners and medium casuals alike. Whether you’ve been away from WordPress for a while, or if you’re a complete newbie, this is a very un-intimidating “getting started” guide.

    This post sponsored by: Stafford Web Design Company.


  • Jay Versluis 1:03 pm on September 21, 2015 Permalink | Reply  
    Categories: Screencast, WordPress ( 76 )

    WordPress Screencast, Part 9: URLs and Permalinks 

    In this screencast I’ll explain how you can change the URLs for your posts and pages, as they appear in your web browser. By default, WordPress uses numeric links (such as but those are not so easy on the eye.

    We can change this to something like instead, and I’ll explain how to do it, as well as the implications of changing URLs retrospectively.

    The full course is aimed at beginners and medium casuals alike. Whether you’ve been away from WordPress for a while, or if you’re a complete newbie, this is a very un-intimidating “getting started” guide.

    I’ll release one episode every week on my iTunes Podcast Feed, or you can watch the full course on one convenient YouTube Playlist.


  • Jay Versluis 3:38 pm on September 18, 2015 Permalink | Reply

    Categories: WordPress ( 140 )

    How to prevent instant logout trouble with WP eMember 

    Screen Shot 2015-09-18 at 15.29.19

    I’ve been having issues with the otherwise excellent WP eMember Plugin by Tips and Tricks HQ: while members are logged in, they are often logged out as soon as they click a link. Thankfully I’m not alone with this problem – and it’s easy to fix:

    In the admin interface, head over to WP eMember – Settings and find the option Logout the Member After XX Minutes. When this setting is left blank or set to 0, the instant logouts happen. If the value is set to 360 (that’s 6 hours), logouts no longer appear to happen during a regular session – only after 6 hours.

    Thanks to avd23 on the Tips and Tricks forum for this tip!

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