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 8:45 am on July 28, 2014 Permalink | Reply
    Tags:   

    Categories: Screencasts, Themes, WordPress ( 49 )

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

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

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

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

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

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

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

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

    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: Screencasts, WordPress ( 49 )

    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.

     

     
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