Top 13 WordPress Sidebars Widgets

Widgets are one of the best reasons you should use WordPress. WordPress widgets allows you to add static and dynamic content to widget-ready areas of your theme like in this case, the sidebar. The beauty of these widgets lie in its simplicity and ease of use. To display a widget in your website, all you have to do is drag and drop the widget to its expected location. You can also customize the design and change the way it behaves. The drag and drop interface simplifies the design process by removing the need to modify the theme template.

Ad Squares Widget

Ad Squares Widget

Ad Squares Widget

This widget lets you display 125×125 ads in your sidebar. This plugin supports ads coming from AdSense, PHP, iFrames, XHTML, JavaScript, etc. All you need to do to place ads is to paste the code for each block you want to display.

The widget can display up to 8 squares at once. You can also customize the padding and choose how to shuffle the ad positions. You can even insert a tag that will enable ad rotation. Which means the ad will contain multiple ads and rotate them each time the page is loaded.

Download Ad Squares Widget.


Dynamic Widgets

Dynamic Widgets is a plugin that lets you have full control on the pages a widget will displayed. The interface is easy to use as it takes you to a separate page to control the settings for the widget. It also lets you display the widget according to the user’s role, date and according to the visitor’s browser.

Download Dynamic Widgets.


Category Posts Widget

Category Post Widget

Category Post Widget

This sidebar widget deals with the displaying of recent posts from a specific category. Aside from that, it also lets you change the order of the posts, and allows you to manage the number of posts to be displayed. Gallery Post can be installed multiple times in a page.

Download Category Posts Widget.


Sidebar Login

Sidebar Login

Sidebar Login

This widget adds a useful login form in the sidebar of your WordPress blog. You can use the widget to login to your admin account without the need to visit the URL for that or use it as a login page for your blog subscribers.

To use the plugin, simply go to Appearance>Widgets and drag the sidebar login to the sidebar of your choice.

Download Sidebar Login


 

Simple Subscribe Widget

Simple Subscribe Widget

Simple Subscribe Widget

Simple Subscribe Widget is a sidebar widget that lets you easily add a subscribe button to your page. It doesn’t only work as a widget, you can also use this as a shortcode or simply using php in your template codes.

The plugin comes with ReadyGraph, a set of features that automate the growth of your user base through maximizing conversion of site visitors to register to your email list, maximizing referrals, and maximizing return visits.

Download Simple Subscribe Widget.


Image Widget

Image Widget

Image Widget

Image Widget is a simple widget that uses your WordPress media manager to display images from this widget to your site. This widget can have a title and a description in it, and you can also link the image either to an external URL or to let the users view a larger version of the image. Image Widget supports template overrides which means you can have a different look and feel of this widget to the theme of your website.

Download Image Widget.


Floating Social Media Icon

Floating Social Media Icon

Floating Social Media Icon

Floating Social Media Icon lets you add social media links to your page with style. This widget floats on your page and follows through as the user scrolls to the page. It has more than 2 icon types that you can set to display in order or have a different theme for each icon. You can integrate this sidebar widget manually or automatically. And if you don’t like the icons to float, you are also free to disable it.

Download Floating Social Media Icon.


Widget Twitter

Widget Twitter

Widget Twitter

Widget Twitter lets you display Tweets with the follow button right on the sidebar of your WordPress blog. This plugin allows you to set your twitter account widget id and twitter username. You can also customize the widget by its width, allow to expand the widget images and custom link URL color.

Download Widget Twitter.


Add Link to Facebook

Add Link To Facebook

Add Link To Facebook

This widget lets you automatically add links to posts or pages that are being published to your Facebook wall, pages, or groups. It is a one time setup and you don’t have to do anything to it once installed; although, the way the links appear can be customized.

Download Add Link to Facebook.


YouTube Channel Gallery

This plugin shows a YouTube video and a gallery of thumbnails in your YouTube channel. It displays thumbnail videos not just on your channel, but also if your to your playlist as well. This plugin uses YouTube iFrame Player API that allows YouTube to serve an HTML5 player instead of Flash Player. This is useful especially for mobile devices that do not use Flash.

Download YouTube Channel Gallery.


Google Calendar Events

Google Calendar Events

Google Calendar Events

This widget parses Google Calendar feeds and displays the events as calendar grid or list in the widget. You can display the event within the calendar grid or have it displayed as a list. The lists and grids can be customized in the posts, pages, and within the widget. The calendar grid lets you have the option to change the month displayed.

Download Google Calendar Events.


Quick Chat

Quick Chat is a chat plugin that supports private chat rooms, avatar, user lists, word filtering, smiles, caching, and more. It is a self hosted chat solution which means all the chat logs are stored in your WordPress database and under your control. There is no monthly fees or limit to the number of users or messages as this plugin relies to your web server capabilities.

The is useful for setting up live help to your website or if you want your visitors to hang out to your page often.

Download Quick Chat.


Testimonials Widget

Testimonials Widget

Testimonials Widget

This widget lets you randomly slide or list the selected portfolios, reviews or quotes to your WordPress site. The widget can support text, images and even videos to your blog. You can use the widget via shortcode, themes, or widget with category and tag sections and having multiple display options.

The widget supports carousel, fade, and slide transitions. Responsive slide images slide show, slide videos, and more.

Download Testimonials Widget.

How to create a Custom Post Type? Full guide with steps

WordPress is a great tool for creating functional websites. Most people consider WordPress as just a blogging platform. But the truth is wordpress is an extremely powerful platform to create different types of fully functional websites. Each new release of wordpress includes many features to enhance functionality of your WordPress site. In this article we will explore one such feature called ‘custom post types’ in WordPress. WordPress added this in version 3.0 onwards

