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:02 am on April 14, 2014 Permalink | Reply
    Tags: ,   

    Categories: WordPress ( 77 )

    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.

     
  • Jay Versluis 4:27 pm on April 8, 2014 Permalink | Reply  
    Categories: WordPress ( 77 )

    How to remove buttons from Distraction Free Writing Mode (Full Screen Editor) in WordPress 

    wordpress-iconNow that we’ve learnt how to add buttons to the Full Screen Writing Mode in WordPress, let’s see how we can remove them too.

    Just in case Zen Mode isn’t zen enough for you.

    Imagine that you have never in your life blockquoted anything, and rather not start anytime soon, there’s how to remove the block quote button.

    function removeFullscreenButtons($buttons) {
    	
    	unset ($buttons['blockquote']);
    }
    add_action ('wp_fullscreen_buttons', 'removeFullscreenButtons');
    

    Just like before, we’re taking an array of buttons and remove the objects we don’t want. Since they were addressed with an index title (blockquote in our case), you must unset them in the same way. Once gone we return the array, and WordPress does not display said button anymore.

    To figure out what that index text is, refer to this table and try to figure it out: http://www.tinymce.com/wiki.php/TinyMCE3x:Buttons/controls

    Kudos to Renji from Sumtips for his helpful article on this topic: http://sumtips.com/2013/01/remove-or-add-buttons-in-wordpress-distraction-free-writing.html

     
  • Jay Versluis 4:03 pm on April 8, 2014 Permalink | Reply  
    Categories: WordPress ( 77 )

    How to add buttons to Distraction Free Writing Mode (Full Screen Editor) in WordPress 

    wordpress-iconI really like the Distraction Free Writing Mode that WordPress offers. I mean the one you can access when you write a new post, then hit that big X and go into full screen mode. It’s Zen at large.

    But just in case there’s a single function you’d like to see up there as a button, because you’re using it all the time, there is a way to do it.

    Bear with me. These are the buttons I mean:

    Default Buttons in Full Screen Mode

    Default Buttons in Full Screen Mode

    Just in case you didn’t know: there are A LOT OF OTHER FUNCTIONS you get in this mode, much of which are hidden by the power of keyboard shortcuts. See that little question mark up there? Press it and see what else you can access at the speed of thought:

    WordPress-DFW-Shortcuts

    Seriously, this is dynamite stuff! Chances are that if you’re looking for something, it’s already there – and at the ready with a keystroke.

    Anyway, let’s get back to that toolbar and see how we can tweak it.

    Adding Buttons in DFW Mode

    All that beautiful functionality is provided by an open source library called TinyMCE, a JavaScript WYSIWYG editor. That’s the tool that lets you see a word become bold while you’re typing it in your web browser. It’s powerful stuff, and WordPress relies on it a great deal.

    So really, all those buttons and their respective functionality is not coming from WordPress. Here’s a list of other functions that could potentially be up there as buttons:

    In this example I’m adding the three justifications to the editor: left, centre and right. Add this code to your theme’s functions.php file, or if you’re writing a plugin add it to your main plugin file:

    function yourFullscreenButtons($buttons) {
    	
    	$buttons[] = 'separator';
    	
    	$buttons['justifyleft'] = array(
    		'title' => __('Left'),
    		'onclick' => "tinyMCE.execCommand('justifyleft');",
    		'both' => false 
    	);
    	
    	$buttons['justifycenter'] = array(
    		'title' => __('Center'), 
    		'onclick' => "tinyMCE.execCommand('justifycenter');", 
    		'both' => false 
    	);
    	
    	$buttons['justifyright'] = array(
    		'title' => __('Right'), 
    		'onclick' => "tinyMCE.execCommand('justifyright');"
    		'both' => false 
    	);
    	
    	return $buttons;
    }
    add_action ('wp_fullscreen_buttons', 'yourFullscreenButtons');
    

    I know it looks a lot, but it’s relatively simple. Let’s go through this:

    1. First we’re adding a function that gets called via the wp_fullscreen_buttons action. As you may imagine, this is called when the entire toolbar is displayed in fullscreen mode.
    2. Our function takes a parameter ($buttons), which is an array of button objects that will show up there. We take it and add to the array with our own buttons.
    3. The first item we’re adding to the array is a separator, just so that our own buttons appear with a little distance. Take it out of you don’t like it.
    4. Next up are three button objects. We’ll talk about those more in a moment
    5. Finally we return the amended array and WordPress can display it.

    Each Button is made up of three ingredients: a Title (Left, Right, Center) which is displayed on hover. It also needs a TinyMCE function, which is the JavaScript onClick function that will make the selected text do what it does (i.e. justify it to the right). You’ll find the possible values in the link I mentioned earlier. And there’s a boolean TRUE/FALSE type value. This determines if the button shows up in the visual editor only, or if it also shows in the code editor.

    The result looks like this:

    NEW-BUTTONS

    Not only does it look swish, it also works out of the box! Is that cool or what?

    Thanks to the following links for helping me figure this out:

     
  • Jay Versluis 8:51 am on April 7, 2014 Permalink | Reply
    Tags:   

    Categories: Podcast, WordPress ( 32 )

    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 11:08 pm on April 5, 2014 Permalink | Reply
    Tags: ,   

    Categories: WordPress ( 77 )

    How to add your own widget to the WordPress Dashboard 

    wordpress-iconNow that we’ve removed a few widgets, perhaps it’s time we add our own simple info box to the WordPress Dashboard.

    For example, we could provide a direct link to our support services. It’s handy for clients to know help is just a click away.

    Here’s how to add a simple box like that:

    //Add a new widget to the Dashboard
    function contact_help(){
         echo 'If you have questions about working with WordPress system, contact Jay at noreply@wphosting.tv or call 305-555-1234';
    }
    function register_widgets(){
         wp_add_dashboard_widget( 'contact_help_widget', 'Need help?', 'contact_help');
    }
    add_action('wp_dashboard_setup', 'register_widgets' );

    Add this code to your theme’s functions.php file. Note that if you (or your client) activates a different theme the widget will disappear.

    Here’s what the code does: first we create a function that simply writes out the text that’s displayed inside our widget (contact_help). Next in register_widgets we register our widget in the WordPress Dashboard. This won’t do anything yet, as the register_widgets function is not called. We do that in the next step when we hook it into the wp_dashboard_setup action.

    Remember this is sample code – you probably want to prefix your own functions with something unique.

    You can find out more in the WordPress Widget API.

     
  • Jay Versluis 8:37 am on March 26, 2014 Permalink | Reply
    Tags:   

    Categories: WordPress ( 77 )

    How to remove the Jetpack admin menu from subscribers 

    JetPackThe Jetpack admin menu is visible to everybody, including subscribers. This may not be what you want. You may even want to hide it from other admins, perhaps once you’ve given a site over o a client and you don’t want him to switch off vital functionality by accident.

    Here’s how you can hide the Jetpack admin menu in your WordPress back end.

    Hide Jetpack from Non-Admins (including Subscribers)

    If you would like your admin users to see Jetpack and hide it from everyone else, add this to your theme’s function.php file:

    function pinkstone_remove_jetpack() {
    	if( class_exists( 'Jetpack' ) && !current_user_can( 'manage_options' ) ) {
    		remove_menu_page( 'jetpack' );
    	}
    }
    add_action( 'admin_init', 'pinkstone_remove_jetpack' );
    

    Here we test “is Jetpack actually running”, and if it is, “is this user an administrator”. If all signs point to yes then we’ll remove the menu page. You can replace “pinkstone” with another prefix of course.

    Feel free to change the user capabilities to something else if you’d like to make Jetpack visible to authors or editors. You can read more about those options here:
    - https://codex.wordpress.org/Roles_and_Capabilities

    You can also achieve this functionality by installing a super small plugin courtesy of Jeremy Herve, lead author of Jetpack:
    - http://wordpress.org/support/topic/how-do-i-disable-jetpack-from-subscribers

    Hide Jetpack from everybody

    Here we remove the check for capabilities altogether, hiding Jetpack from all users:

    function pinkstone_remove_jetpack() {
    	if( class_exists( 'Jetpack' ) ) {
    		remove_menu_page( 'jetpack' );
    	}
    }
    add_action( 'admin_init', 'pinkstone_remove_jetpack' );
    

    I have included this functionality in my Zen Dash plugin with the latest version 1.4, where you can now hide Jetpack from admins and other users at the flick of a switch (and bring it back just as easily):

    Have fun, and happy hacking ;-)

     
  • Jay Versluis 6:37 pm on March 16, 2014 Permalink | Reply
    Tags:   

    Categories: Plugins, Podcast, WordPress ( 17 )

    How to use ZEN DASH for WordPress 

    I’ve just released Version 1.3 of ZEN DASH and thought a quick video demonstration is in order – and here it is:

    In this podcast I will show you how to use ZEN DASH for WordPress and explain how you can easily hide menu options, dashboard widgets, admin footer links and suppress Update Notifications (for WordPress core, plugins and themes).

    This plugin comes in handy if you’d like to hide functionality before giving the site over to a client. For example, you may not want your client to have access to plugins so he can accidentally deactivate a shopping cart and break the site.

    You can download Zen Dash

    Here’s my release post for Zen Dash with more info:

     
  • Jay Versluis 8:17 pm on March 13, 2014 Permalink | Reply
    Tags: Child Theme Wizard,   

    Categories: Plugins, Podcast, WordPress ( 17 )

    Introducing Child Theme Wizard for WordPress 

    wizardI’ve just finished writing a new WordPress Plugin to help you create Child Themes with a single click, and no need for any external tools.

    The Child Theme Wizard is a super slim assistant which can be accessed under Tools – Child Theme Wizard. Pick a Parent Theme, enter additional information, click Create Child Theme and you’re all set!

    Child Theme Wizard in action

    Child Theme Wizard in action

     

    If all goes well

    If all goes well you’ll see this

     

    In case something went wrong

    In case something went wrong

    Child Theme Wizard allows you to enter the following details:

    • Theme Name
    • Description
    • Theme URL
    • Author Name
    • Author URL
    • Version

    You can pick any existing theme that is currently installed, and you won’t be able to choose other child themes as parent themes (obviously). Child Theme Wizard will even pre-populate some of the data if it’s available from your Profile Information.

    You can choose to include the GPL License to make your theme ready for Open Source Distribution. It even creates a thumbnail so you can tell your Child Theme apart from your other themes.

    Funky Thumbnail included

    Funky Thumbnail included

    What does Child Theme Wizard do?

    To create a Child Theme you have to

    • create a directory on your server
    • create a file called style.css
    • paste template code and tweak it
    • make sure you get your template path right
    • add an empty file called functions.php
    • add a screenshot.png file to make it look pretty

    This usually requires an FTP client with credentials, as well as a text editor, or another web interface – in short: it’s much more tedious and time consuming than it really needs to be. Child Theme Wizard does it all conveniently from within the WordPress Admin Interface with a single click.

    Why do I need to use Child Themes again?

    If you make any modifications to the CSS or functionality of existing themes, and you’re tweaking core files, your changes will be overwritten if your current theme is updated with a new version.

    Child Themes however isolate your changes into dedicated files. The Parent Theme can be updated safely and your tweaks remain intact.

    Watch the video

    In this video I’ll show you Child Theme Wizard in action:

    Changelog

    • v1.0 (13/03/2014) – Initial Release

    Roadmap

    I’d like to include the following features in future updates:

    Download and Contribute

    Child Theme Wizard is available from the WordPress.org repository. You can download it simply by searching for “child theme wizard” under Plugins – Add New and following the instructions. Or you can download it here:

    You can also download and contribute to the code on GitHub:

    If you have any suggestions or feature requests, please leave a comment below.

     
  • Jay Versluis 5:02 pm on March 13, 2014 Permalink | Reply
    Tags: child theme,   

    Categories: WordPress ( 77 )

    How to test if your theme is a Child Theme 

    wordpress-icon
    You may need to know which of your themes are child themes, or in fact if the current theme you’re using is a parent or a child theme.

    Here’s how you can test both options.

    The following code snippet will iterate through all themes that are currently installed and displays the title and if it is a child theme or not:

    $allThemes = wp_get_themes();
    echo '<ol>';
    foreach ($allThemes as $theme) {
    	echo '<li>';
    
    	// print the theme title
    	echo $theme->get('Name');
    
    	// determine whether it's a child theme or not
    	if ($theme->parent() == false) {
    		echo ' is not a Child Theme.</li>';
    	} else {
    		echo ' is a Child Theme</li>';
    	}
    }
    echo '</ol>';
    

    First we grab an array of installed themes using wp_get_themes(). Each item is an object of WP_Theme and has many helpful methods. Its method parent() will return false for non-child themes, or the parent theme if it is in fact a child theme.

    Next we test if the output is false, and if so print a status accordingly.

    Is the current theme a child theme?

    Here’s how we can check it:

    // is the current theme a child theme?
    $currentTheme = wp_get_theme();
    if ($currentTheme->parent() == false) {
    	echo 'The current theme is not a child theme.';
    } else {
    	echo 'The current theme is a child theme';
    }
    

    Here we employ very much the same, except for the first line in which we grab only a single object which defaults to the current theme.

    Check out all the other bits of info this class can provide.

     
  • Jay Versluis 9:05 am on March 12, 2014 Permalink | Reply  
    Categories: Plesk, Podcast, WordPress ( 31 )

    How to install WordPress in Plesk 11.5 

    Apple_Podcast_logoIn this video I will show you the two ways of installing WordPress in Plesk 11.5: the “one-click” way and the “custom installer” way.

    Both options have their advantages: the first offers extremely fast deployment, and the other offers very fine grained control, all courtesy of the WordPress APS package.

    This screencast was inspired by a the on the Parallels Forum:

     

    If you have any questions, feel free to leave a comment below, or add it to the forum post.

     
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
Google+