Our Top 10 Used Plugins For WordPress – 2021 Edition

Every WordPress developer has a bunch of plugins they tend to install on pretty much every WordPress site they develop, and we are also that kind of people. These plugins give great solutions for caching, security and adding other improvements that build on WordPress core.

That’s the beauty of WordPress – there are loads of plugins to choose from and they are so quick and easy to implement. Some plugins are just a case of downloading and activating, others provide a shortcode which you can copy and paste within your pages and others is a simple as dragging and dropping a widget where ever you wish to display it.

With so many free and premium plugins available, how do you distinguish from the good and bad plugins out there?

Do note, overloading your web site with too many plugins can cause plugin conflict and reduce the speed of your web site, so if you can avoid a plugin and just code it in, that’s even better!

Below you will find our selection of essential plugins, all chosen based on their usefulness, quality and popularity.


1.) WooCommerce

WooCommerce is a great plugin and is really quick and easy to install. It turns your standard WordPress website into an eCommerce store and creates all the necessary pages for you (My Account, Checkout, Cart etc). It allows integration with secure payment methods such as Bank Transfer, PayPal, SagePay and many more. With a huge range of features that can be quickly changed in the Control Panel, this is definitely one of my favourites because of the speed you can set up a fantastic eCommerce website.


2.) Advanced Custom Fields

Advanced Custom Fields is an amazing plugin and without a shadow of a doubt, it’s installed on every project I build. I would definitely recommend getting a licence for the Pro version which you can find out more information about here. You can use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data. It makes it super easy for clients to change text / images any many other things within your WordPress site without any risk of breaking the site.


3.) Contact Form 7

Contact Form 7 is another plugin I use on pretty much every WordPress site I develop. You can manage multiple contact forms, customise the form and the mail contents and again, it’s really easy to use. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and many more. All the form elements are generated for you so you don’t even have to know any PHP code. If your not already using this plugin for your forms, I suggest giving it a try now!


4.) Yoast SEO

SEO Yoast is a fantastic platform for SEO. I have used this plugin on 100% of the WordPress sites I have developed and it is the only plugin I use in terms of SEO. If set up correctly, it will improve your site’s SEO on all needed aspects. WordPress SEO forces you to choose a focus keyword when you’re writing your articles, and then makes sure you use that focus keyword everywhere, it also ranks the SEO of all your pages and posts from ‘Bad’, ‘OK’ to ‘Good’ so you know if your content is going to have any chance of ranking on search engines. The best feature about this plugin is that it even tells you how you can improve the performance of each and every page on your site. It may say things such as, you need to include

tags or include an outbound link on your page/post. You will learn a lot about SEO if you run this plugin on your websites. We actually use the SEO Yoast Premium version which allows up to 5 keywords on each page/post/CPT including many other great features which you can read about or purchase here.


5.) Hummingbird Page Speed Optimization

The next 3 set of plugins I’m going to be talking about are plugins offered by WPMU DEV which you can read about more here. There are free versions of these plugins but they also have premium versions which offer a lot more features which I would highly recommend. Hummingbird PRO is an awesome caching plugin. It zips through your site and finds new ways to boost page speed with fine-tuned controls over file compression, minification and full-page, browser and Gravatar caching. Load your pages quicker and score higher on Google PageSpeed Insights with Hummingbird site optimization.


6.) Smush Image Compression and Optimization

This plugin is one of my favourites; it will resize, optimise and compress all of your images with the incredibly powerful and 100% free WordPress image smusher. This uses Lossly compression which will significantly reduce the file sizes of all images on your web site which will definitely increase your sites speed. Again, the premium version of this plugin is 100% recommended as it will allow you to SUPER-Smush all your images along with a few other great features which will allow you to further optimise your site. Need a high Google Speed Test score? This plugin combined with Hummingbird will make the job a piece of cake 😉


7.) Defender Security, Monitoring, and Hack Protection