What is custom post type? Do I need it?

Basically WordPress is designed to be a blogging platform. When it comes to creating content for your WordPress site, you can write either posts or Pages. By default, WordPress comes with certain post/page writing structure. i.e. your post title in the upper field, post body content in the main post editing box below it, select a category, add tags etc. In some situations, you want to create something different than this.

Examples of Custom Post Types
For example, you have a tech blog where you write IT-related news, events, updates etc. Now you want to add a product review section to your site and you do not mix this with regular blog content. You want to create a separate section for these Reviews. I’m sure  you want to use a different structure and different set of data inside your review post. You can extend the existing WordPress infrastructure and accomplish this using ‘custom Post types’ along with ‘custom fields’.

Custom Post types allow you to create new content sections on your site. It will add a new administration menu, dedicated editing pages, custom taxonomies and many more utilities required for full fledged publishing.

Some other examples are:

  • A food blogger wants to rate recipes book post
  • A music blogger wants add a post to sell music album cds
  • A travel blogger wants to list popular  tourist destinations
  • Many popular WordPress plugins also use custom post types. Some examples are : Countries Plugin, WP e-Commerce Plugin,
examples

examples

Make A Product Review With WordPress: Custom Post Types & Custom Fields

In this article I’ll explain how to create a custom post with an example. Let us see how to create a product review custom post. We’re going to add a new section of our website “Product Reviews” that is dedicated for product reviews. You can implement this using custom post types and custom fields. Please note that you’ll need to be familiar with PHP to adjust code based on your needs.

Step 1: Create a Custom Post Type

The easiest way to create a custom post type in WordPress is by using a plugin called Custom Post Type UI .

  1. Install & Activate Custom Post Type UI plugin. (Refer the article How to install a WordPress Plugin)
  2. Upon activation, the plugin will add a new menu item in your WordPress admin menu called CPT UI
  3. Go to CPT UI » Add New to create a new custom post type.

    Add new

    Add new

  4. In this page you can see two columns. Custom Post Type UI plugin allows you to create custom post types (On your left) & custom taxonomies (On your right).

    Create custom post type

    Create custom post type

  5.  Create Custom Post Type – On your left, fill out the Post Type Name, Label fields and description. At the bottom you can see 2 links “Advanced Label Options & Advanced Options” . You can leave the default, or you can click on it to set new values.  After filling click on the ‘Create Custom Post Type’ button to add your new custom post type.Now you can see new menu item in your WordPress admin left menu bar (just like posts /pages menu). The label entry will appear in your WordPress admin left menu bar.  (See fig below). In my case I used the text “product reviews”.

    Post type label

    Post type label

  6. Custom  taxonomies – WordPress uses taxonomies to group post together. Two popular wordpress taxonomies are Categories and Tags. When you create a custom post type called product review, even though you can use categories, you may not want to mix this review with regular blog because they are used differently. So it is a good to create custom taxonomies to group custom posts.For example, create a new custom taxonomy called Review categories. Then you can add topic terms like: Computer, TV, Phone, etc. This would allow you and your users to sort reviews by each topic.Custom Post Type UI plugin allows you to create custom taxonomies. Go to CPT UI » Add New. In this page you can see fields to create custom taxonomies (On your right). Enter the fields Taxonomy Name, Label and Attach to Post Type( Note: Since I’m creating this custom taxonomy for custom post type, I selected Product reviews).
    create taxonomy

    create taxonomy

    At the bottom you can see 2 links “Advanced Label Options & Advanced Options” . You can leave the default, or you can click on it to set new values. I just want to mention one option listed there >> hierarchical == false.

    Now You can see new menu item to add Review Categories. Click on it and create new topics.

    Add Review Categories

    Add Review Categories

    create custom taxonomy

    create custom taxonomy

  7. Now your custom post type is ready. From your WordPress admin left menu bar click on your newly created custom post type( In my case I used the text “product reviews”). Here you will see a regular post writing page on WordPress. But when you create a product review, you need to add additional information associated with each product. For e.g. a database of digital cameras for instance might need:
    • Pros
    • Cons
    • Purchase Link
    • Rating

    Rather than adding this info directly to the description of the product, It is wise to create custom fields to hold this info.

Step2: Adding Custom Fields to a Custom Post Type

Since WordPress native custom fields capability is not enough for our need, we are going to use a third-party plugin (read A Guide to WordPress Custom Fields). Here I’m using Advanced Custom Fields plugin. Advanced Custom Fields is a free plugin that let you create different types of custom fields, create them as a group and then assign that group to your custom post types. Many add-ons also available for this plugin. For e.g. if you want to use star rating , use this acf add-on.

  • Download, install and activate Advanced Custom Fields. (Refer the article how to install a plugin)

    Advanced Custom Fields

    Advanced Custom Fields

  • After installing you will see custom fields menu link on left sidebar.
    custom fields

    custom fields

    Here you can create a set of fields(called field group) and then assign this to your custom post types.

    custom fields

    custom fields

    Click on “Custom Fields” and create a field group called “Product Review” . Click “Add Field” to create the fields needed. In this example I’m adding fields like “Pros”, “cons” etc.

  • In the “Location” section, you can assign this field group to your product review custom post type.

    Custom fields

    Custom fields

  • In the “Options” section, you can configure how you want your field group to be displayed. You can also decide which all other default WordPress inputs to be hidden when the field group is displayed.

    Display Options

    Display Options

Create a product review

Now that you created your cusom post and template, we will now see how you can create your custom post:

Post type label

Create new product review

From your wordpress admin left menu Click Product Reviews >> Add Product Review.

Create product review

Create product review

