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 10:01 pm on April 2, 2016 Permalink | Reply
    Tags:   

    Categories: WordPress ( 132 )

    P2 Header Ad – Version 1.6 released 

    P2 Header Ad IconI’ve just released a new version of my P2 Header Ad plugin! It fixes a few issues I’ve come across in debug mode:

    • styles are now loaded via wp_enqueue_scripts hook
    • fixed a debug warning that assumed a constant rather than a value
    • verified compatibility with WordPress 4.5

    There’s still a lone warning that appears in WordPress 4.5 Debug Mode. It reads something like “get_currentuserinfo is deprecated since version 4.5! Use wp_get_current_user() instead”.

    This isn’t actually triggered by my plugin, but rather by the current version of P2 (1.5.8 and earlier). I’m sure the team will fix it very soon.

    As always, you can download the plugin from





     
  • Jay Versluis 11:03 am on November 24, 2015 Permalink | Reply
    Tags:   

    Categories: Themes, WordPress ( 25 )

    How to turn plain URLs into clickable links in WordPress 

    The marvellous P2 Theme has an interesting feature: write out a plain link, and it magically becomes clickable without explicitly adding the a href tag.

    This may not be a big deal if you’re writing posts in the visual WordPress editor rather than HTML, but for those of us who like to write in HTML, it’s just one less thing to worry about.

    I was investigating this feature recently, and it turns out WordPress has a built-in function that can do this: they call it make_clickable(), and it works with URIs, FTP, Email addresses and anything starting with www. The function is really easy to use too: it only takes one parameter (a string), and returns the clickable HTML code.

    $clickableText = make_clickable($plainText);
    

    Let’s see how to use it in context, using the TwentyThirteen theme.

    (More …)





     
  • Jay Versluis 9:58 am on November 21, 2015 Permalink | Reply
    Tags: ,   

    Categories: WordPress ( 132 )

    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 Topher about how to render Jetpack Stats: http://wpgr.org/2013/03/02/rendering-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
    Tags:   

    Categories: Plugins, WordPress ( 19 )

    Zen Dash – Version 1.5 released 

    banner-1544x500

    I’ve just released an update to my Zen Dash plugin. Besides adding funky zen-bamboo artwork to the WordPress.org 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 WordPress.org 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 

    wizard

    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 automattic.com – 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.

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

    Categories: WordPress ( 132 )

    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:

    Link-Target

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

    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(http://fonts.googleapis.com/css?family=Lato);
    
    /* 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 ( 132 )

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

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

    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.

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

    Enjoy!





     
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