Security is definitely important when it comes to WordPress, the number of sites I’ve had to restore/repair and remove Malware from is crazy. So make sure you have fully configured a great security plugin to prevent your web site from these kinds of attacks. Defender is layered security for WordPress made easy. And by easy, I mean amazingly easy! No longer do you have to go through hideously complex settings and get a virtual PhD in security. Defender adds all the hardening and security tweaks you need, in just minutes!


8.) Akismet Anti-Spam

Sick and tired of spam comments and junk email from your WordPress site? Akismet has you covered! Akismet checks your comments and contact form submissions against their global database of spam to prevent your site from publishing malicious content. You can review the comment spam it catches on your blog’s “Comments” admin screen.


9.) MailChimp for WordPress

MailChimp for WordPress allows your visitors to subscribe to your newsletter very easily. This plugin helps you grow your MailChimp lists and write better newsletters through various methods. You can create good looking opt-in forms or integrate with any existing form on your sites, like your comment, contact or checkout form.


10.) Classic Editor

Finally, our last plugin which we have made a lot of use from since WordPress 5 is Classic Editor! Classic Editor is an official plugin maintained by the WordPress team that restores the previous (“classic”) WordPress editor and the “Edit Post” screen. It makes it possible to use plugins that extend that screen, add old-style meta boxes, or otherwise depend on the previous editor. By default, this plugin hides all functionality available in the new Block Editor (“Gutenberg”). Since a lot of people are finding it difficult to get their heads around Gutenberg, this is a great quick fix plugin which will restore the editor back to the way you’ve known and loved for a long time.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

ACF Repeater Load More using AJAX

Have you ever wanted to show a limited amount of items when using an ACF repeater? Maybe you are using this to display images and to save on load time you only want to show a selective amount instead of loading them all. At the end of the day, having to load fewer images is going to speed up your site right?

In this example, we will show you the basics of adding load more functionality for an ACF repeater field. We are going to display a repeater called gallery and load only 9 items if there are more than 9 items we will display a ‘Load more’ button to programmatically load the rest.

So first of all our markup will look as follows:-


<div id="photo-gallery">
	<div class="row">
		<?php
		if( have_rows('media') ): 
			$total = count(get_field('media'));
			$count = 0;
			$number = 8;					
			while ( have_rows('media') ) : the_row(); ?>						
					<div class="col-md-4 col-sm-6">
						<a class="mag-pop" data-img="<?php the_sub_field('image'); ?>" href="<?php the_sub_field('image'); ?>"><img class="img-gallery" alt="BeWILDerwood Gallery" src="<?php the_sub_field('image'); ?>" /></a>
					</div>
				<?php
				if ($count == $number) {
					// we've shown the number, break out of loop
					break;
				} ?>					
			<?php $count++; endwhile;
		else : endif;
		?>
	</div>
	<a id="gallery-load-more" href="javascript: my_repeater_show_more();" <?php if ($total < $count) { ?> style="display: none;"<?php } ?>><h2 id="title-bg"><span>Load more</span></h2></a>
</div>

As you can see, $number defined the number of repeater items we want to initially display. We use the break; clause to prevent further images from loading.

Now moving on to the JavaScript:-


<script type="text/javascript">
	var my_repeater_field_post_id = <?php echo $post->ID; ?>;
	var my_repeater_field_offset = <?php echo $number + 1; ?>;
	var my_repeater_field_nonce = '<?php echo wp_create_nonce('my_repeater_field_nonce'); ?>';
	var my_repeater_ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';
	var my_repeater_more = true;
	
	function my_repeater_show_more() {
		
		// make ajax request
		jQuery.post(
			my_repeater_ajax_url, {
				// this is the AJAX action we set up in PHP
				'action': 'my_repeater_show_more',
				'post_id': my_repeater_field_post_id,
				'offset': my_repeater_field_offset,
				'nonce': my_repeater_field_nonce
			},
			function (json) {
				// add content to container
				// this ID must match the containter 
				// you want to append content to
				jQuery('#photo-gallery .row').append(json['content']);
				// update offset
				my_repeater_field_offset = json['offset'];
				// see if there is more, if not then hide the more link
				if (!json['more']) {
					// this ID must match the id of the show more link
					jQuery('#gallery-load-more').css('display', 'none');
				}
			},
			'json'
		);
	}
	
