How to Add a Single Bootstrap Carousel to a Single Product Gallery using WooCommerce

Today we are going to show you how to replace the WooCommerce Gallery and Thumbnails to a single Bootstrap 4 Carousel.

We’re going to assume that you have already added WooCommerce Support and WooCommerce Product Gallery Slider, if not, you can add these by adding the following code to your functions.php file:


add_theme_support('woocommerce');
add_theme_support( 'wc-product-gallery-slider' );

# You can also add Lightbox Gallery as follows:
add_theme_support( 'wc-product-gallery-lightbox' );

So if you have added a featured image and a gallery to your single product, once styled you will end up something that looks like this:

This already works as a slider, but you have to use the thumbnails to navigate between the different images.

The way that we added a Bootstrap 4 carousel to this in place of the thumbnails was as follows:

Step 1

Navigate to the following directory; /wp-content/plugins/woocommerce/templates/single-product

Copy the product-image.php to your child theme folder, for this; this will be placed in /your-theme/woocommerce/single-product directory.

It’s always best-practise to copy any WooCommerce templates to your theme or child folder, the reason for this is that these files wouldn’t end up being replaced if you update the file in the /plugins/ directory.

Step 2

We are now going to remove the following section from the product-image.php file:


<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
	<figure class="woocommerce-product-gallery__wrapper">
		<?php
		if ( $product->get_image_id() ) {
			$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
		} else {
			$html  = '<div class="woocommerce-product-gallery__image--placeholder">';
			$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
			$html .= '</div>';
		}

		echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

		do_action( 'woocommerce_product_thumbnails' );
		?>
	</figure>
</div>

And we are going to replace this with the following:


<?php
    global $product;

    $attachment_ids = $product->get_gallery_image_ids();
    $image_links[] = get_the_post_thumbnail_url();
    $product_inc = 1;

    foreach( $attachment_ids as $attachment_id ) {
        $image_links[] = wp_get_attachment_url( $attachment_id );
    }
?>

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
	<!-- Product Carousel -->
	<div id="product-carousel" class="carousel slide carousel-fade" data-ride="carousel">
		<div class="carousel-inner" role="listbox">
			<?php
			    foreach( $image_links as $image_link_url ) { ?>
			    	<div class="carousel-item <?php echo ($product_inc==1)?'active':''; ?>">
			        	<?php echo '<img class="prod-car-img" src="'.$image_link_url.'" />'; ?>
			        </div>
			        <?php $product_inc++;
			    }
			?>
		</div>	
		<a class="carousel-control-prev" href="#product-carousel" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#product-carousel" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>						
	</div><!-- #Product Carousel -->
</div>

Result

To summarise what we have done here, we have basically added the ‘featured-image’ to an array (image_links[]). We then looped through the thumbnails to get the image URL’s of the product gallery and then looped the array containing all images together in the Bootstrap 4 Carousel.

What do you end up with?

We now have a Bootstrap 4 Carousel which combines the featured image with the product gallery, we have removed the thumbnails and instead added a Bootstrap 4 carousel in its place.

Awesome huh?

If you need any help, or if this has helped you; please leave a comment below!

Happy coding folks!

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 An Estimated Post Reading Time To Your WordPress Posts

Have you ever wanted to display an estimated post reading time to your WordPress blog posts? If so, you are in the right place; an estimated reading time encourages your visitors to read a blog post instead of clicking away. In this article, we will show you two methods of adding an estimated post reading time to your WordPress posts. The first method will be using custom code with Countable and the second method is the WordPress Plugin method. If you don’t feel confident adding custom code to your blog, we would definitely recommend the Plugin option.

How does it work?

Reading speed is measured in words per minute (wpm). The average person reads between 200 and 250 wpm. As such the formula for the reading time is nothing more than the number of words in your blog post divided by the reading speed of an average person.


                                  total words
reading time  =    round (------------------------------)
                                  reading speed

On our blog we use 200 wpm, so even if you’re just reading it at a steady pace, you should be able to read it in the displayed amount of time.

So let’s dive right into it…

1. Adding Estimated Post Reading Time in WordPress using Countable

To implement this, we will be using JavaScript, it’s the simplest way to process your text on the site once it is rendered.

The first thing to do is to count the number of words of your post. You should have one DOM element which contains your post body. In our case, it is wrapped between:


<div id="blog-content">
     .....
</div>

So to count the words, we will be using Countable.

Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element. Countable is a zero-dependency library and comes in at 1KB when minified and gzipped.

In our case, all we have to do is count the words once so that we can calculate the reading time based on this value, to start we can use:


Countable.count($('#blog-content')[0], function (counter) {
	console.log(counter);
});

counter is an object with the following properties:


all: 9966
characters: 8681
paragraphs: 114
sentences: 121
words: 1253

Now that we have the count of words, we can calculate the reading time in minutes using the code below:


Countable.count($('#blog-content')[0], function (counter) {
    var wpm = 200,
        estimatedRaw = counter.words / wpm,
        minutes = Math.round(estimatedRaw);

    var effectiveTime = (minutes < 1) ? "a very quick read" : minutes + " minute read";

    //display it
    $('.reading-time').html(effectiveTime);
});	

To display the reading time, now we can simply add the following HTML where we want to display the text:


    <p class="reading-time"></p>

.
We also added a condition to display 'a very quick read' if the minute calculation is less than 1. If it's greater than 1, it will display 'x minute read'.

and that's it!

2. Adding Estimated Post Reading Time in WordPress with a Plugin

First thing you need to do is install and activate the Reading Time WP Plugin.

Once activated, navigate to Settings » Reading Time WP page to configure plugin settings.

Here you can select the text that will appear on the screen for reading time and minutes. You can also adjust the reading speed. By default, the plugin calculates reading time by estimating 300 words per minute reading speed.

If you don't want to automatically show reading time next to each post, then you can uncheck 'Insert Reading Time before content' and 'Insert Reading Time before excerpt' options.

The plugin offers a shortcode that you can then manually insert into posts where you want to display reading time.

Don't forget to click on the 'Update Options' button to store your settings.

You can now visit your website to see reading time next to your blog posts.


And that's it! We hope you have now learned how to display estimated post reading time in your WordPress posts.

If you liked this article, then please leave a comment below.

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 include both Desktop and Mobile versions for images within an ACF Repeater Field / Image Field

Today, we will show you how you can have different versions for images for your ACF Fields within WordPress. This will work for images, ACF Repeaters and so on…

Recently, we built a website and we used the ACF Repeater field to create the contents for a Carousel using Bootstrap. For this particular job, we needed to use different images for the desktop and mobile version.

So first things first, create a field for ‘Desktop Hero Image’ and a separate field for ‘Mobile Hero Image’.

For our particular example, we ended up with an ACF Repeater as below:

For the full code for a Bootstrap 4 Carousel in WordPress, see the code at the end of this post.

Now, we’ll show you what we did to have a desktop and mobile version for the hero image. If you’ve already created this, you might have a field like this:


    <span class="hero-slider" style="background-image: url(<?php the_sub_field('desktop_hero_image'); ?>);"</span>

What we need to do is amend this and create a data attribute for both the desktop and mobile version, as per the below example:


    <span class="hero-slider" style="background-image: url(<?php the_sub_field('desktop_hero_image'); ?>);" data-small-src="<?php echo get_sub_field('mobile_hero_image'); ?>"  data-lrg-src="<?php the_sub_field('desktop_hero_image'); ?>"></span>

Next, we need to add some jQuery code to change the hero image based on the browser width. In our example, we wanted to change the hero image if the window width is equal to or less than 575px. To do this, we added the below jQuery code:

<code class="language-JS">
    // Desktop/Mobile Hero Images

    var windowWidth = $(window).width();

    if (windowWidth <= 575) {
      $('[data-small-src]').each(function() {
        var small_src = $(this).data('small-src');
        $(this).css({'background-image':'url('+small_src+')'});
      });
    } else {
      $('[data-lrg-src]').each(function() {
        var lrg_src = $(this).data('lrg-src');
        $(this).css({'background-image':'url('+lrg_src+')'});
      });            
    } 

One thing to note is that the above code will only work on page load. So if you are resizing the browser, the above code will not change the image. We can, however, fix this by using the resize function. To do this, simply add the below code:

<code class="language-JS">
    // Desktop/Mobile Hero Images + Resize Function

    $(window).bind('resize',function(){

        var windowWidth = $(window).width();

        if (windowWidth <= 575) {
          $('[data-small-src]').each(function() {
            var small_src = $(this).data('small-src');
            $(this).css({'background-image':'url('+small_src+')'});
          });
        } else {
          $('[data-lrg-src]').each(function() {
            var lrg_src = $(this).data('lrg-src');
            $(this).css({'background-image':'url('+lrg_src+')'});
          });            
        }

    });

    var windowWidth = $(window).width();

    if (windowWidth <= 575) {
      $('[data-small-src]').each(function() {
        var small_src = $(this).data('small-src');
        $(this).css({'background-image':'url('+small_src+')'});
      });
    } else {
      $('[data-lrg-src]').each(function() {
        var lrg_src = $(this).data('lrg-src');
        $(this).css({'background-image':'url('+lrg_src+')'});
      });            
    } 