Write and publish a product review. But when you view the post that is just created, WordPress template hierarchy will use default single.php template file. There these custom fields values will not be displayed. So next step: we need to work on a template that includes these custom post types into our site so they display properly. To display these custom posts, you need to either edit default template file or create a custom single post template.

Step3: Create Single Post Templates for Custom Post Type

Let us see how you can create a custom single post template. To display your Custom Post Type you need to create a new file name single-YOURCUSTOMPOSTNAME.php in your theme folder. So let’s say your custom post type is called”Productreview”, then you need to create single-productreview.php to display your single custom post.

Duplicate single.php

Duplicate single.php

Make a copy of the single.php file in your theme directory. Rename it to single-productreview.php. This isn’t something you can do from the wordpress dashboard. You need to copy the file using your hosting control panel or FTP application.

  • Refer this article to see how to FTP it to your theme directory.
  • Refer this article to see how to make a copy of single.php using cpanel.

Now go back to Appearance > Editor in your WordPress dashboard, select your theme, and the single-productreview.php file name in the right sidebar. Here you can add code to display custom fields or customize look and feel.

 

Displaying Custom Fields
To display the Custom Fields, Put the following tag within The Loop. Find where your main WordPress Loop originates.

loop starts

loop starts

Call the wordpress function  get_post_meta().

custom fields

custom fields

Assign the name of the key that you want to appear. For example in my case, I want to display custom field called “pros”.

I hope, by now you understood about custom posts are and custom fields. There  are many plugins available to enhance WordPress posting abilities. I suggest doing your own research and find the best solution to your need.

 

How to Update WordPress Releases, Plugins and Themes automatically

So, what do you do if you see an update message (“ xx.x is available! Please update now”) in your WordPress Admin Screens? Never ignore that message. There are enormous variety of Scams and other malicious activities circulating around the internet. When wordpress notice a new malicious activity, they add updates to defend against them. WordPress constantly add new features, improvements and release ‘updates’ at regular intervals. Well, not just the WordPress core, but also plugins and themes providers also release ‘updates’ at regular intervals.

Check current site for updates
To check your website for WordPress Core, plugin, or theme updates, log into your wordpress admin and click Dashboard>>Updates.

Updates menu

Updates menu

You can see list of updates there.

updates available

updates available

Note: If a WordPress Plugin update is available, it also will be shown on the Plugin’s menu title, and on the Plugin List Page. If a WordPress theme update is available, it also will be shown on the theme List Page(Appearance>>Themes). You should always update WordPress Releases, Plugins and Themes to the latest version to make sure your website is also up-to-date with new features and security updates.

Version 3.7 onwards WordPress introduced automatic updates for minor releases (For example, it will automatically update itself from WordPress 3.7 to 3.7.1.). But this Auto update is not enabled for major releases like 3.7 to 3.8.

Update/upgrade your WordPress core, themes and plugins easily

Sure, updating can be a pain, but now you are able to update/upgrade your WordPress and plugins to a newer version easily and users never even realize that WordPress has updated. If your site is hosted with a managed WordPress hosting, the host usually takes care of automatic updates. For other users, you can enable automatic updates in 2 different ways.

Method1: Using Advanced Automatic Updates plugin

Method2: Edit your wp-config.php file

  • Login to the Cpanel and then click on the File Manager icon in the Files section.

    click on the File Manager icon

    click on the File Manager icon

  • You’ll see a pop-up window. Select your site and click on GO in order to proceed.

    click Go

    click Go

  • The wp-config.php is the file contained in the root of your WordPress file directory. Click on it and from the top menu choose “Edit”.

    Open file to edit

    Open file to edit

  • Add the following to enable major WordPress Releases updates
    Add the following line of code in your site’s wp-config.php file.
    automatic-update4
    Add the following to enable plugins updates
    Add the following line of code in your site’s wp-config.php file.

    Plugin update

    Plugin update

    Add the following to enable themes updates
    Add the following line of code in your site’s wp-config.php file.

    theme update

    theme update

  • Once you’ve finished editing the file click on SAVE CHANGES in the top right hand corner.

 

How to Duplicate / Copy a Post or Page in WordPress

There are times you like content elements on a blog post (perhaps a table design, some styling, or some layout which remains consistent) and you want to create another post with same configuration including all its widgets, template settings ect. Well, an easy way to do this, without having to know how to format anything, is by duplicating the post and making changes.

You can easily create a by using a plugin called  duplicate post.

 Duplicate Post plug-in

Duplicate Post plug-in

  1. Install and activate Duplicate Post plug-in (refer the article >> How to install a WordPress Plugin)
  2. Duplicate Post plug-in Settings
    The plugin comes with a number of settings. Avoid this step if you want to use default settings.Go to Settings >> Duplicate Post. There you can decide whether you’d like to do things like copy the original date, the original status (draft, published, pending), the original excerpt, the original attachments, children of the original page, and taxonomies and more.

    Duplicate Post Settings

    Duplicate Post Settings

  3. Create Duplicate
    There are two ways to duplicate a post or a page.
    Method 1:
    Go to Posts > All Posts (or Pages > All Pages). Mouse over the title of the post(page) you want to duplicate. You will see two new links there – Clone or New Draft.

    Duplicate Post

    Duplicate Post

    Clicking “Clone” will copy the post/page without opening it. Clicking “New Draft” will copy the post/page and also open it in the editor for you.
    Method 2:
    Open the post you can to duplicate in edit mode.

    Open post in edit mode

    Open post in edit mode

    On the post writing screen, you can click the link that says, “Copy to a new draft.” This will open a duplicate of the post or page in a new edit screen.

    Duplicate post

    Duplicate post

How To Insert Images into WordPress Posts and Pages

