Month: April 2015

How to use animated GIFs in WordPress

If you want to use animated GIFs in WordPress, you may discover the animated GIF has become a static GIF. This happens because of the WordPress resizing mechanism. For each picture you upload, WordPress creates several copies in different sizes. The sizes depend on the theme and plugin settings.

Use animated GIFs with WordPress
Choose the original file size to display the animated GIF

The problem with animated GIFs is, WordPress won’t resize the animated GIF but it will take only the first frame of the file to create the resized versions. So, if you simply add a GIF via the WordPress Media Manager, you will probably grab one of the resized pictures and not the original animation. Make sure, you select the original size. In the image, you can see the select box where you choose the different sizes. If you choose “Full Size”, WordPress will take the original GIF you have uploaded before. Since WordPress hasn’t altered this image, the animation will be still working.

 

On a more technical level: Depending on which image processing is supported by the server, WordPress will choose GD Image or Imagick. The function _wp_image_editor_choose() in wp-includes/media.php selects, which program is chosen. So, WordPress will resize the picture either with the class WP_Image_Editor_Imagick or with the class WP_Image_Editor_GD, which are both extensions of WP_Image_Editor.

WordPress 4.2.1 addresses critical XSS vulnerability

WordPress 4.2.1, which was released a few days after 4.2 on April 27th 2015 addresses a critical security issue in WordPress. This XSS vulnerability existed since quite some time, but it was discovered recently. In the Security Release by WordPress it says:

A few hours ago, the WordPress team was made aware of a cross-site scripting vulnerability, which could enable commenters to compromise a site.

An attacker was able to compromise the admin account by using a stored cross site scripting attack vector using the comment functionality. Respectively quick the problem was solved and the new version 4.2.1 released.

Photo Credit: Colin / Wikimedia Commons / CC-BY-SA-4.0

Escape shortcodes

If you write your own WordPress plugin, you usually set up a new page to document the plugin and how to work with this plugin. If you are using shortcodes, you might run into problems, since you can’t simply write your shortcode into the editor without executing it. I always used an extra script, which I was placing into the functions.php: “Stop shortcode”. This script simply delivered me a shortcode with a single purpose: Not to execute the shortcodes, which are wrapped into it. But today, while reading the regular expressions of the shortcodes (which can be found in wp-includes/shortcodes.php) I found out, you are able to escape shortcodes!

Usually, a shortcode starts with an opening bracket (this sign: [ ) and it ends with a closing bracket (this sign: ] ). But if you use instead [[ to open your shortcode, the shortcode itself won’t be rendered. So [[gallery]] will not render the gallery but output [gallery].

If you want to escape a shortcode with content, you simply write:

[[shortcode]content[/shortcode]]

Photo Credit: Execute, CC 2.0

How to create a help menu in WordPress

Create your own help tab

In this post, I want to address the question, how you can use and extend the help menu, you find in the admin dashboard of WordPress. Usually, this help menu can be found in the top right corner and it gives the user some hints and tips, how to use the current page.

Create help tab
Create help tab

So, lets start with the basics: We have to register a new menu page:

As you know, add_menu_page() returns the ID of the newly created page, which we will need, since we want to hook into the specific load event for this page. We do so by using

add_action( 'load-' . $page_with_help, 'pwh_add_help_tab' );

In this action, we will be able to register our help tab and give it some contents.

Adding the help tab

In the first step, we need to acquire the current screen. This is be done by get_current_screen(). This function returns the current WP_Screen object, which contains – beside others – the help tabs.

In a second step, we will now add our own help tabs, by using WP_Screen::add_help_tab(). A help tab contains an ID, a title and the actual content.

With these two simple steps, we can create our own help tabs, which blend perfectly into WordPress. We can also name a callback function, which does the rendering:

With such a callback function, we have more possibilities to render the output. The callback function can receive two parameters: The current WP_Screen object and the current help tab array:

Creating Sidebars

Once you have registered a help tab, you can also register a sidebar for the help. This is done quite simple by set_help_sidebar(). Once, you open the help section, you can see the sidebar on the right side of it:

It is very simple to add a little bit more help for the users of your plugins. So, just do it 🙂

Visualize your disk usage with Disk Usage Sunburst

If you have ever wondered, which of your plugins is eating all your web space, you should check it out. Disk Usage Sunburst by the German Premium WordPress Hoster Raidboxes delivers a beautiful solution to this question.
Once you have installed the plugin, you can go to Tools > Disk Usage and you will find an SVG graph, showing you, which directories and files need how much disk space. The size of the arcs display the size on the disk. The bigger an arc appears, the more disk space is used by this file or directory.

Disk Usage SVG
Disk Usage Sunburst displays how much disk space your installation needs

If you hover over the single arcs, you will be informed, which directory or file you are looking at. If you are on a directory you can click on it and the graph will be rendered only for this directory.

The plugin is displaying these information as a sunburst chart. Sunburst charts are used to display hierarchical data, depicted by concentric circles. The circle in the centre represents the root node, with the hierarchy moving outward from the center. So if you click for example on a directory, this directory will be in the center of the chart. all directories and files in this directory will be displayed on the next level. files of a subdirectory on the next level and so on.

With “Disk Usage Sunburst” gives you a quick and very nice insight in the disc usage of your WordPress installation. You can download it for free in the WordPress Repository.