</script>

We’ve added comments within the code so you can see what is happening through the process. Now we need to add the code to the functions.php file to load the additional items.


/**
 * ACF Load More Repeater
*/

// add action for logged in users
add_action('wp_ajax_my_repeater_show_more', 'my_repeater_show_more');
// add action for non logged in users
add_action('wp_ajax_nopriv_my_repeater_show_more', 'my_repeater_show_more');

function my_repeater_show_more() {
	// validate the nonce
	if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'my_repeater_field_nonce')) {
		exit;
	}
	// make sure we have the other values
	if (!isset($_POST['post_id']) || !isset($_POST['offset'])) {
		return;
	}
	$show = 9; // how many more to show
	$start = $_POST['offset'];
	$end = $start+$show;
	$post_id = $_POST['post_id'];
	// use an object buffer to capture the html output
	// alternately you could create a varaible like $html
	// and add the content to this string, but I find
	// object buffers make the code easier to work with
	ob_start();
	if (have_rows('media', $post_id)) {
		$total = count(get_field('media', $post_id));
		$count = 0;
		while (have_rows('media', $post_id)) {
			the_row();
			if ($count < $start) {
				// we have not gotten to where
				// we need to start showing
				// increment count and continue
				$count++;
				continue;
			}
			?>
			<div class="col-md-4 col-sm-6">
				<a class="mag-pop" data-img="<?php the_sub_field('image'); ?>" href="<?php the_sub_field('image'); ?>"><img class="img-gallery" alt="BeWILDerwood Gallery" src="<?php the_sub_field('image'); ?>" /></a>
			</div>
			<?php 
			$count++;
			if ($count == $end) {
				// we have shown the number, break out of loop
				break;
			}
		} // end while have rows
	} // end if have rows
	$content = ob_get_clean();
	// check to see if we have shown the last item
	$more = false;
	if ($total > $count) {
		$more = true;
	}
	// output our 3 values as a json encoded array
	echo json_encode(array('content' => $content, 'more' => $more, 'offset' => $end));
	exit;
} // end function my_repeater_show_more

As you can see above, we are going to load an additional 9 images (or repeater values) on click of the load more button. Once all loaded items have appeared, we are hiding the load more button so that is no longer visible.

And that’s pretty much it! If this has helped you, feel free to drop a comment. If you need any help with this, feel free to get in touch and we’ll be happy to assist you! 🙂

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to add Pagination on an Advanced Custom Fields Repeater

Edit: It seems the code stopped working either from the latest version of PHP or one of the most recent WordPress versions. We have updated the below code which works with the latest versions of both PHP (7.4) and WordPress (5.5)


Okay, so it goes without saying that the Advanced Custom Fields plugin is an amazing plugin, one in which we pretty much use on every website we build. It becomes even more powerful with the Repeater Field add-on. If you’re like us, then you probably already have the Advanced Customer Fields Pro version which we would highly recommend if you don’t own it already.

One request that we had was to add pagination since the repeater values grew much larger than expected. Today, we will show you a method to add pagination to the results when you display them to the user.

In the example below, we will paginate a Repeater image gallery which is mapped to a custom field name image_gallery which contains a subfield called image which is an image object. Our repeater will be displayed on a custom page template with the URL of /gallery.

In our example, ten images will be displayed per page, and pagination links will allow the user to navigate between the gallery’s pages at pretty URLs such as /gallery/2/, /gallery/3/ and so on. Right, so let’s get cracking!

In your page template:

PHP



<?php
/* 
 * Paginatation on Advanced Custom Fields Repeater
 */