Including images in an article is the best way to illustrate your ideas. Adding Images make your content interesting and make readers more engaging. WordPress makes it really easy to add images to your posts. In this article we will discuss how to insert images into WordPress posts (or) pages.

  1. Create a New Post/(Page), or Open an existing Post/(Page)

    To create new Post, from your wordpress Dashboard go to Posts>>Add New (To create new page, go to Pages>>Add New ).

    Add New

    Add New

    Note: If you want to add image to an existing post, open your  post. Go to  Posts>>All Posts>>click on the post’s title to view the edit page.

    Edit Post

    Edit Post

  2. Click the Add Media button

    Now you are in the post-write screen. Place your cursor where you want the image to appear and click the ‘Add Media’ button.

    Add Media

    Add Media

    Now you will see insert media screen. To insert image, you have following 3 options.

    insert image

    insert image

  3. Insert Your Image

    • Upload From Computer
      First let us see how to upload images that are already saved on your computer. Click on upload files>> Click on the ‘Select Files’ button.

      Select files

      Find image file from your PC and click on Open button. Wait for WordPress to upload and crunch  the image. Click on the blue Insert into post button to add the image to your post.

      Insert

      Insert

      Note: After uploading an image from your PC, You will see a number of options(attachment details and attachment display settings) on the right hand side. You can either use the default setting displayed there >> Click on the blue Insert into post button or see how to use these settings .

    • Insert from Media Library – If you already have uploaded images and have a Media Library in your blog, select from any  images in the media library by clicking on it, click on the blue Insert into post button to add the image to your post.
      Insert from Media Library

      Insert from Media Library

      Note: After selecting an image from media library, you will see a number of options(attachment details and attachment display settings) on the right hand side. You can either use the default setting displayed there >> Click on the blue Insert into post button or see how to use these settings.

    • Insert from URL

      Insert from URL

      Insert from URL

  4. Different settings for uploaded image – after uploading an image from your PC (or selecting an image from media library), You will see attachment details and display settings on the right hand side of the media up loader interface.
    Attachment details:
    Attachment Details section displays:

    • A small thumbnail of the image
    • File details
    • A links that allow you to Edit Image
    • A links that allow you to Delete image from your site.
    • Enter the title of this media.
    • Enter a caption that will be displayed below the image.
    • Enter the Alt text for the image to describe the media.
    • A description for this particular media.
    Image details

    Image details

    Attachment Display settings

    Display settings

    Display settings

    Alignment

    The Alignment setting controls where your image will be displayed and how it interacts with content on the page.

    Align

    Align

    Link To You can create different types of image links here.

    • Media File: This is default option.This will automatically link to full-size version of the file.
    • Attachment Page: Links your inserted image to its WordPress media attachment page.
    • Custom URL: Allows you to set a custom link URL for your inserted image
    • None: This setting will remove the link completely.

    Image size – The Size settings determine the size of the image you are adding to your site.

    Image Size

    Image Size

How to edit Image Attributes in an existing WordPress Post

You can always edit different image attributes such as the alignment of an image or alt/title/caption/description text of an image that already inserted in a post. Open the post in the post-write screen(follow step 1 on this page). Make sure that visual editor tab is selected. Click on the image you want to edit. You can see two icons over the image. The left icon (pencil Image) allows you to edit the image properties and the right icon (X Image) will delete the image from your content.

edit image

edit image

Click the edit image icon to edit the image properties. A  pop-up window will appear and you can edit the various image  properties there. The Edit Original button allows you to do some simple manipulations such as Crop, Rotate, Scale, and Flip Images. The Replace button allows you to replace the image entirely.

edit attributes

edit attributes

After making changes, click the Update button to save your changes. If you do not want to make any changes, click the small ‘x’ in the top-right of the pop-up window to close the pop-up.

How to install a WordPress Plugin

WordPress is driven by loyal ambitious wordpress developers who have created plugins to extend its out-of-the-box functionality and in fact,  you can find a plugin for anything. WordPress Plugin Directory contains a great variety of free plugins that anyone can use . And many premium WordPress plugins are available to help you supercharge your site. Using a wordpress plugin is the fastest and easiest way to extend the functionality of your WordPress site.

How to install a WordPress Plugin?

For the novice user, it is very easy to install a plugin right from your site dashboard. In this tutorial, we will guide you through the steps of installing and activating a Plugin on your WordPress Powered blog.

We can install a wordpress plugin using any of following 3 methods:

  1. Install a free Plugin from WordPress Admin Panel using Search Option
    Wordpress.org has a great collection of  free plugins thanks to loyal wordpress developers community. There are tons of free WordPress plugins available in wordpress Plugin Directory. You can search for a plugin from this directory and install it from your WordPress Admin Panel .  Click here for instructions ( in same page)
  2. Install a Plugin from WordPress Admin Panel using Upload Method
    This step is ideal if you purchased a premium plugin  from a plugin provider  and downloaded the plugin as a zip file.  Click here for instructions ( in same page)
  3. Upload a Plugin using FTP Manager and install from Admin Panel
    You can also upload the unzipped plugin folder using FTP and later install it from WordPress admin panel. This is the least preferred method, but will be useful, if you don’t have a plugin zip file or if upload feature in method 2 does not work due to server getting timed out. This step involves using a FTP client to upload your files to your server.  Click here for instructions ( in same page)

 

Method 1: Install a Plugin from WordPress Admin Panel using Search Option

 

  1. Log into your WordPress administration panel.
  2. From your sidebar on left side, go to Plugins > Add New

    Install plugin

    Install plugin

  3. In this page you can see a list of featured/popular plugins available in wordpress plugin directory. Locate search box, enter the name of the plugin into the search field and perform the search

    Search

    Search

  4. Select your plugin from the search results and click on Install button.

    Install

    Install

  5. Wait for a while to download and install the plugin onto your blog.In the next step click on activate plugin.

    Activate

  6. Now you are done. Note that some plugins need some additional settings. So go back to Plugin page >> Find your plugin and check if your plug requires any additional settings. If so, click on settings link to enter your details. You can also read more details about your plugin by clicking on details link.

    install Plugin

    install Plugin


 