Well, we hope this has helped you.

If you are wanting to know how to create a basic carousel using Bootstrap 4 with an ACF Repeater, please refer to the below code:


	<!-- Home Carousel -->
	<div id="homepage-carousel" class="carousel slide carousel-fade" data-ride="carousel" data-touch="true" data-interval="6000">
		<ul class="carousel-indicators">
			<?php 
				$count = 0;
				while( have_rows('hero_carousel') ): the_row();
					if ($count == 0) {
						echo '<li data-target="#homepage-carousel" data-slide-to="0" class="active"></li>';
					} else {
						echo '<li data-target="#homepage-carousel" data-slide-to="'.$count.'"></li>';
					}
				$count++; endwhile;
			?>				
		</ul>
		<div class="carousel-inner" role="listbox">
			<?php
				if( have_rows('hero_carousel') ): $counter = 1; ?>

				    <?php while ( have_rows('hero_carousel') ) : the_row(); ?>

						<div class="carousel-item <?php echo ($counter==1)?'active':''; ?>">
							<div class="container">
						      <div class="title-container">
						            <div class="headline animated fadeInLeft">
						            	<div class="row">
						            		<div class="col-md-8">
								                <h1><?php the_sub_field('title'); ?></h1>
								                <p class="txt-headline"><?php the_sub_field('text'); ?></p>
								                <?php if(get_sub_field('button_text')) { ?>
								                	<a href="<?php the_sub_field('button_url'); ?>" class="btn"><?php the_sub_field('button_text'); ?></a>
								                <?php } ?>
								            </div>
						            	</div>
						            </div>
						       </div>
						    </div>
						    <div class="homepage-overlay">   					
					        	<span class="hero-slider" style="background-image: url(<?php the_sub_field('image'); ?>);" data-small-src="<?php echo get_sub_field('mobile_image'); ?>"  data-lrg-src="<?php the_sub_field('image'); ?>"></span>
					        </div>
						</div>

				    <?php $counter++; endwhile;
				else : endif; 
			?>
		</div>				
	</div><!-- #Home Carousel -->

As always, we hope you enjoyed this tutorial... If this has helped you, leave a comment below! Happy Coding! O_o

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 Prevent Multi-Submit on Contact Form 7

Recently, we came across an issue where we were using the Mail (2) setting to send an automated email to a user who submits the form with an attachment. The issue was that this attachment was a 2MB file, so before you see the success message, you have to wait for the attachment to be sent which can take a bit of time. Because of this, users end up submitting the forms various times causing multiple submits and emails send to both parties (Especially when using a 3rd party SMTP host like SendGrid or MailGun).

Here is the method we used to prevent this sort of action which can simply be added to your functions.php file to be called on each page.


<?php
	// Prevent Multi Submit on all WPCF7 forms
	add_action( 'wp_footer', 'prevent_cf7_multiple_emails' );

	function prevent_cf7_multiple_emails() {
	?>

	<script type="text/javascript">
	var disableSubmit = false;
	jQuery('input.wpcf7-submit[type="submit"]').click(function() {
	    jQuery(':input[type="submit"]').attr('value',"Sending...");
	    if (disableSubmit == true) {
	        return false;
	    }
	    disableSubmit = true;
	    return true;
	})
	  
	var wpcf7Elm = document.querySelector( '.wpcf7' );
	wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
	    jQuery(':input[type="submit"]').attr('value',"Sent");
	    disableSubmit = false;
	}, false );
	</script>
	<?php
} ?>

What the above will do is change the text of the forms submit button to ‘Sending…’ and disable any further clicks until the message is delivered. Once the message is delivered, the submit button will change to ‘Sent’.