if( get_query_var('page') ) {
    $page = get_query_var( 'page' );
} else {
    $page = 1;
}

// Variables
$row              = 0;
$images_per_page  = 10; // How many images to display on each page
$images           = get_field( 'image_gallery' );
$total            = count( $images );
$pages            = ceil( $total / $images_per_page );
$min              = ( ( $page * $images_per_page ) - $images_per_page ) + 1;
$max              = ( $min + $images_per_page ) - 1;

// ACF Loop
if( have_rows( 'image_gallery' ) ) : ?>

<?php while( have_rows( 'image_gallery' ) ): the_row();

    $row++;

    // Ignore this image if $row is lower than $min
    if($row < $min) { continue; }

    // Stop loop completely if $row is higher than $max
    if($row > $max) { break; } ?>

<?php $img_obj = get_sub_field( 'image' ); ?> <a href="<?php echo $img_obj['sizes']['large']; ?>">
    <img src = "<?php echo $img_obj['sizes']['thumbnail']; ?>"
alt = "" >
    </a>

<?php endwhile;

  // Pagination
  echo paginate_links( array(
    'base' => get_permalink() . '%#%' . '/',
    'format' => '?page=%#%',
    'current' => $page,
    'total' => $pages
  ) );
  ?>

<?php else: ?>

No images found

    <?php endif; ?>

And there we have it, pretty simple huh? This technique will also work on Custom Post Type single templates. Your pagination permalinks will have the format /post-type/post-slug/2/.

Along with this, you will need to add some styling but we’ll assume your pretty capable with that part.

Did this help? Do you need any assistance getting this to work? Drop a comment below and we’ll be in touch!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

3 Tips to Make Your ACF Custom Fields Tidier

Advanced Custom Fields (ACF) is a plugin to organise custom fields. If you are not familiar with it then check out their website.

ACF is very customisable, however, we have a tendency to overuse it. What effect does this have? Well not only does it grow your database unnecessarily, but it also makes the admin panel more complicated than it needs to be.

In this article, we will be providing a few tips on how you can tidy up your ACF fields…

1. One Field For All

Depending on your content, a single WYSIWYG can represent multiple fields.

As an example, let’s say we have the following fields; Title, Description, Button Text and Button URL. Like so:

If you aren’t planning to do a special operation on individual fields, just combine them into a WYSIWYG:

Then what we can do is add a default value indicating the content placement:

Much cleaner and easier right?

2. Galleries as a Pseudo-Repeater

A repeater is an awesome feature, it’s flexible and easy to edit… but did you know that it pollutes your postmeta table?

Let’s say you have a simple Repeater (single image + couple of text fields), you can get away by using the Gallery and the image’s metadata instead.

Shown below is a Meet the Team repeater:

So we converted this to a Gallery:

You can then convert your page template file code to:-


<?php

$team_members = get_field('team');
if( $team_members ): ?>
  <section class="team">
  <?php foreach( $team as $person ): ?>
    <div id="team-wrapper">
      <img src="<?php echo $person['sizes']['medium']; ?>"
           alt="<?php echo $person['title']; ?> Photo" >
      <h3>
        <?php echo $person['title']; ?>
      </h3>
      <?php echo wpautop( $person['caption'] ); ?>
      <p class="job-desc">"<?php echo $person['description']; ?>"></p>
    </div>
  <?php endforeach; ?>
  </section>
<?php endif; ?>

3. Simplify Basic WYSIWYG

When creating a WYSIWYG field, you can change the Toolbar to be ‘Basic’. But it still has too many buttons on it…

The snippets below will control which buttons you want to show:

functions.php


add_action( 'admin_enqueue_scripts', 'my_admin_assets', 100 );

function my_admin_assets() {
  $css_dir = get_stylesheet_directory_uri() . '/css';

  wp_enqueue_style( 'my-admin', $css_dir . '/my-admin.css' );
}

