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 12:11 pm on June 11, 2016 Permalink | Reply  
    Categories: PHP, WordPress ( 25 )

    How to set WordPress Categories depending on the Post Title 

    I was working on a project the other day that required to determine which category a new post would go into, depending on the post title. This was important because posts were automatically acquired without the web interface, and in this workflow there was no way to pick a category other than the default.

    In our case we wanted to use a post fix in the title to determine which category was to be picked: for example, if a post title would end with “_ONE”, it should end up in Category 1, and if it ends up with “_TWO” it would end up in Category 2.

    Thankfully there’s a hook called save_post that is called every time a post is updated. At this point we can check what the post title is, determine the post fix, and set the correct category. Here’s a function that does just that:

    function set_my_categories($post_ID) {
    	
    	// grab the current title
    	$title = get_the_title($post_ID);
    	
    	// set the category depending on the last four characters of the title
    	// _ONE = Category 1
    	// _TWO = Category 2
    	$postfix = substr($title, -4);
    	if ($postfix == '_ONE') {
    		wp_set_post_categories($post_ID, array(1));
    	}
    	if ($postfix == '_TWO') {
    		wp_set_post_categories($post_ID, array(2));
    	}
    }
    add_action('save_post', 'set_my_categories');
    

    If a post fix is not present, the categories will not be changed.

    For this example I’m assuming that my categories are actually 1 and 2 on the system, something that’s not really the case. To determine the correct value set under wp_set_post_categories, I usually head over to Posts – Categories, select the category I want to use and check the URL of what WordPress gives me. Say the URL looks like this:

    http://domain.com/wp-admin/term.php?taxonomy=category&tag_ID=366&post_type=post

    then the tag_ID parameter hints that my category has an ID of 366, and that’s the value we need to use.

    And if a post needs to go into two categories, separate the category IDs with a comma like so:

    wp_set_post_categories($post_ID, array(2,3));

    Removing the post fix before the title is displayed

    Since our post fix is for internal purposes only, we may not want it to appear as part of the actual post title on the front page. But we also don’t want to remove it from every post once the category has been set and still have a reference in the admin interface. So the way to do it is to simply suppress it before out theme prints it out.

    The following code will do just that: if a post fix is present, curb the title. If not, leave the title unchanged.

    // curb title if we have a post fix
    $title = get_the_title();
    $postfix = substr($title, -4);
    if ($postfix == '_ONE' || $postfix == '_TWO') {
    	$title = substr($title, 0, -4);
    }
    // use echo $title to print the post title in your theme
    

    And there we have it. The same principle can be used if your title contains a certain keyword and you want to use it to add the post to a particular category automatically.





     
  • Jay Versluis 10:01 pm on April 2, 2016 Permalink | Reply
    Tags:   

    Categories: WordPress ( 133 )

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

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

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

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

    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:





     
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