Posts Tagged ‘WordPress’

Who Offers the Best WordPress Hosting?

For any business or website, choosing the right host is an important decision. However, when you’re using WordPress to power your website there are some additional decisions that need to be made,…

Click through to read the rest of the story on the Vandelay Design Blog.

How To Display Icons In WordPress Menu [WordPress Plugin]

The icon is a great complement to any type of web design Singapore. Many icons are universally recognized. Take a public toilet signage at the airport. Without the need to know the local language, if it is foreign to you, you can immediately grasp which toilet is for the ladies, and which is for the gents from the icon used at the front of the door.

The same thing could also be applied for a Website; displaying an icon could help the users to navigate through your website. This helps with user experience, and will also make a website look prettier.

But displaying such an icon in a CMS like WordPress could be a challenge. If your website is built on top WordPress, here we will show you the easiest way to show an icon in WordPress menu.

Getting Started

Adding an icon in WordPress is made easy with a WordPress plugin called Menu Icons. First, install and activate this plugin.

Now we are ready to add the icons.

Adding Icon

For this example, I would like to use TwentyTwelve, a nice and clean WordPress theme. I also created a few pages that I will include in the menu.

Create a new menu through Appearance > Menus. Don’t forget to assign the menu location, unless it won’t appear anywhere in the website.

Then we will add an icon for each item. To begin, let’s expand one of the menu items. You will find a link that says Icon: Select icon. Click on the “Select icon” to start selecting. Here you will be presented with a window similar to the WordPress media library.

At the time of this writing, this plugin comes with 3 font icon libraries namely Dashicons, Genericons, and FontAwesome.

However, even though we are freely to use any icons, it is better to derive the icons from one library, since each of them has their own traits such as the size and the curve. In other words, if you use FontAwesome, use it throughout the website. Doing so would maintain the the icon consistency and make it look more unified.

When you select the icon, you will see the preview on the right panel. In the right panel make some adjustments. You can place the icon before or after the menu, control the font size, and set the vertical alignment. When the setting is done click on the Select, and proceed to add an icon for the other items in the menu.

Final Thought

Menu Icons is a very handy plugin to add icon in menu. It integrates well with the WordPress UI pattern which it very intuitive to use. In addition, the developer has planned a few new features for the next versions, including adding more icon libraries, and the ability to upload custom icon.

I hope you enjoy and find this tip useful. Go ahead and give the plugin a try.

Utilizing Version Control Management in WordPress

It used to be that I was very reluctant to use Git during my development; I though thtat I don’t need Git and can find no convincing reason to use it — that is, until the codes went haywire causing me to have to revert to the previous version. In cases like this, Git is extremely useful.

Git is a Version Control Management system that records revisions. Git can also be used as a backup plan, as you can revert files in case of a major screw up.

(Image source)

If you work on WordPress, you know that changes made within WordPress are irreversible. Once you have clicked the Save, Install, and Update buttons, it is hard to revert back to the previous state. Git would be real handy in a case like this.

Now there is a WordPress plugin called VersionPress, which combines Git with the familiar interface of WordPress. This plugin archives the changes and updates made in a WordPress website with Git, allowing you to undo a change or undo them back to the initial state. Let’s take a look how this plugin works.

Getting Started

VersionPress ships in the form of a WordPress plugin; so you can switch the functionality on and off immediately with a click. Upon activating the plugin, you will find a new menu named VersionPress. This is where VersionPress records historical activities that happened in the website.

But, before it is fully functional, we need to initiate VersionPress to create the Git repository for the website.

Press the Initialize button.

VersionPress runs silently behind the scenes recording website activities such as creating a new post or page, installing a new plugin, posting comments, and configuring the website settings in the plugin screen, as shown below.

The recorded item shows the date when the activity occurs, the Git ID number of the record, the message or description of the activity.

Undo the Changes

As mentioned, VersionPress does not only record activities. Since VersionPression utilizes Git, it is also possible for you to revert back at some previous points.

Shown in the screenshot above, we already have several recorded items. On each of the recorded activites you will see two links, Undo This and Revert to This. Now, just in case, we want to revert back to the very beginning of the website state, we simply click the Revert to This at the last recorded item. VersionPress will bring you back there.

Backup Tool