Method 2: Install a Plugin from WordPress Admin Panel using Upload Method

 

You can find many premium plugins to enhance your site’s features on internet. Download the plugin as a zip file. Please follow steps below if this is the case.

  1. Download Plugin and save it somewhere on your computer.
    download plugin

    download plugin

    download plugin

    Save plugin zip file

  2. Log into your WordPress administration panel. Go to Plugins > Add New. Click on Upload Plugin.

    click on upload

    click on upload

  3. Use the browse button to select the plugin zip file that was downloaded.
    Upload plugin

    Upload plugin

    Select zip file

    Select zip file

    After uploading the zip, Click install Now button.

    Install

    Install

  4. In the next step click on activate plugin.

    Activate

    Activate

  5. Now you are done. Some plugins need to fill more settings. So go back to Plugin page >> Find your plugin and click in settings link to enter your details.

    install Plugin

    install Plugin


 

Method 3: Upload a Plugin using FTP Manager and activate from Admin Panel

 

This step involves Extracting plugin files, using a FTP client and FTP user to upload your files to your server.

Extracting Plugin files

Locate your downloaded Plugin file. Mostly the Themes are zipped therefore you’ll have to extract them in a separate folder

extract file

extract file

  • Find the downloaded .zip file in the hard drive.
  • Right click on the file and select “extract all”
  • Extract files

    Extract files

    Select the location to extract the files to and Click “ok.”

Launch FTP client FTP client lets you move files to your website Host. Personally, i use “FileZilla FTP Client” and it works for me. If you do not have FileZilla, follow  FileZilla installation tutorial to install and  connect to your host.

  • Launch FileZilla and connect to your hosting(Refer this tutorial if you need any help on this). After a successful connection, you can see Local Site displays data from your local machine. and Remote Site displays data from your Host web space directory.
  • On the left, i.e. Local Site, locate the directory where you extracted your plugin files.
  • On the right, i.e. Remote Site, locate the directory where your WordPress blog is stored from the main directory. Click and open it. WordPress has its files arranged in a special directory listing as: wp-admin/., wp-content/, wp-includes/. Plugins are in wp-content/plugins directory. Browse through to plugins folder and click to open. Now you’ll have all your plugins in their folders.
  • You simply drag plugin’s folder (for e.g. nofollow-for-external-link) from the local machine and drop to plugin folder, and then wait until transfer is complete.Upload plugin folder
  • Now, i need you to login to your WordPress blog. Go to dashboard, under Plugins, you will see all your plugins in place. Find your plugin and activate it.

    activate plugin

    activate plugin

How to create a sortable table in WordPress?

Last week,  I did a wordpress article that does a Speed comparison of Best ThemeForest WordPress Themes.

Initially I collected and compiled my data in a Google drive spreadsheet. Once data was ready, I wanted to present the data in a wordpress post, in a way that reader should be able to sort the data by any column(ascending or descending). So I was in search of a good plugin that can help me do so.

There are couple of good plugins for fancy table display in wordpress posts. But I chose Easy Table Plugin, based on its features as well as user ratings and reviews in wordpress.org site.

At the end of this article, we’ll also have a quick look at Posts Table Pro. This plugin is an interesting alternative to Easy Tables because instead of entering data to your WordPress tables manually, it automatically creates tables listing content already stored on your website.

Easy Table Plugin

easy-table-screenshot

 

Idea behind this plugin is to generate table data using CSV(Comma Seperated Values) format. With simple additions, you table data is ready for display in your wordpress page or  post or even inside a widget. Good thing is this is very simple to use and you don’t need advanced skills to use it.

Let me illustrate this with a simple table example here. Now, if you mouse over any column, a sort icon appears. You can click this icon to sort that column in ascending or descending order. So simple.

Year Make Model Length
1997 Ford E350 2.34
2000 Mercury Cougar 2.38

 

So let us see how to install this plugin and then how to use it.

Install Easy Table Plugin.

  1. Log into your wordpress admin.
  2. Go to Plugins >> Add New.
  3. In the search box enter ‘Easy Table’ and search.
  4. Select ‘Easy Table’ from search results and click on the link ‘Install Now’.
  5. Go to Plugins >> Installed Plugins. Find Easy Table and activate the plugin.

How to use Easy Table. A full example :

Generate table data using CSV(Comma Separated Values) format.

Table data in CSV format means text that is separated with a comma. You can create a CSV using a text editor such as Notepad, Microsoft Excel and Google Docs. Here we are using Google docs for demo purpose.
Open Google Drive >>Click on Create >> Spreadsheet.

Create CSV

Create CSV

Enter data and and click File, Download as, and then select CSV (current sheet).

easy-table-steps1

Generate table data using CSV(Comma Separated Values)format

Open CSV in Notepad.

Open CSV

Open CSV

Step 2: Embedd CSV data between <table> and </table> tags

Create a new post and embed table data. Actually you can embed csv data in 2 ways.

Method 1: Copy and paste CSV from notepad.

embedded

Embed table data

Look at the table data here. The entire table data is embedded between<table> and </table>.  First row is reserved for table titles(Note: you can also create table with no heading using table parameter.). And you see that next 2 rows in the example are data rows. So simple.

Method 2: Upload CSV file and insert the file path

Easy table

Embed file path

Look at the table data here.  Save and upload the CSV(Comma Separated Values) . Insert the location of your file  between<table> and </table>( See fig above).