css/my-admin.css


.acf-field-wysiwyg [data-toolbar="basic"] .mce-btn {
  display:none; /* hide all buttons */
}

.acf-field-wysiwyg [data-toolbar="basic"] [aria-label*="Bold"],
.acf-field-wysiwyg [data-toolbar="basic"] [aria-label*="Italic"],
.acf-field-wysiwyg [data-toolbar="basic"] [aria-label*="Bulleted"],
.acf-field-wysiwyg [data-toolbar="basic"] [aria-label*="Numbered"],
.acf-field-wysiwyg [data-toolbar="basic"] [aria-label*="Align center"],
.acf-field-wysiwyg [data-toolbar="basic"] [aria-label*="edit link"] {
  display:inline-block;
}

.acf-field-wysiwyg [data-toolbar="basic"] .mce-edit-area {
  height:150px !important;
}

Our 3 tips to use ACF more efficiently:

  1. Combine multiple fields into WYSIWYG.
  2. Use Gallery as replacement of Repeater (if content is simple).
  3. Simplify the Toolbar in Basic WYSIWYG using CSS.

 

If you have any question or additional tips to share, please leave a comment below. I will definitely reply to you 🙂

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Adding ACF Fields as Admin Columns to your CPT

We all know how awesome Advanced Custom Fields (ACF) is right? We pretty much use the Pro version of it on every WordPress website build we do.

Today, we are going to show you how to add fields to your CPT (Custom Post Type) to the backend Admin Columns.

There are a few plugins that can accomplish adding your ACF fields as admin columns to the backend. Admin Columns is one of the best ones that does the trick. The paid version allows your custom post type to connect with ACF Pro.

As programmers, we want to keep the number of plugins we use to a minimum right? well, it’s pretty simple to add these manually!

Okay, so here we go… Let’s say that you have created a post type, ‘hosting’, and two custom meta fields, ‘start_date’ and ‘end_date’. You’d like to add both meta fields to the custom post type list view. First of all, we will need to add the following to the functions.php file:-


/**
 *	ACF Admin Columns
 *
 */

 function add_acf_columns ( $columns ) {
   return array_merge ( $columns, array ( 
     'start_date' => __ ( 'Starts' ),
     'end_date'   => __ ( 'Ends' ) 
   ) );
 }
 add_filter ( 'manage_hosting_posts_columns', 'add_acf_columns' );

This filter adds your additional columns to the list. We have created an array containing two items – one for the start date and one for the end date – and merged it with the existing columns. The filter is hooked to the specific post type, in this case, manage_hosting_posts_columns, based on the format manage_POSTTYPE_posts_columns. You’ll need to edit this filter to match your custom post type slug.

Secondly, add the following code to output the meta field values:-


 /*
 * Add columns to Hosting CPT
 */
 function hosting_custom_column ( $column, $post_id ) {
   switch ( $column ) {
     case 'start_date':
       echo get_post_meta ( $post_id, 'hosting_start_date', true );
       break;
     case 'end_date':
       echo get_post_meta ( $post_id, 'hosting_end_date', true );
       break;
   }
}
add_action ( 'manage_hosting_posts_custom_column', 'hosting_custom_column', 10, 2 );

Again, notice how the action hook is specific to your post type, in this case, manage_hosting_posts_custom_column. The function looks for the name of your custom columns then echoes the metadata.

Awesome, we’ve added the fields now! But wait, do you want to go the extra step and make the fields sortable? Of course, why wouldn’t you! Here’s how we can do that:-


 /*
 * Add Sortable columns
 */

function my_column_register_sortable( $columns ) {
	$columns['start_date'] = 'start_date';
	$columns['end_date'] = 'start_date';
	return $columns;
}
add_filter('manage_edit-hosting_sortable_columns', 'my_column_register_sortable' );

Well, we hope you have found this tutorial usual, be sure to leave a comment if this has helped you or if you require any help!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share