In addition, you can utilize VersionPress as a backup tool as well. What makes VersionPress backup different is that the backup file size could be much smaller compared to the traditional methods. A traditional backup tool will backup all the database in a particular timeframe – monthly, weekly, daily – and it will backup all the things even the same data that already has been backed up previously.

Git works by creating the backup only in logical change, not within a fixed timeframe. VersionPress is able to produce smaller backup sizes.


Overall, VersionPress is a really creative way of Git use. From a developer’s point of view, VersionPress could be a very handy tool for website testing. At the time of the writing, however, VersionPress is in Alpha stage – in other word, it’s not ready for public testing yet (so, stay tuned!). The plugin will be released under GPL license, which is the same license used for WordPress.

How to Use Dashicons in WordPress Theme or Plugin

Along with the revamped WP-Admin, WordPress 3.8 also brought a set of brand new icons called Dashicons. Dashicons is a font icon web design Singaporeed by Mel Choyce that was created primarily to accommodate the new WP-Admin UI, from the Content Screen Editor to the Administration Menu, as you can see in the screenshot below.

As WordPress now uses it to deliver icons in WP-Admin, you should also use it in your themes and plugins. By using a font icon set, like Dashicons, you can easily customize the output through CSS. If you are a developer who want to update your plugins or themes, according to the latest WordPress web design Singapore as well as using its new properties, this article is definitely for you.

Dashicons in Administration Menu

Assuming that you incorporate Custom Post Type into your theme or plugin, you can use Dashicons in the following way. Custom Post Type uses menu_icon to display the icon. Prior to WordPress 3.8, you can add your image icon path in it. In version 3.8, this parameter can also be used to declare the icon from Dashicons.

First, visit Dashicons website. Click one of the icons. You can see that the selected icon is reflected on the header and it displays the icon’s name with options to copy it in several formats: CSS, HTML, and Glyph.

Copy the icon’s name, and add it in the menu_icon of your Custom Post Type function, like so. Note that I’ve stripped out the code in order to keep this article shorter. The full length of code can be found here.

 $args = array( 'label' => __( 'book', 'book' ), 'description' => __( 'Post Type Description', 'book' ), 'labels' => $labels, 'supports' => array( ), 'taxonomies' => array( 'category', 'post_tag' ), 'menu_position' => 20, 'menu_icon' => 'dashicons-book', 'capability_type' => 'post', ); 

In this example, I’ve created a Custom Post Type for posting Books. And as you can see below, the book icon appears beside it.

Menu Page

Plugins may also use add_page_menu function to add an Administration Menu. For this case, you can simply specify the Dashicons icon name as the sixth parameter. In the following example, we will display the “wrench” icon in our Options page.

 function hkdc_custom_menu_page() { add_menu_page( 'Options Page', 'Options', 'manage_options', 'myplugin/option.php', '', 'dashicons-admin-tools', 81 ); } add_action( 'admin_menu', 'hkdc_custom_menu_page' ); 

Head over to WP-Admin, and you should see the icon as shown.

The Fallback

Never assume that all your users will update to the latest WordPress. In some cases, they don’t. They may have installed a plugin to turn off automatic updates. So, it is necessary to provide a fallback that support older WordPress version. If we don’t, the icon side will appear as a broken image (like what happens in this image, next to Books).

Before proceeding, ensure that you have placed the image icon in your theme or plugin directory. Then, we can specify the icon with a conditional function, as follows:

First, we set the default, which is using the Dashicons.

 $icon = 'dashicons-book-alt'; 

And we replace the $icon variable’s value if it is in WordPress 3.7 and below.

 if( version_compare( $GLOBALS['wp_version'], '3.8', '<' ) ) { $icon = get_template_directory_uri() . '/extra/img/book-brown.png'; } 

Replace the icon paramater in Custom Post Type (as well as in add_menu_page function) with the $icon variable.

 $args = array( 'label' => __( 'book', 'book' ), 'description' => __( 'Post Type Description', 'book' ), 'labels' => $labels, 'supports' => array( ), 'menu_position' => 20, 'menu_icon' => $icon, ); register_post_type( 'book', $args ); 

And we are done. It will use Dashicons for WordPress 3.8, while displaying the “image” icon in older versions.

45 Clean and Minimal WordPress Themes

Although there are thousands of different WordPress themes available, finding the right one can be a challenge. Sometimes the best choice is a theme that features a clean design without unneeded…

Click through to read the rest of the story on the Vandelay Design Blog.