In our case, we had pages with multiple forms and only needed this to be added to one of the forms on the website. To do this, you can view the page source and get the ID attribute for the form (e.g. #wpcf7-f4-o1), and simply add this before each of the selectors.

There are other ways of doing this such as using a preloader on submit but our particular client was pretty happy with the solution we provided him with.

Feel free to leave a comment below if this has helped or if you have another preferred method of performing such a task.

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 Replace Your Photos and Media Files in WordPress

Are you looking to replace an image that you have already previously uploaded to WordPress? Quite often you upload an image to your website, make a few tweaks and re-upload the image. Well, instead of uploading a new image to your website, you can quite easily just replace it. In today’s article, we will show you the easiest way to replace your photos and media files in WordPress.

Unfortunately, WordPress doesn’t allow you to replace photos or media files (hopefully in future they will allow this though). So, until then, to update previously uploaded files, you’ll need to use a plugin such as Enable Media Replace.
By default, WordPress does not allow you to replace photos or media files. To update previously uploaded files, you’ll need to use a plugin like Enable Media Replace.

Steps to replace the media files in WordPress

  • Step 1. Install and activate the ‘Enable Media Replace’ plugin
  • Step 2. Go to your WordPress Media Library and set it to ‘list-view’
  • Step 3. Click on the ‘Replace Media’ option under the filename
  • Step 4. Choose your new file from your computer and upload it

Ready to get started? Awesome, let’s do this!

Step 1: Install and Activate ‘Enable Media Replace’ Plugin

First things first, we need to install and activate the Enable Media Replace plugin to your WordPress site.

To do this, you can go to Plugins → Add New from the WordPress CMS. In the search bar type; ‘Enable Media Replace’ and it most likely will be the first selection.

As usual, click the ‘Install Now’ button for the plugin, ‘Activate’ it.

Step 2: Go to your WordPress Media Library and set it to ‘list-view’

Upon activating the plugin, you can now go to Media → Library from the WordPress CMS.

By default, the photos are in grid-view. Go ahead and change it to list-view as shown below:

The blue icon as shown above.

Step 3: Click on the ‘Replace Media’ option under the filename

Hover over the image or media file you want to replace, and you’ll see the ‘Replace Media’ option, so click on it to replace that media file.

Step 4: Choose your new file from your computer and upload it

You will see a new page with the option to browse to a new media file to replace with the old image. Click on the ‘Browse’ button and select the new file from your computer.

From here, you will see two options. You can either just to simply replace the file, alternatively, you can replace the file, use new file name, and update all links throughout the site.

Now, simply click on the ‘Upload’ button and it will replace the image for you.

…So yeah, that’s pretty much it. We hope this article has helped you to learn how to replace your photos and media files in WordPress. It’s very useful and can save time and storage on your server so it’s worth checking out!

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

WordPress 5.4 – Building more with blocks, faster and easier.

As they say, Say hello to more and better.

More ways to make your pages come alive. With easier ways to get it all done and looking better than ever – and boosts in speed you can feel.

WordPress keeps evolving and becoming better and better and so we welcome you to WordPress 5.4.

With every major release, they add more to the block editor, more ways to make posts and pages come alive with your best images. Brining more ways to bring more customers to your website, keep those customers engaged with the richness of embedded media from the web’s top services.

In a nutshell, it helps you bring your vision real in the most simplistic way possible and puts blocks in the perfect place. The latest update brings increased speeds everywhere. For example, as you build sections or galleries or even just type in a line your prose, you can feel how much swifter the workflows enabling you to build much much quicker.

Okay great, you want to know what’s new right? Okay, let’s go!

Two new blocks. And better blocks overall

  • Two brand new blocks: Social Icons and Buttons make adding interactive features fast and easy.
  • New ways with colour: gradients in the Buttons and Cover block, toolbar access to colour options in Rich Text blocks, and for the first time, colour options in the Group and Columns blocks.
  • Guess a whole lot less! Version 5.4 streamlines the whole process for placing and replacing multimedia in every block. Now it works the same way in almost every block!
  • And, if you’ve ever thought your image in the Media+Text block should link to something else – perhaps a picture of a brochure should download that brochure as a document? Well, now it can.

Cleaner UI, clearer navigation – and easier tabbing!

  • Clearer block navigation with block breadcrumbs. And easier selection once you get there.
  • For when you need to navigate with the keyboard, better tabbing and focus. Plus, you can tab over to the sidebar of nearly any block.
  • Speed! 14% faster loading of the editor, 51% faster time-to-type!
  • Tips are gone. In their place, a Welcome Guide window you can bring up when you need it – and only when you need it – again and again.
  • Know at a glance whether you’re in a block’s Edit or Navigation mode. Or, if you have restricted vision, your screen reader will tell you which mode you’re in.

Of course, if you want to work with the very latest tools and features, install the Gutenberg plugin. You’ll get to be the first to use new and exciting features in the block editor before anyone else has seen them!

Your fundamental right: privacy

5.4 helps with a variety of privacy issues around the world. So when users and stakeholders ask about regulatory compliance, or how your team handles user data, the answers should be a lot easier to get right.

Take a look below:

  • Now personal data exports include users session information and users location data from the community events widget. Plus, a table of contents!
  • See progress as you process to export and erasure requests through the privacy tools.
  • Plus, little enhancements throughout give the privacy tools a little cleaner look. Your eyes will thank you!

Wow, pretty cool huh?

But I’m pretty sure you want to see what this means for developers right? We have you covered.

Just for developers

Add custom fields to menu items – natively

  • Two new actions let you add custom fields to menu items – without a plugin and without writing custom walkers.
  • On the Menus admin screen, wp_nav_menu_item_custom_fields fires just before the move buttons of a nav menu item in the menu editor.
  • In the Customiser,
    wp_nav_menu_item_custom_fields_customize_template fires at the end of the menu-items form-fields template.
Blocks! Simpler styling, new APIs and embeds

  • Radically simpler block styling. Negative margins and default padding are gone! Now you can style blocks the way you need them. And, a refactor got rid of four redundant wrapper divs.
  • If you build plugins, now you can register collections of your blocks by namespace across categories – a great way to get more brand visibility.
  • Let users do more with two new APIs: block variations and gradients.
  • In embeds, now the block editor supports TikTok, and CollegeHumor is gone.

There’s lots more information for developers to love in WordPress 5.4. To discover more and learn how to make these changes shine on your sites, themes, plugins and more, check the WordPress 5.4 Field Guide.

To conclude

WordPress and their community are always trying their best to make their platform the best available on the market. What you have to appreciate is this is open-source software. The open-source software development model allows others to not only study the code but also improve it by testing, bug reporting and submitting patches.

It’s always recommended to keep the WordPress version and Plugins up-to-date, for many reasons (e.g. Security and Compatibility). To update, you can simply log in to your WordPress CMS and update through the dashboard. Alternatively, you can download the latest version here on the official WordPress website.

What do you love most about WordPress 5.4? Leave us a comment below with your thoughts!

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

The Best 2 Tools For WordPress Website Migrations

Today, we are going to talk about two Plugins you can use for any WordPress migration. We tend to use both depending on the type of migration required. Obviously, migrations can be done manually by downloading the files and database but at times this can end up taker a lot longer than expected.

Our two favourite plugins for website backups and migrations are All-in-One WP Migration and Duplicator – WordPress Migration Plugin.

Before we get started, we just want to point out that we are using the Premium versions of both plugins. Honestly, they are a hell of a lot better than the free versions and well worth the money!

All-in-One WP Migration

So what does this plugin do? It basically generates a .wpress file that you can transfer to another website. To create a backup, install the plugin then navigate to ‘All In One WP Migration’ → ‘Export’. From here you can select ‘Export to’ → ‘File’ which will create the .wpress file to save on to your desktop. This will also keep a backup on the site as well which can be installed in a matter of a few minutes. A pretty awesome plugin if you’re working on updates on a live website or if you want to update the WordPress version and Plugins, making it easier to revert back should it cause any major issues!

The .wpress backup is saved in the following directory; ‘/wp-content/ai1wm-backups’. Let’s say you’re working on a development site and want to migrate it to the ‘live website’. First, you would install WordPress and the database connection, then you would download the .wpress file and upload this file to the new server. On the new server, if you now go to ‘All in One WP Migration → ‘Backup’, you will see the file you have just uploaded as shown below:

From here, hover over the grey icon and click the restore button. Once completed, refresh the page and you will probably be asked to re-login to your WordPress site. First things first, always make sure to go to ‘Settings → Permalinks’ and click ‘Save Changes’. Quite a lot of times, you may notice the homepage is working but the sub-pages are not, re-saving the permalinks is the key trick to fix this issue.

So you’ll probably notice as well that there are quite a few backups on our site. Well, we can revert back to any stage of the website in a matter of minutes if we need to. We can schedule automated backups and even store our backups elsewhere.

If you have a look at their official website (ServMask), you can see there are several different add-ons you can get for this plugin, such as the Dropbox extension, Google Drive extension, URL extension, Multisite extension, FTP extension and various other useful add-ons depending on what software you use.

You don’t need to own all of these, in fact, the ones we purchased are the All In One WP Migration Unlimited Extension and the URL extension.

I’ll go through the above-mentioned add-ons. Firstly, the All In One WP Migration allows you to import large .wpress files to another website, honestly, with this, migrations can be very easy. Without this plugin, there is a cap to the size you can import free of charge which is why it’s a good idea to purchase the add-on. You’d be crazy not to, it pays for itself very quickly! Secondly, the URL extension allows you to make a backup on site-one.co.uk, then copy and paste the URL of the .wpress file and import it to site-two.co.uk. What does this mean exactly? Well, now you no longer need to download the file and re-upload the file to another server, the migration happens from one site to another, pretty sweet huh?

The only downfall to this plugin is if you experience large .wpress files (over 2GB), there may be compatibility issues trying to upload this to your localhost – which we have recently experienced. Some hosts or Softwares have caps to how much you can import, and although there is a way around this, it can be frustrating at times… That is quite rare though – I mean honestly, a WordPress site over 2GB? That screams a lack of maintenance and optimisation in our eyes.

Anyway, we came across a website .wpressfile that was over 3.3GB (I know, crazy!), and we couldn’t get the migration to work and that’s where we came to our secondary option: Duplicator PRO.

Duplicator – WordPress Migration Plugin

So about the Duplicator plugin, the big difference between this and All In One WP Migration is that this creates backups in a very different way. To create a backup, go to ‘Duplicator Pro’ → ‘Packages’ then click ‘Create New’. An awesome feature with this plugin is the customisation you have over the backups that are made. For example, you can archive only the Database, Enable File Filters and even deselect certain files you don’t wish to migrate to make the package a lot smaller.

Before we discuss any further, we just thought that we should mention that Duplicator Pro (Snap Creek) is a premium plugin, but also has a free version in which you can download for the WordPress Plugins Directory. The free plugin is great, but for regular developers that make quite a lot of migrations, it’s always beneficial to purchase the premium version. As we mentioned before, the plugin will pay for itself very quickly depending on the amount of workload that you have.

Okay, getting back into it, so you’ve made your backup… awesome!

What you can do now is download the two files for your migration, this will be an installer.php file and a 20200330_website_name_1d076f4e32271a989361_20200330102653_archive.daf depending on the migration type that you choose. The key difference between this plugin and All In One WP Migration is that you don’t actually need to have a WordPress website in place in order to import the website. All you need is a database connection and the two above files. From there, you can go to your-website.com/installer.php, add the database connection, run the import and boom; your website is up and running just like that!

That being said, there have been times where backups have failed for one reason or another. Sometimes, we have found that by going to ‘Duplicator Pro’ → ‘Settings’ → ‘Package’ tab, then changing the ‘Archive Engine’ to ‘DupArchive’ fixes that problem. I mean, sometimes we even check this option first before creating the package.

It goes without saying that this plugin is also an awesome plugin for backups and website migrations. Whether it is from site-to-site or site-to-localhost, both are equally great tools for the job.

Conclusion

So you might be wondering why we mentioned All In One WP Migration before Duplicator Pro right? Well, that’s just our first tool to go to in most migrations. Should this fail the job, we then switch over to Duplicator Pro. There are other tools on the market and ways and means to do this without a plugin but why over-complicate something when there are great time-saving tools that do the job perfectly for you in a quick and precise manner?

We’ve done a lot of manual backups by downloading files and databases and importing it to a live website, 95% without any problems at all. But on occasion, especially when you are using Theme Templates, you might find the website transfers but there are a lot of errors, especially when it comes to the database. Okay, within the database there is a fair bit of JSON code and often if you are using techniques like a find and replace of ‘oldsite.com’ to ‘newwebsite.com’, you might soon realise that the transfer has not moved over as you expected. The reason this happens (to put it in layman’s terms) is that ‘oldsite.com’ contains only 12 characters, whereas ‘newwebsite.com’ is 14 characters. With JSON, it needs to know how many characters a string has, so changing the URL’s is all good and well but it’s not smart enough to change ’12 characters’ to ’14 characters’ unless you have the patience to do this manually or have some killer script you’re not telling people about.

The great thing about the two plugins we have been talking about is that they take care of these things automatically! Very rarely have we come across a migration using one of these tools where it didn’t look like an exact replica of the website we were migrating it from. Pretty sweet right?

What are you waiting for? Get these two fantastic plugins downloaded and you’ll never fear a migration again!

 

Did you love this post? Have you used any of these two plugins before? Let us know your experience in the comments below.

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

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

Diving Further Into WordPress Website Accessibility

So you know a bit about WordPress accessibility, but still, you want to learn. Great!

The WordPress community is dedicated to Core Accessibility.

Accessibility Coding Standards Promise: Any new or revised code released in WordPress will conform with WCAG 2.0 guidelines at Level AA.

The accessibility of a WordPress website depends on 3 factors:

  • Theme
  • Plugins
  • Content

 

Designers, creators, and site owners also influence if the end product is accessible.

Developers play a significant part in the accessibility mix. The issues can not be found until someone reports they can’t see or do anything on the website.

What Can WordPress Developers Do To Make The Sites They Build More Accessible?

The right method is improving accessibility from the start. Rectifying accessibility problems with a site is often more time-consuming and difficult to do (though it might happen often).

So, this is what you should do:

  • 1. Choose An Accessibility Ready Theme
  • 2. Use Plugins to produce Accessible Content
  • 3. Teach Customers to Add Accessible Content

 

Tota11y, a Khan Academy developed usability visualisation toolkit, is an awesome developer tool. Simply attach their JS file to your site to allow the accessibility feature, which appears in the shape of a tiny glasses icon tab.

1. Choosing an Accessible Theme for WordPress

The first step on a fully accessible website is to select an accessible theme. Many theme developers take the time to implement the instructions in the WordPress theme accessibility guide, so it is best to ask the author whether a particular topic is accessible or not.

WordPress also includes free themes. Find the submenu under the “Function Filter” heading and click on the cog icon.

There are many options you can choose to filter your search. In the Features section, click the feature above that is reliable readiness.

You can then select any number of filters. On the left, you will see a Filter button that shows the number of filters applied. Click Apply filters. Then, select a topic.

It is important to note that the fact that a theme is labelled Accessibility Ready does not mean that it is “fully” accessible. However, if a theme developer marks their theme as accessible, they probably made some effort into making it accessible. If you encounter any issues, let them know so they can update it for other users.

2. WordPress Free Plugin Solutions For Accessibility

You may be creating your own WordPress theme, or you using any theme you want. One of the amazing things in WordPress is the availability of tens of thousands of add-ons. Whenever you need something, there is usually an add-on that can fit into your website.

My personal choice is WP Publishing, which comes with a variety of tools to help you find and fix the most common problems you find when using WordPress. It requires very little expertise and minimal setup.

WP Accessibility Helper (WHA) is another option in a range of options that include several useful features for skipping links, changing font size, scanning domains, contrast mode, and more. The features you want to include can meet more specific accessibility requirements.

Fonts: Create a font size widget for your sidebars. This makes it easy for readers on your site to resize text according to their needs.

Another easy-to-read option is the Zeno Font Resizer. The plugin allows webmasters to set the font size as well as the font size options. So when users return to your site, they’ll see the font size as they specified before.

Text-to-speech: For readers with visual impairment, text-to-speech features offer audio options for the blind. 190 WordPress add-ons offer a voice of human quality, support over 30 languages, and work with most topics.

G-speech text-to-speech solution is a free alternative for accessible audio. It works with any text on your site and adds an audio block to your site. You can then use these options to change the colour, speaker sound, and more.

Forms: You can easily access your contact forms through the Contact Form 7 plugin. This allows you to set default values for forms and formations, such as WCAG form fields, or readily available forms, such as add-ons.

3. Testing Your Website Accessibility

Once you’ve created your website, it’s a good idea to review your changes. There are many methods and software that you can use to make the experience enjoyable, but there are a few that make testing easier.

One that we mentioned earlier in this article is the Tota11y. Along with this, you can use WAVE Web Accessibility Diagnostic Chrome extension. This auxiliary device displays all errors, warnings, features, structural features, ARIA labels so that you can edit them accordingly.

Once you’ve created your website, it’s a good idea to review your changes. There are many methods and software that you can use to make the experience enjoyable, but there are a few that make testing easier.

Apart from Tota11y, the WAVE Web Accessibility Diagnostic Chrome Extension helps auxiliary device displays all errors, warnings, features, structural features and ARIA labels so that you can edit them accordingly.

Conclusion

Website accessibility is just as important, if not more essential than directing traffic to your website. You should make sure anyone who lands at your website will completely understand and navigate through all the information available there.

That’s why we recommend these accessibility features and the right plug-ins to make them work. If you want to make your website fully accessible, these tips should give you a head start.

If you want us to look at your website and suggest/implement ways in which we can improve your accessibility, feel free to drop us an email at [email protected] and we’d love to help you! Alternatively, you can get in touch with MangoMatter Media and they would be very 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

9 Reasons Why You MUST Avoid Nulled WordPress Themes & Plugins

What are Nulled WordPress Themes & Plugins?

Nulled WordPress themes and plugins are basically pirated copies a paid version which is available unethically on the world wide web.

Not only does it cause great WordPress companies that invested a lot of time creating great plugins/themes, but most importantly it compromised the security of websites that are using these nulled WordPress themes and Plugins.

Quite often, the reason your web site get’s hacked is because of using nulled themes and plugins. As web site owners, you may not even be aware that your site is using these nulled plugins/themes, which is why it’s always important to use good/trusted developers or reputable agencies.

Here are some of the top reasons why you MUST avoid using nulled WordPress plugins and themes on your website.

1. Security

In terms of website security, nulled plugins and themes are extremely dangerous to your website as they are known to carry malware.

This malicious code can spread across different files and even other websites on your server. These malicious codes may not be noticeable on the frontend as more often than not, they disguise itself which makes it harder for programmers to detect and clean up when your website is hacked.

If you’re not taking regular backups, you could even potentially lose all your websites data if your website is hacked. In addition to this, you risk your website being de-indexed from search engines for distributing malware.

2. Privacy

The types of malicious code in which nulled themes and plugins can vary quite significantly. This can include code that steals information from your WordPress site and makes it available to hackers on the dark web.

This information could include your username, email address, and passwords. If you run an e-commerce website or a membership website, you also risk having personal information of your customers being leaked. Now, this can become quite costly to your business if this was to happen. Quite often, people get nulled themes and plugins because they can’t afford the cost. The price isn’t in fact that much when you compare against the number of risks that can occur and how it could actually end up costing you a lot more in the end run.

These kind of hacks are hard to detect and may go unnoticed as your WordPress site keeps functioning normally.

3. It’s Bad for SEO

Pirated WordPress themes and plugins can destroy your WordPress SEO. Nulled WordPress themes and plugins can add spam links to your website or hijack your users and redirect them to bad websites.

These things may not be noticeable visually as they are working in the background, hidden inside your code. Trust us though, search engines will be very quick to penalise your website by dropping your search ranking or even de-indexing your website completely!

What’s even worse is that it could take months to recover your websites SEO rankings…

4. Legal Issues

Many WordPress themes and plugins are open source, but some of them are sold with mixed types of licenses. This means that some parts of the code are protected by copyright laws and if you are using a nulled WordPress theme or plugin, then you don’t have the legal permission to do so.

What this means is that Pirated WordPress themes can result in data theft, data loss, or distribution of illegal material. All of these can lead to legal proceedings where you may end up paying huge sums to lawyers.

5. No Access to Updates

Most WordPress themes and plugins regularly release updates to fix bugs, add new features, and close security issues. Nulled WordPress themes and plugins cannot receive those updates because they don’t have a valid license key.

This leaves your WordPress site with an outdated version which will be less secure and possibly even ends up not working. WordPress itself regularly releases new versions and sometimes themes and plugins need to be updated to remain compatible with the latest changes. Since nulled theme or plugin can’t be updated, your website may start misbehaving or become inaccessible. In some cases, you won’t even know that there is an update available or even know if it’s compatible with the latest WordPress version.

Even the most experienced WordPress users need support and documentation to properly use some of the premium WordPress themes and plugins.

Developers of these products spend a lot of their time on providing support and creating documentation for their users. They even hire support specialists to answer questions and regularly add new tutorials.

If you are using a nulled WordPress theme or plugin, then you are on your own. You cannot ask the developers to help you out when you need help. You also don’t get access to documentation and tutorials because those are only available to users who purchase the plugins/themes.

7. Access to New Features

As we have already mentioned, WordPress themes and plugins are updated regularly and often these updates include new features. If you are using a nulled WordPress products, then you won’t be getting automatic updates, and you wouldn’t even know that there are new features available.

These new features can significantly improve your website and help you earn more money online. However, you will be totally unaware of any changes and will be stuck with an outdated version.

8. Unethical use Discourages Innovation

Some people may argue that some plugins and themes are just tiny bits of software, and quite simply, they will use nulled plugins and themes because they can’t afford the costs. However, this tiny piece of code is the result of someone’s skill, talent, and hard work. By using nulled software, you are taking away money from the creators.

Developers not only spend their own time writing code, but they also have to provide support, create documentation, make a website, hire support staff, and spend a lot of money to run their business. Using nulled software hurts their business and they end up losing money.

These unethical practices may discourage developers from creating new innovative products that can benefit millions of users!

9. The Abundance of Free Alternatives

There is no reason for anyone to use nulled WordPress themes and plugins. No matter which WordPress theme or plugin you choose, there is more than likely one or suitable free alternatives available for them.

For great WordPress themes, we tend to use ThemeForest, they offer a massively library of themes to choose from and more often than not, you will find a great theme which will require very little customisation to get a great website for your business up and running.

If you are looking for some great WordPress plugins you can use CodeCanyon, again, they have a massive stock of great premium plugins you can purchase if you can’t source a suitable free plugin from WordPress.org.

WordPress.org has thousands of free plugins and themes. Some of them are even better than the paid/premium products. Most importantly, you can use them legally with no burden on your conscience and without affecting WordPress community negatively.

Well, we hope you have found this article useful and can agree with the fact that nulled plugins and themes should not be used.

Do you have a website that has been affected by malware? Get in touch with us at [email protected] and we will put our full efforts to fix and recover your website!

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