The result:

Year Make Model Length
1997 Ford E350 2.34
2000 Mercury Cougar 2.38

Other Features

You can add additional parameter to this <table> tag and use cell attribute to control other features of table.

Table with initial sort order on load

You can control sort order on load in 2 ways. Add sort=”desc” or sort=”asc” to <table> tag.
Method 1: Using table parameter Table with initial sort order using table parameter. See the table example below. First column is sorted descending on load.

Year Make Model Length
1997 Ford E350 2.34
2000 Mercury Cougar 2.38
2010 Nissan Micra 4.38

Table with initial sort order

Table with initial sort order

Method 2: Using cell attribute

Initial sort order

Initial sort order

Table with first column descending, second column ascending
For example, the following table on load sort first column descending and then sort second column ascending.

Year Make Model Length
1997 Ford E350 2.34
1998 Maruthy Zen 3.38
2000 Mercury Cougar 2.38
2000 Nissan Micra 4.38
2000 Maruthy Zen 3.38
2000 BMW Micra 4.38

Table with initial sort

Table with initial sort

Disable sort for any column

Look at the table below. Sort for third column is disabled here.

no Item Kg Price
1 Orange 2 100.00
2 Grapes 1 75.25
3 Pinapple 5 130.00
4 Mango 8 250.00

You can do this 2 ways.
Method 1: Add a table parameter  ‘sort=,,false’.

table parameter

table parameter

Method 2: Add a cell attr  ‘sort=false’.

cell attr

disable sort by adding a cell attr

Set index to table

For example see following table with auto index, start from number 2

No.head1 head2 head3
2row1col1 row1col2 row1col3
3row2col1 row2col2 row2col3
4row3col1 row3col2 row3col3
5row4col1 row4col2 row4col3

 

initial sort order

initial Index

In addition to setting auto index to a table, you can give a title to that column and you can set width of that column.

auto index

auto index

Other features

For example see following code shows how to add table parameter to create a table with specific width, style etc.

 Adding table parameter

Adding table parameter

Following code shows how to use attribute in some cells.

attribute in cells

attribute in cells


Posts Table Pro

Alternative table plugin – Create instant WordPress tables with Posts Table Pro

As you can see, Easy Tables is a neat plugin that lets you display static data in a table on your WordPress site. Before we finish, I’ll tell you about another WordPress table plugin that lets you create instant tables without having to enter data manually.
Posts Table Pro works by generating tables of information already stored on your WordPress website. It’s a great alternative to Easy Tables if you want tables that will automatically update with the latest data. Here are some examples of websites that would benefit from this type of WordPress table plugin:
  • Index of blog posts or articles – It doesn’t take long for a WordPress blog to become so big that it’s hard for visitors to find your older posts. No one wants to scroll through multiple pages of posts! Use Posts Table Pro to create a blog post index or article directory, which will automatically update when you add a new post.
  • Document library or knowledge base – If you want to create a WordPress document library then you can create a ‘Documents’ post type and use Posts Table Pro to list your documents in a table view. Your visitors can either download the document directly from the table, or click through to a single page for each document. You can categorize documents and add filters to help customers find the documents they need. 
  • List of events or e-commerce products – Amazingly, Posts Table Pro can list any WordPress post type in a table. This opens the door to many other possible use cases. For example, if you’re using a WordPress events plugin or e-commerce plugin then you can list your events or products in a table layout too. 
The dynamic table plugin is easy to set up and comes with lots of options. There’s a detailed plugin knowledge base to help you configure your WordPress tables in any way you like. 


So we have seen how to use “Easy Table” plugin to create a nice sortable table. Have you created sortable tables using other plugins? Share your experience below.

 

16+ Most Essential WordPress Security Plugins

Unless protected, most wordpress blogs are often victims of  DDoS attacks, SQL injection, spam, hackers and other security risks.

As a WordPress website or blog owner, your job is to ensure that your site won’t get hacked and prevent any security risks. Having a secure username and password is a good start; but that is not enough.  Thanks to these 16+ security plugins, your blog will be safer.

 

WordFence

WordFence is one of the most popular plugins for WordPress. WordPress scans core files, theme, and plugins against WordPress.org repository version to check for integrity. The plugin includes a firewall to block common security threats like fake Googlebots, hackers, and botnets. Premium users can block countries, and schedule scans for specific times at higher frequency.

WordFence

WordFence

Visit WordFence.

 

iThemes Security (formerly Better WP Security)

iThemes(Better WP Security) is the best option to fix the most common security risks. It offers some of the best features in securing a WordPresss site. It combines the best features and techniques into a single plugin to secure your site. Once installed, the plugin scans your site for user agents, bots, hosts, and prevents attackers by prohibiting users with too many invalid login attempts. The plugin also detects hidden 404 errors in your site that affects SEO and you can easily login to your site with sensible links.

iThemes (formerly BetterWP Security)

iThemes (formerly BetterWP Security)

Download iThemes Secuirty.

Bulletproof Security
BulletProof Security is a WordPress security plugin that has been praised for preventing code and SQL injection attacks. It also provides the mans to protect your website against XSS, RFI, CSRF, and Base64 attacks.

Another popular feature of Bulletproof security is that it enables the admin to filter who gets to see the website and who will be greeted by 503 Website Under Maintenance page through IP filtering.

Also, BulletProof Security offers a more convenient way of protecting and updating your site without using an FTP client. It can lock down critical .htaccess files, wp-config.php, etc.

Bulletproof security is completely free with an option to donate.

BulletProof Security

BulletProof Security

Exploit Scanner
Exploit Scanner searches the database of your WordPress install for signs that may indicate that your site has been fallen victim to malicious attacks. It scans through your site’s files, posts, and comments table to find changed files and database records.

