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 3:58 pm on December 5, 2014 Permalink | Reply
    Tags:   

    Categories: MySQL, WordPress ( 18 )

    How to find and replace in MySQL with phpMyAdmin 

    mysqlSometimes you need to replace a string in your database with another string, and it can be rather tedious to plough through a large table manually. Thankfully MySQL can execute raw queries such as find and replace.

    This comes in handy if you’ve moved a WordPress installation to another URL: you only need to tweak two values in the options table, but there may be countless image references and links in the posts and options table too. That’s where find and replace can come in handy.

    You can execute the following statement either on the MySQL command line, or use phpMyAdmin’s Raw SQL option:

    Screen Shot 2014-12-05 at 15.42.10

    That big text field is where we’ll use the following code. Before we do however, make a backup of your database because there is NO UNDO FUNCTION in MySQL. A cute typo can break things beyond repair!

    Here’s what the find and replace statement looks like in principle:

    update table_name set field_name = replace(
    field_name, 'original text',
    'replacement text');
    

    For WordPress specifically, if you’d like to replace text strings inside posts and pages, then wp_posts would be your table, and field_name is the column of that table. So for wp_posts this will be post_content. You can see the field labels at the top of each column when you select a table.

    To replace a URL in all posts and pages the statement would look like this:

    update wp_posts set post_content = replace(
    post_content, 'http://oldurl.com/',
    'http://newdomain.com/subfolder/');
    

    As soon as you hit GO, MySQL will go to work and show you a success or failure message. The above would replace all image references and links from your old domain to the new one, where WordPress is installed in a subfolder.

    Make a note of your table prefix and replace it accordingly. wp_ is the default, but this can easily be changed into something else for security reasons. Be cautious of trailing slashes when you’re replacing URLs.

    Also note that a small letter “l” and a capital “I” look surprisingly similar in the phpMyAdmin! If you keep getting errors like “this table does not exist”, it’s something to watch out for before questioning your sanity again ;-)

     

    Replacing URL strings in WordPress

    I use this technique when I need to replace URLs across an entire WordPress installation. Those can hide not only in posts, but also in widgets and menus. Here’s a list of places to hunt for them:

    • wp_posts table, in the posts_content field (links inside posts and pages)
    • wp_links table, in the link_url field (the old Link Manager)
    • wp_postmeta table, in the meta_value field (URLs of Custom Menu items)
    • wp_options table, in the options_value field (anything saved by themes and plugins)
    • wp_comments table, in the comment_content field (URLs inside comments)

    And while we’re talking about replacing URLs: if you need to change the root URL of a WordPress installation, this is done in wp_options too. Look for two values called siteurl and home.

     

    Further Reading





     
  • Jay Versluis 11:31 am on September 20, 2014 Permalink | Reply
    Tags:   

    Categories: WordPress ( 104 )

    P2 Header Ad – Version 1.5 released 

    Screen Shot 2014-09-20 at 11.15.53

    I’ve just updated my P2 Header Ad plugin with some new options:

    • you can now display the same ad again after the post content (before the comments)
    • you can do this on single posts, and additionally on the front page if you like

    These options are not enabled by default and work best if you have longer posts on your site – the look a bit naff if you use your P2 site mainly for short status updates.

    I’ve also spruced up the graphic assets that are used on WordPress.org while I was at it. Check out the new options in the Admin Interface (it’s still under Appearance – P2 Header Ad):

    screenshot-2

    Note on Google Adsense ads

    If you’re using both options above with Google Adsense ads, please note that those can only be shown up to 5 times on a single page. If your front page shows 5 posts or more, then the ad can no longer be displayed in the header (which is called last for performance reasons).

    If you want to use the after-content-front-page-ad feature, and you want the header to show first, you can tweak line 293 of the main plugin file (p2-header-ad.php) from this

    add_action ('get_footer', 'p2DisplayAdvert');
    

    to

    add_action ('get_header', 'p2DisplayAdvert');
    

    I may make this an option in the admin interface in a future update. Let me know if you have any questions. Enjoy the plugin, you can download it from within WordPress, on WordPress.org on GitHub:





     
  • Jay Versluis 12:30 pm on September 8, 2014 Permalink | Reply
    Tags:   

    Categories: WordPress ( 104 )

    How to add Icons and Banners for your Plugins hosted on WordPress.org 

     

    Screen Shot 2014-09-08 at 12.29.32

    WordPress 4.0 introduced a new way to browse Plugins in the admin interface: beautiful icons show up that make Plugins looks like Mini-Apps. When a user clicks on one they get a description right there and then without the need to browse to the WordPress site in a different tab. This gives easy and instant access to important info without disrupting the user experience. Simply put: it’s beautiful!

    It’s very simple to add your own icons and banners to this experience and stand out from the crowd. Let me show you how.

    Plugin Icons

    Create a square icon, much like you would for iOS and Android Apps. Avoid text and keep it simple. Icons can be either jpg or png (transparency is recognised in the latter format). You can upload two sizes with the following file names:

    • icon-128×128.jpg (or icon-128×128.png) for standard displays
    • icon-256×256.jpg (or icon-256×256.png) for retina/hi-res displays

    The second file is optional and will show up if a suer browses on an iPad or Retina Laptop. Both files need to reside in the plugin’s assets folder. This is something that is not download when a plugin is installed and only lives on the WordPress repo.

    Assets is the same folder that houses your screenshots you may have added which show up in the plugin descriptions. If yours live in the main plugin folder, perhaps now is a good time to move them into assets and keep downloads smaller.

    If you don’t already have an assets folder, create one in your root directory of your svn repo (as provided by the WordPress Plugin Master), on the same level as trunks, tags and branches:

    your-plugin-folder (root)
        trunk
            plugin-files-live-here
        tags
            1.0
            1.1
        branches
        assets
            icon-128x128.png
            icon-256x256.png
    

    Commit your files using your favourite SVN Tool and now they’ll show up in the WordPress admin interface as seen in the screenshot above. It’s that simple.

    Plugin Banners

    Banners were introduced to plugin authors sometime in July 2012. Back then they were only displayed on the WordPress.org site as part of your plugin URL, like this: http://wordpress.org/plugins/child-theme-wizard

    Screen Shot 2014-09-08 at 11.48.04

    The new feature in WordPress 4.0 is that those banners now show up when a user clicks your plugin to get more information.

    And just like with icons, those banners live in the same assets directory and follow the same pattern for standard and retina displays. Banner sizes are 772×250 and 1544×500 respectively. Again both jpg and png formats are accepted:

    your-plugin-folder (root)
        trunk
            plugin-files-live-here
        tags
            1.0
            1.1
        branches
        assets
            banner-772x250.png
            banner-1544x500.png
    

    Here’s what a banner looks like in the WordPress admin interface:

    Screen Shot 2014-09-08 at 11.50.08





     
  • Jay Versluis 8:41 am on September 1, 2014 Permalink | Reply  
    Categories: Plesk, Screencasts, WordPress ( 49 )

    How to use the WordPress Toolkit in Plesk 12 

    In this screencast I’ll show you how to use the WordPress Toolkit in Plesk 12.

    I’ll demonstrate how to update WordPress Core, Plugins and Themes selectively and across the entire server directly from within Plesk.

    Among many other features I’ll also show you how to secure WordPress instances, install and remove themes, and how to exclude WordPress instances from mass management.

     





     
  • Jay Versluis 8:45 am on July 28, 2014 Permalink | Reply
    Tags:   

    Categories: Screencasts, Themes, WordPress ( 59 )

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

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

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

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

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

    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 …)





     
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