Exploit Scanner

Exploit Scanner

Download Exploit Scanner.

Secure WordPress
As the name implies, Secure WordPress is a professional plugin for WordPress security. It removes your site’s update information to prevent non-admins from learning about your site. The goal of this plugin is to keep your WordPress information private because the less hackers know about your site, the fewer hacks you’ll meet.

secureWordPress

Secure WordPress

Download Secure WordPress.

All in One WP Security and Firewall
This plugin is among the top 10 WordPress security plugins. This plugin provides user account security, user login security, file system security, database security and the like.

You can also blacklist, enable firewall, prevent brute force login, etc.

All in One WP Security & Firewall

All in One WP Security & Firewall

Antivirus

Antivirus is a WordPress security plugin that is lightweight and easy to use. It protects your blog or website from exploits, malware, and spam injections. It also checks your blog daily for viruses.

AntiVirus

AntiVirus

Download AntiVirus.

Limit Login Attempts
Limit Login Attempts prevent your blog or website from brute-force attacks in a smart way. The plugin blogs an IP address from making further attempts if it reaches the specified limit.

Limit Login Attempts

Limit Login Attempts

Download Limit Login Attempts.

Verelo Blog Monitoring Plugin
Verelo is a plugin that ensures that your blog is free from malware and viruses. You’ll get instant notifications via SMS, Phone, or email when something goes wrong with your site.

Verelo Blog Monitoring Plugin

Verelo Blog Monitoring Plugin

Download Verelo Blog Monitoring Plugin.

Securi Security
Securi is an awesome plugin that checks your blog for malware, spam, blacklisting and other security issues like hidden evil codes, .htaccess hacks, and many more.

Securi

Securi

Download Securi Security.

SI Captcha AntiSpam
This plugin protects your blog from spam comments and registrations. It adds CAPTCHA anti-spam methods in the comments, registration page, lost password page, etc.

SI CAPTCHA Anti-Spam

SI CAPTCHA Anti-Spam

Download SI CAPTCHA Anti-Spam.

WordPress File Monitor Plus
Having this plugin is like having surveillance cameras in every room in your house. If anything goes down, you know exactly what happened. This plugin tracks your file system for any changes like when new items are added, removed, or changed. You’ll get notified by email if something went wrong to your site.

WordPress File Monitor Plus

WordPress File Monitor Plus

Download WordPress File Monitor Plus.

Block Bad Queries
Block Bad Queries is a plugin that protects your website against the malicious URL request. It checks all incoming traffic and quietly blocks bad requests.

Block Bad Queries

Block Bad Queries

Download Block Bad Queries.

NoSpamNX
NoSpamNX automatically adds form-fields to the comment form of your blog that is not visible to human users. If a spambot fills these invisible fields, then the comment is not saved. The owner can then decide whether to block that spambot, or mark it as spam.

NoSpamNX

NoSpamNX

Download NoSpamNX.

WP-DBManager
This plugin handles your WordPress database. It lets the owner optimize database, repair it, make a backup, restore, delete the backup, empty the tables, and run optional queries. The plugin also provides support for automatic backup and schedule and database optimization.

WP DB Manager

WP DB Manager

Download WP-DBManager.

Defensio Anti-Spam
If Akismet isn’t working for you, you can try Defensio. This Anti-Spam plugin is one of the best and advanced spam filtering plugin that takes you and your blog reader’s behavior into consideration. The plugin is equipped with many advanced features like elaborated statistics, RSS feeds of your comments, charts, OpenID support, and counter widget.

Defensio Anti-Spam

Defensio Anti-Spam

Download Defensio Anti-Spam.

The rule of security is, always have them regardless if you think you don’t need them. Better have all the necessary WordPress security features in your site before a problem occurs than trying to fix the problem as it happens.

Speed Comparison of Popular ThemeForest WP Themes

ThemeForest is the most favorite and most sought out place for premium wordpress themes.  Most of the themes are created by professional web designers and have high quality design and latest features.

Let us do a speed comparison of  best selling ThemeForest WordPress Themes. What follows is a list of most popular ThemeForest wp themes, sorted by Rank.

We have used 3 tools for this comparison:

A Comparison matrix should help you get an idea of speed performance of these  themes. You can sort the table by any column. Just click on header column to sort the table by that column.

Please note that this Data is as of August 16, 2014.  This may vary if  compared at a later date or if  the theme had a new release.

ThemeForest Rank Theme Name URL PageSpeeed – Mobile Score PageSpeed – Desktop Score GT Metrix – PageSpeed Score GT Metrix – YSlow Score GT  Metrix – Speed in secconds Pingdom Tools Grade Pingdom Speed in Seconds
1 Avada Avada Details 51 75 97 85 5.36 80 3.49
2 X theme X theme Details 65 77 73 81 4.96 96 5.17
3 EnFold Enfold Details 68 87 89 90 4.23 93 2.67
4 Bridge Bridge Details 45 62 89 70 11.69 75 3.63
5 Salient Salient Details 63 77 82 78 8.26 95 60
6 the 7 The7 Details 51 67 84 84 7.74 67 3.81
7 Brroklyn Brooklyn Details 60 71 85 69 4.96 88 2.89
8 Metronic Metronic Details 17 29 63 69 7.17 69 4.8
9 BeTheme BeTheme Details 70 82 86 80 8.02 94 4.26
10 Hemlock Hemlock Details 20 31 73 67 5.81 87 6.57
11 Angulr Angulr Details 49 62 70 83 5.15 80 1.74
12 Hazel Hazel Details 51 54 90 73 2.85 69 7.54
13 Porto Porto Details 27 33 41 68 2.13 80 2.24
14 SEO WP Seo wp Details 47 61 71 89 8.93 82 3.41
15 Story Story Details 15 21 32 77 5.52 85 1.53
16 Flat Responsive Flat Responsive Details 47 60 82 81 8.96 93 6.46
17 Newspaper Newspaper Details 68 92 70 86 4.12 96 4.4

Avada

Avada

Avada

Avada is a Responsive Multi-Purpose WordPress Theme by ThemeFusion. It is beautifully designed with built in mega menu at the top. You can select from a lot of different styles of blog including portfolio style, shop style, magazine style etc. It has 17 beautifully designed home page layout options. Avada also lets you include shortcodes on any page or post to add more features. It has a powerful admin panel that let you customize the layout, colors and style within minutes. Admin also include advanced options to enable/disable individual features. Avada includes 4 amazing sliders; Revolution Slider, Layer Slider, Fusion Slider, Elastic Slider. Each slider can be used on any page or post and offers its own set of unique options. Avada can be used for a blog, shop, product selling website and costs $58 on ThemeForest.


X theme

X Theme

X Theme

The X Theme is a powerful, responsive and stylish theme created by Theme.co. X theme provides multiple unique designs and several layout options to choose. X comes with numerous pages templates and you can easily turn off certain elements like your header or footer on particular pages or can add more functionality to your website using shortcodes. For example, some available shortcodes are: Accordion, Block Grid, Buttons, Icons, Responsive Slider, Responsive Video, Tabbed Content and more. There is a Visual Composer to build complex layouts with these Shortcodes. X theme costs $63 on ThemeForest.


EnFold

Enfold

Enfold

Enfold is another awesome super flexible and fully responsive theme in ThemeForest that is suited for business websites, shop websites, and portfolio site. It comes with 18 predefined skins and provides several options to modify layout, styling, colors and fonts directly from within powerful admin panel. It has a Drag and Drop Template Builder with a ton of unique elements such as Slider, Buttons, Gallery, team, Tabs, Toggles, Accordions, Pricing and Data Tables and many more. Enfold fully supports a shop option, and has two separate designs for this. Enfold costs $58 on ThemeForest.


Bridge

Bridge

Bridge

Bridge is another multi-purpose WordPress theme. Main features include: Fully Customizable Headers/ title/ mega menu, set header to be fixed or Sticky Header, Visual Composer for WordPress, different blog page layout, 7 different portfolio single layouts, Full-width carousel slider plugin, Layer Slider, Extremely Customizable, Interactive Elements such as – Counters, pie charts, horizontal progress bars, icon progress bars, elements with animation, graph charts and more. Bridge costs $58 on ThemeForest.


Salient

Salient

Salient

Salient is a beautiful word press theme that supports video as a background. The theme features 4 Stylish Blog Layouts, 2 Header Layouts + unlimited colors and Footer Column Options. Salient has an advanced version of visual composer. Other features include: Exclusive Nectar Slider, Graphically Intuitive Shortcode Generator, Sortable Portfolio, WooCommerce Support, SEO Optimized, Sortable Portfolio, Child Theme Ready and more.


The 7

The 7

The 7

The7 is fully responsive and mobile optimized Multi-Purpose WordPress theme. The7 allows you to customize almost every aspect of its appearance. The theme has 12 Ready-Made Skins in different color schemes, Plenty of Blog, Portfolio & Galleries layouts for different purposes. It includes many Coolest and most trendy design features such as Fancy headers, full screen slideshows, Revolution Slider, boxed and wide layouts, striped content backgrounds, parallax stripes, floating menu, and more. The7 costs $58 on ThemeForest.


Brroklyn

Brooklyn

Brooklyn

Brooklyn is a Creative One Page (single page) word press theme which is best suited to create your personal website or any other type of website such as a food blog, photographer, travel agency, web design firm, a music / video producer site etc. This theme has everything you need and come up with 8 unique pre-made demos. There are 3 different portfolio showcases with really easy management. This Creative multi-Purpose Theme will deliver a great user experience. Brroklyn costs $48 on ThemeForest.


Metronic

Metronic

Metronic

Metronic is a responsive Admin Dashboard Template. Metronic comes with different theme versions such as Metronic Admin, Metronic eCommerce Front end, Metronic Corporate Front end, Metronic One Page Parallax Front end etc. Metronic can be used for any type of web applications such as custom admin panels, admin dashboards, eCommerce back ends, CMS, CRM, SAAS and websites: business, eCommerce. corporate, portfolio, blog etc. Metronic costs $27 on ThemeForest.


BeTheme

BeTheme

BeTheme

BeTheme is a Responsive Multi-Purpose WordPress Theme with 31 Homepage Options. You can use this theme for almost any niche site including beauty, hotel, travel, school, church, wedding, business,web hosting,real estate, medial, transport, restaurant, shop and more. Using BeTheme you can create one page Website. The BeTheme comes with 4 different grid layouts, 7 different header versions, built in mega menu option, Revolution slider, Many pre-configured Pages, more than 200 shortcodes and huge number of components and much more. Using the Drag and Drop Builder, users can drag all the components of the theme and create a layout as per choice. BeTheme will let users to create unique website real quick. BeTheme costs $58 on ThemeForest.


Hemlock

Hemlock

Hemlock

Hemlock is a Responsive WordPress Blog Theme available with classic full width blog layout and with Sidebar layout. Hemlock has a clean, straightforward and striking design. Hemlock enabled with Grid Blog Layout, Full Width Featured Slider, various custom post types and widgets, Unlimited color options and more. Hemlock costs $38 on ThemeForest.


Summary:

So you saw the list. Be your own judge. Compare speeds as well as features and select the best. Note: This blog, wordpressluv.com, is using EnFold Theme and have a decent page speed score and excellent features.