How to Load More Posts using Ajax with a Button or on Scroll in WordPress

Updated: 22/01/2021 – Further clarification has been added on the setup of this script.

In today’s post, we will show you how to create a load more button to show additional posts or custom post types using AJAX.

The benefit of this is that it will improve the page-load of the particular page as it will only be displaying a certain amount of posts before having to load any more of the content (especially when you are loading images).

So let’s get started…

So the first thing that you should have is a list of posts to display on the frontend as follows:-


    <div id="ajax-posts" class="row">
        <?php
            $postsPerPage = 3;
            $args = array(
                    'post_type' => 'post',
                    'posts_per_page' => $postsPerPage,
            );

            $loop = new WP_Query($args);

            while ($loop->have_posts()) : $loop->the_post();
        ?>

         <div class="small-12 large-4 columns">
                <h1><?php the_title(); ?></h1>
                <p><?php the_content(); ?></p>
         </div>

         <?php
                endwhile;
        wp_reset_postdata();
         ?>
    </div>
    <div id="more_posts">Load More</div>

Then you want to add the following code in your functions.php file where you register the scripts:


	wp_localize_script( 'core-js', 'ajax_posts', array(
	    'ajaxurl' => admin_url( 'admin-ajax.php' ),
	    'noposts' => __('No older posts found', 'twentyfifteen'),
	));	

NOTE: You will need to replace code-js with the file you are going to be adding the JS code later in this tutorial.

We added it to a file called core.js, and the reason we added code-js is that we enqueued the script as follows:


	wp_register_script( 'core-js', get_template_directory_uri() . '/assets/js/core.js');
	wp_enqueue_script( 'core-js' );

Right after the existing wp_localize_script. This will load WordPress own admin-ajax.php so that we can use it when we call it in our ajax call.

At the end of the functions.php file, you need to add the function that will load your posts:-


function more_post_ajax(){

    $ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
    $page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;

    header("Content-Type: text/html");

    $args = array(
        'suppress_filters' => true,
        'post_type' => 'post',
        'posts_per_page' => $ppp,
        'paged'    => $page,
    );

    $loop = new WP_Query($args);

    $out = '';

    if ($loop -> have_posts()) :  while ($loop -> have_posts()) : $loop -> the_post();
        $out .= '<div class="small-12 large-4 columns">
                <h1>'.get_the_title().'</h1>
                <p>'.get_the_content().'</p>
         </div>';

    endwhile;
    endif;
    wp_reset_postdata();
    die($out);
}

add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');

The final part is the ajax itself. In functions.js or your main JavaScript/jQuery file, you need to input inside the $(document).ready(); environment the following code:-


var ppp = 3; // Post per page
var pageNumber = 1;


function load_posts(){
    pageNumber++;
    var str = ''&pageNumber=' + pageNumber + '&ppp=' + ppp + '&action=more_post_ajax';
    $.ajax({
        type: "POST",
        dataType: "html",
        url: ajax_posts.ajaxurl,
        data: str,
        success: function(data){
            var $data = $(data);
            if($data.length){
                $("#ajax-posts").append($data);
                $("#more_posts").attr("disabled",false);
            } else{
                $("#more_posts").attr("disabled",true);
            }
        },
        error : function(jqXHR, textStatus, errorThrown) {
            $loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
        }

    });
    return false;
}

$("#more_posts").on("click",function(){ // When btn is pressed.
    $("#more_posts").attr("disabled",true); // Disable the button, temp.
    load_posts();
    $(this).insertAfter('#ajax-posts'); // Move the 'Load More' button to the end of the the newly added posts.
});

With the above code, you should now have a load more button at the bottom of your posts, and once you click this it will display further posts. This can also be used with CTP (custom post type).

How to add Infinite Load, instead of Click

You can also load the rest of the posts automatically on scroll instead of having to click on a button. This can be achieved by making it invisible by setting the visibility to hidden.

The following code will run the load_posts() function when you’re 100px from the bottom of the page. So instead of the click function we added we would use:


$(window).on('scroll', function(){
    if($('body').scrollTop()+$(window).height() > $('footer').offset().top){
        if(!($loader.hasClass('post_loading_loader') || $loader.hasClass('post_no_more_posts'))){
                load_posts();
        }
    }
});

Do note that there is a drawback to this. With this method, you could never scroll the value of $(document).height() - 100 or $('footer').offset().top, If that should happen, just increase the number where the scroll goes to.

You can easily check it by putting console.log in your code and see in the inspector what they throw out like so:


$(window).on('scroll', function () {
    console.log($(window).scrollTop() + $(window).height());
    console.log($(document).height() - 100);
    if ($(window).scrollTop() + $(window).height()  >= $(document).height() - 100) {
        load_posts();        
    }
});

Adjust the settings accordingly and you will get this working to your desire in no time!

If you need any help with this, feel free to get in touch in the comment below. If you need help with this, just drop me a message and I’ll be more than happy to help 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 Hide / Disable the WordPress Admin Bar

When you are logged into your WordPress site, the software automatically displays a toolbar at the top of the page. And whether you’re looking at the site from your dashboard or the front page of your website – the toolbar is always there. For many users, this is rather annoying and even more so when you’re developing the site.

If you’re a developer, this toolbar can really throw off the design of your front page, particularly if you have some CSS detail, which may be obscured by the admin bar. Even if you’re not a developer, you may find the admin bar too distracting.

So the question we have today is; can you somehow get rid of this little annoyance? Yes, and thankfully, you can remove it in just a few short minutes. Today, we’re going to show you how to disable your WordPress admin bar from your website using various methods.

How to Remove the WordPress Admin Bar Directly From the Dashboard

First, you need to login into your WordPress website and enter the dashboard. In order to disable the admin bar, click on Users and find Your Profile underneath it. There, under Keyboard Shortcuts, you’ll see Toolbar. You just uncheck the “Show toolbar when viewing the site” box right next to it.

And you’re actually all done. By unchecking this box, you won’t be able to see the toolbar on the front-end of your website. Of course, the software will continue to display it on the back-end of the site.

Due to the fact that the admin bar displays useful information like quick links to the front, creating new pages and posts, and access to your profile, you should definitely leave this version of the admin bar as is – after all, it contains some of the more important information about your website.

How to Disable the WordPress Admin Bar Using CSS

While the first method is without questions the easiest, this is a close second in terms of difficulty. You only have to copy and paste the CSS code below in Appearance > Customize > Additional CSS, or your style.css file.

The CSS code to disable the toolbar is:


#wpadminbar { display:none !important;}

How to Remove the WordPress Admin Bar Using a Plugin

While the solution above may be easy it isn’t the only way to remove the toolbar. You have a ton of plugins that are able to help you with the same problem. The most popular plugin is the Hide Admin Bar designed by Shelby DeNike which currently has 30,000+ active installs and a rating of 4.5/5 stars.

Luckily, there’s nothing to configure here at all, all you need to do is download the plugin, active it and your toolbar will be gone. It doesn’t get easier than that.

On the other hand, if you want to hide the toolbar for some user roles, you should download the Admin Bar Disabler by Scot Kingsley Clack instead. This plugin gives you an actual interface, where you can:

  • Blacklist the toolbar for certain users
  • Whitelist the toolbar for certain users
  • Disable the toolbar for everyone

You need to go to Settings and click on the Admin Bar Disabler. From there, you can customise everything you want. Although there are other toolbar-disabling plugins out there, we feel like these two are the best. If you can avoid using a plugin then that’s even better as too many plugins can obviously slow your site down; that and you can achieve the same in just a few lines of code without a plugin!

How to Remove the WordPress Admin Bar with Code

If you don’t want to download any additional plugins, don’t worry, you can also disable the toolbar with code. There are a few different ways to go about this and this is our preferred method out of them all.

For starters, if you want to disable the toolbar for all users, simply add this piece of code in your theme’s functions.php file:


add_filter('show_admin_bar', '__return_false');

Another code you can use that will disable the toolbar if added in functions.php is the following one:


function hide_admin_bar(){ return false; }
add_filter( 'show_admin_bar', 'hide_admin_bar' );

But maybe you don’t want to disable the toolbar for everyone. If you want to allow the users with administrative privileges to see the toolbar, you should just add this code instead:


if ( ! current_user_can( 'manage_options' ) ) {
    add_filter('show_admin_bar', '__return_false');
}

And that’s all. As you can see, you don’t need to be an expert programmer to complete this task.

How to Remove Parts of the WordPress Admin Bar With Code

If you are looking for an easy solution to remove certain elements from the Toolbar you can do this using a code. First of all, you will need to search for the toolbar node ID for the element you want to be removed. You can find out more about this here.

For example, if you want to remove the WordPress logo from the toolbar use this code:


add_action( 'admin_bar_menu', 'remove_wp_logo', 999 );
function remove_wp_logo( $wp_admin_bar ) {
    $wp_admin_bar->remove_node( 'wp-logo' );
}

Easy enough, right?

Summary

In the end, whether you think the toolbar is affecting your design or you simply find it distracting, you know you can completely remove it whenever you want. We hope this little guide showed you that removing the admin bar is not such a hard job.

Also, keep in mind that you can always:

  • Remove the admin bar from your dashboard
  • Remove the toolbar using CSS
  • Download a plugin that will hide the admin bar
  • Use your coding skills to remove it
  • Or remove certain parts from it
  • Of course, if you have any questions, or know have a unique way of removing the admin bar, let us know in the comment section 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

The 5 Best WordPress Age Verification Plugins to Help You Add an Age Gate

In this article, we will be providing you with the best 5 WordPress Age Verification Plugins to help you add an age-gate to your website.

If you need to add an age check gate to your WordPress website, then you are in the right place. Using a pre-built WordPress age verification plugin is a simple way to action this as opposed to writing custom code. Although age verification systems are not essentially required by law in most jurisdictions, a lot of businesses dealing in age-sensitive industries choose to use an age gate to control the age of their visitors. These tend to be industries such as alcohol, tobacco, gambling and various others.

So let’s dive into it!

The Best WordPress Age Verification Plugins in 2021

1. Age Gate

Age Gate is a fantastic plugin with a great list of features. We always tend to favour the authors of plugins that have very frequent updates.

Why is the plugin so great? Well, the plugin excludes search engine crawlers and bots so that they do not run into any issues when crawling your website. Other than that, it offers great flexibility allowing you to:

  • Choose between restricting your entire site or just specific content
  • Add an age-gate specifically to your registration forms
  • Allow users to input their age via three different methods (Has simple yes/no option)
  • Add an optional “remember me” box that users can check to avoid future age checks
  • Exclude logged-in users from age checks
  • SEO Friendly – common bots and crawlers are omitted from age checks

In addition to this, it also allows full customisation such as adding your logo and customising all the text that appears. On top of that, the default styling offers quite a nice modern design. It even offers the ability to switch over to a JavaScript triggered version. This essentially means that you can bypass your host of plugins cache, awesome right?

2. Dispensary Age Verification

Technically, the Dispensary Age Verification plugin is an add-on for the WP Dispensary plugin. However, you don’t need to use the core plugin to use this add-on.

What is great about this plugin is that it is super lightweight, quite flexible and it’s a simple age-gate you can apply to your whole website. It will show the age-gate regardless of which page on your website that you first visit. If that all sounds good, you can also adjust the design through the WordPress Customizer.

Once you activate the plugin, you can head over to AppearanceCustomizeAge Verification, and within here you can set up the following:

  • Logo
  • Title
  • Message
  • Minimum Age
  • Using the WordPress Customizer to make changes
  • Using the WordPress Customizer to make changes

The great thing about being able to edit via the WordPress Customizer is that you can view your changes in real-time. This plugin offers a very quick and efficient setup, what more could you ask for.

3. AgeVerify

The AgeVerify plugin isn’t a light-weight as the rest, the reason for this is that this plugin offers various templates which can match a variety of use cases.

The downside to this plugin is that the free version supports ads. This basically means that if you want to remove the ads from the age verification gate, you will need to purchase the pro version which costs $59.

What could make this worthwhile is that it offers you great flexibility allowing you to set:

  • Custom cookie expirations
  • Custom redirect URLs
  • And the background images that it uses are a nice touch.

Having the banners doesn’t really look that professional and doesn’t help your website whatsoever. If you are willing to pay, then great, but from experience, the free option just doesn’t cut it.

4. Age Verifier for WordPress

Age Verifier for WordPress doesn’t offer any free version, unfortunately. However, for just $18 you should bear this in mind once you check out the plugin.

For just $18, you can get some pretty clean and modern designs along with a very helpful visual builder to customise the appearance of the age-gate. You can even select different verification methods as well as defining how long the cookie should last.

Another great feature is that you can add animation effects for when the age-gate appears. In all honestly, though, the core functionality doesn’t offer that much more than the free plugins we have mentioned previously.

The question is if you are willing to pay $18 to make your age-gate look more attractive without having to add some custom code, then it’s a no brainer really. If not, then the other free plugin suggestions would definitely suffice.

5. Age Checker

The Age Checker for WordPress is another premium plugin you can choose from. It’s the same price as the previous one at $18 and it offers a few unique features that the other plugins above don’t offer.

What this plugin offers is 3 different background modes, either a solid colour, image or video. Whilst some of the other plugins offer a date of birth as an option, one of the unique features about this plugin is to have a simple checkbox or enter your verification method. If you are looking for a simple verification like having a button to confirm they are over the required age then this works a treat.

You can also redirect users, change the form validation text and the life of the cookie. Crawlers can be omitted from age verification to ensure it doesn’t effect the SEO of your website.

Lets conclude…

Which WordPress Age Verification Plugin Should You Choose?

Overall, the Age Gate plugin for us is the best. It has the best combination of functionality and styling. The other thing it lacks is the track record of well-reviewed options like the Age Verifier for WordPress. Dispensary Age Verification also provides a nice lightweight solution, though it doesn’t offer the same depth of functionality as the other plugins.

Well, we hope this article helps you decide which Age Verification plugin is the best, depending on your website and your programming knowledge, one plugin could be the best fit for one website, and another plugin for another.

You can even create your own Age Gate verification plugin quite easily if you have the programming knowledge.

Let us know in the comments below as to which your favourite Age Verification plugin is!

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

10 Best WordPress Plugins For Food Bloggers

Finding the best WordPress plugins for your food blog can be daunting because there are millions of options for everything that you need to get done.

From powerful conversion and SEO tools to beautiful image sliders, there’s a lot you can do to beautify and optimise your blog.

With lots of choices comes lots of confusion because, at the end of the day, you need to pick the best plugins that should be installed on your blog.

Thankfully, we’re here to help you figure out which plugins you need to increase conversions and SEO and optimise your site.

Let’s jump into the list of WordPress Plugins for food bloggers.

Top 10 WordPress Plugins For Food Bloggers

I started my own food blog a few months ago. The sheer amount of research I had to decide which plugins to install was taxing.

However, in a few weeks time, I had a list of plugins for almost everything that I needed.

Today, I’m sharing the same list of plugins with you that I have either used or currently use on my blog.

I promise you that all of these plugins will help you increase your blog’s traffic, back up your blog, and simplify your site or make it better.

1. Yoast SEO

This is hands-down the best SEO plugin that’s there in the market. It enables you to optimise your posts, pages and maximizes your blogs SEO potential.

It also has a range of tutorials and articles that help you understand its features and industry trends.

The best part is that it comes with a free version which makes it perfect if you’ve just started out.

2. SumoMe

What’s one plugin that you absolutely need to grow your blog?

It’s SumoMe.

From opt-in forms to social sharing and heat maps to content analytics, it has everything to help your food blog grow.

The Pro version comes with more features and functionality to grow your blog exponentially.

3. W3 Total Cache

A potent plugin that speeds up your blog while caching, this is a plugin you should definitely install.

It also comes with a bunch of other features to optimise your food blog.

Since speed is key, this plugin helps cut down the loading and waiting time of your pages and improve your overall reader’s experience.

4. Jetpack

Sit back and relax as Jetpack supercharges your blog with a fabulous collection of features ranging from subscription forms, website stats and social media icons.

According to me, it’s the best way to check the stats of your website without leaving your site.

WP Smush.it

As a food blogger, you’ll require high-quality photos all the time.

Apart from that, you might also add large files such as videos, PDFs, cookbooks, etc.

While this will be appreciated by your readers, the loading time for these massive media files will not.

It’s common knowledge that a person doesn’t wait for more than 3 seconds for a website to load.

This can be problematic especially when you’re trying to grow your food blog.

The best solution is to install WP Smush.it. This helps reduce the file size and improves the SEO, performance and speed of your website.

6. Contact Form 7

Your theme might be beautiful and come with a lot of features but I’ve come to realise that no matter how perfect the theme is, it always lacks a contact form.

Trust me, I’ve changed hundreds of themes before finalising my current one.

A content form allows your readers and users to interact with you. Adding one to your website also makes your site look more authoritative and reliable.

Contact Form 7 allows you to customise your forms, filter spam, add CAPTCHA among other things.

It’s a great plugin to manage all communication between your readers and yourself.

7. Editorial Calendar

I like to plan the content for my blog a few weeks in advance.

In order to keep a track of each and every article that will be published, I use Editorial Calendar.

It’s an excellent plugin that allows you to schedule and arrange your content by dragging and dropping it on the calendar.

I can rearrange dates without causing a mess and enhance my content publishing strategy in no time.

8. Broken Link Checker

If you’re someone who works alone or even has a small team like me, you’ll need someone to keep a track of pages, posts, comments and most importantly, broken links.

Enter Broken Link Checker that does all this and emails you when it finds broken links and alerts you via your email.

This is crucial because you don’t want your audience to be directed to broken pages that display a 404 error.

Plus, such links negatively impact the SEO of your site.

9. Akismet

When I first started my blog, I used to wish my that my readers would leave comments on my site.

And that started a few weeks after I encouraged them to do so via my social media marketing.

I was elated, overjoyed, in fact. Soon after, my articles were full of comments about fake Chanel bags and vapes and CBD oils.

It felt as though I had managed to attract all the spammers to my website to leave spammy comments!

That’s when I decided to install Akismet.

It stops spammers from posting trashy comments on your website and helps keep your comments section tidy and relevant to the content you share.

10. Vaultpress

The last plugin on my list is Vaultpress.

It allows you to back up your blog in real-time.

Created by the same people who made WordPress, it automatically backs up your content, theme and files every day.

You even get security scans every day that help improve the security of your blog. It’s a paid plugin and costs $5 per month.

Conclusion

You don’t need a million plugins to run a food blog, you just need a handful of effective ones.

Managing your blog will be a cakewalk with these plugins so make sure you give them a try.

Do let us know which were your favourite plugins and if you’ve got better alternatives or suggestions for us to try!

Also, you can check out our other article; Our top 10 used plugins for WordPress – 2021 Edition and find what Silva Web Designs like to use to develop great WordPress websites!

Shristi Patni - Profile

Posted by: Shristi Patni

Shristi is a content writer and owner of F and B Recipes. Formerly the Chief Content Officer at Raletta, she is currently working on her second cookbook. Feel free to contact her regarding a food guest post or a mental health guest post.

 

Follow Shristi on Social Media:
Linkedin / Pinterest / Facebook / Twitter / Instagram

It’s good to share

7 Professional WordPress Themes for Programmers 2021

Every business is rushing to get an e-commerce website to succeed in today’s digital age. Every small or large business considers building a website for every new venture. Therefore, it is not a big surprise that programmers have become rather popular.

WordPress is a programmer’s best friend these days as you can get thousands of free and paid website templates to get a site up and running. However, a website not only has to be functionally perfect but should be user-friendly and interactive as well.

Therefore, the real question is which theme is suitable for you? While selecting a theme, you need to look at various factors, including compatibility with plugins and customisation options.

Let’s have a look at the top 7 professional WordPress themes for programmers for the year 2020 and 2021:

1. Jevelin

Jevelin is a multipurpose website that can easily be used for simple as well as complex websites. It can be used for business purposes, by freelancers, or even for private portfolios. There are multiple pre-built layouts, designs, and options for plugins, which creates an amazing user-experience and allows you to play around.

The theme is compatible with mobile and other devices; some key features of this theme are:

  • One-click install
  • Easy customisation
  • Mobile ready
  • Shop powered by WooCommerce
  • Compatible with popular contact forms
  • Slider Revolution
  • 40+ custom-crafted shortcodes

2. Uncode

Uncode is another option that can be creatively used for multipurpose websites. The theme allows you to customise the layout and create a masterpiece with your specifications. With its modern design options, you can add sliders, headers, replicable sections, and much more to enhance the user experience for your website.

The adaptive images feature detects user screen dimensions and rescales the images for a good user experience. The theme is ideal for:

  • Digital agency,
  • Freelance designers
  • web designer
  • developers
  • Service/ product-based businesses
  • marketing
  • blog
  • magazine
  • portfolio
  • photography
  • architecture firms
  • corporate
  • event
  • eCommerce

Hence you can select Uncode for various types of websites, and with its wide range of features, you can customize it however you want.

3. Webify

Webify is another one-stop solution for your website needs. With its exquisite design and countless features, Webify makes amazing options for programmers to build a website of their own choice. There are multiple demos available in the website theme, which you can use as it is or tweak for some customisations as you wish. The theme includes a variety of blocks and modules where you can add, swap, or create a new one as per your need.

The theme is completely customisable, from colours to fonts and various designing options. There are over 60 shortcodes available through which you can turn your imagination into reality. Moreover, you can play around with the gallery as the theme allows you to post format in the audio, video gallery, and standard.

4. RyanCV

RyanCV is an ideal template for coders, programmers, and developers to create a fully customisable CV. The theme includes creative layouts, dark and light mode, more than 8 built-in layouts along with RTL support to create unique CVs. The web design will help you engage and attract new clients as it is an extremely engaging and user-friendly design.

Using RyanCV, users can create a powerful CV with images, videos, links, and ajax content. Users can add skills using cars and lines, add a different contact form, and use icons from a large option of more than 1300 variants.

5. Salient

Salient is an incredible theme to build a completely interactive and responsive website. There are more than 65 elements and 1000+ configuration options that enable you to customise the website however you want.

There are various grid, carousel, slider, and styling options to help you with innovative styling. You can also enjoy social media integration and Lifetime Updates once you purchase this theme. The theme is fully customisable, and you can edit every single feature as per your need and requirement. The options panel includes various options that make it even more user-friendly.

6. Ronneby

Ronneby is famous for its premium design and flexibility options. The theme is appropriate for both business as well as creating websites, so it’s a complete solution for both freelancers as well as corporate businesses.

The theme includes Easy one-click installation, Best premium plugins, and 40+ stylish demos are available for you to explore the possibilities. The theme is compatible with WooCommerce, so it’s easy for you to build an e-commerce website using Ronneby. The pre-made demos can also be used if you are short on time or don’t want to customise.

Moreover, you can also enjoy multilingual support if you are targeting the website for international users. The administration panel is fairly simple, so you can have the backend sorted while using Ronneby. The template also has fully-responsive features, so you won’t have to worry about fixing dimensions for different screen types.

7. Bridge

The Bridge is a multipurpose WordPress theme that can be used for multiple purposes ranging from portfolios to eCommerce websites. There are more than 500 demos with 24 layout concepts to play around with. Whether you want to build a website for a software company, a product, a salon, or an e-commerce platform, Bridge will help you build a website for any purpose you wish.

The admin interface of the Bridge is also user-friendly and customisable typography styles to enjoy. Upload multiple logo versions, play around with graphics, and take complete control over your website.

Key features of Bridge are:

  • Social media integration
  • Integrated search functionality
  • Ajax transition animations
  • Infographic elements

These features will help you control and monitor the website’s performance and update it regularly with new updates. The template helps you establish a fully functional, responsive, and engaging layout without much of a hassle.

Conclusion

These were some of the top WordPress themes that you can use for multiple purposes, including e-commerce, business, bakery services, web development houston, personal blogs, etc. These themes include advanced technologies, plugins, and regular updates so you can enjoy a better experience.

Posted by: Myrah Abrar

Myrah Abrar is a computer science graduate with a passion for web development and digital marketing. She writes blog articles for ApCelero.

It’s good to share

How to Hide or Change Password Protected Message and Form in WordPress

In this tutorial, we are going to show you how you can change password-protected message and the form in WordPress. WordPress allows you to have password-protected posts or pages. This basically means that only people who have the defined password will be able to access the content of that page/post.

The default, the message for this page will read “This content is password protected. To view it please enter your password below:”.

But sometimes, you might want to change the default password-protected message in WordPress.

First of all, to create a password-protected page, we simply edit the page/post, we click the ‘Edit’ link next to ‘Visibility’ on the right sidebar, select the ‘Password protected’ radio button and we can define a password as shown below:

Then when someone visits the page is will look something like this:

How to Change the Default Message on the Password Protected post/page in WordPress

To do this, we can simply add the following code to our functions.php file:


/**
 * Password Protected Message
 */

function my_custom_password_form() {
  
    global $post;

    // Custom logic for the message
    $password_form_message = 
    __( '<p id="private-area-message">This is my new message for the protected area. If you would like access to this page, please send an email to <strong><a href="[email protected]">[email protected]</a></strong></p>' );

    // Put together the custom form using the dynamic message
    $label = 'pwbox-'.( empty( $post->ID ) ? rand() : $post->ID );
    $form = '<div class="container"><form class="protected-post-form" action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" method="post">
    ' . $password_form_message . '
    <label id="password-label" for="' . $label . '">' . __( "Password:" ) . ' </label><input name="post_password" id="' . $label . '" class="pw-window" type="password" size="20" /><input type="submit" class="btn btn-large" name="Submit" value="' . esc_attr__( "Submit" ) . '" />
    </form></div>
    ';
    return $form;

}
add_filter( 'the_password_form', 'my_custom_password_form' );

After you have added this, your password-protected page will look as follows:

We also included the form as well so we can make changes to the form label and submit input value.

Hiding the Password Protected Message

To do this, we can use the same code that we used above, the only thing we need to change is the $password_form_message value by simply setting this to '' (empty) as shown below:


      $password_form_message = 
        __( '' );

And that’s basically it, pretty simple, right? We hope this has helped – if you need any assistance, feel free to drop 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 increase WordPress Memory Limit

In this tutorial, we are going to show you how you can increase your WordPress memory limit using various methods.

If you are getting an error saying something along the lines of “Not Enough Memory allowed for PHP. You have 32 MB. You need at least 64MB” then you can usually resolve this by completing one of the below steps:

How to Increase WordPress Memory Limit

1.) Edit your wp-config.php file and enter something like:


    define('WP_MEMORY_LIMIT', '64M');

2.) If you have access to your PHP.ini file which you can usually access via cPanel or Plesk, change the line in PHP.ini

If your line shows 32M try 64M:-


    memory_limit = 64M; #Maximum amount of memory a script may consume (64MB)

You can always contact your web hosting provider to make the change if you are unsure.

3.) If you don’t have access to PHP.ini try adding this to your .htaccess file:


    php_value memory_limit 64M

If none of the above works for you, the only option you have is to contact your host and they can quickly get this resolved for you. If you want some support, you can always get in touch with our team or 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 Completely Remove Comments From a WordPress Site

In this tutorial, we are going to show you how to completely remove/disable comments from your WordPress website. What this will do is remove the comments form on all your single pages and it will completely remove the Comments link in the WordPress Admin Dashboard. There are plugins that can do this for you but if you can perform the same thing without a plugin, it’s always better.

To do this, all you have to do is add the following code to your functions.php file:-


/**
 * Disable Comments
 */
 
 // Disable support for comments and trackbacks in post types
function df_disable_comments_post_types_support() {
	$post_types = get_post_types();
	foreach ($post_types as $post_type) {
		if(post_type_supports($post_type, 'comments')) {
			remove_post_type_support($post_type, 'comments');
			remove_post_type_support($post_type, 'trackbacks');
		}
	}
}
add_action('admin_init', 'df_disable_comments_post_types_support');

// Close comments on the front-end
function df_disable_comments_status() {
	return false;
}
add_filter('comments_open', 'df_disable_comments_status', 20, 2);
add_filter('pings_open', 'df_disable_comments_status', 20, 2);

// Hide existing comments
function df_disable_comments_hide_existing_comments($comments) {
	$comments = array();
	return $comments;
}
add_filter('comments_array', 'df_disable_comments_hide_existing_comments', 10, 2);

// Remove comments page in menu
function df_disable_comments_admin_menu() {
	remove_menu_page('edit-comments.php');
}
add_action('admin_menu', 'df_disable_comments_admin_menu');

// Redirect any user trying to access comments page
function df_disable_comments_admin_menu_redirect() {
	global $pagenow;
	if ($pagenow === 'edit-comments.php') {
		wp_redirect(admin_url()); exit;
	}
}
add_action('admin_init', 'df_disable_comments_admin_menu_redirect');

// Remove comments metabox from dashboard
function df_disable_comments_dashboard() {
	remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal');
}
add_action('admin_init', 'df_disable_comments_dashboard');

// Remove comments links from admin bar
function df_disable_comments_admin_bar() {
	if (is_admin_bar_showing()) {
		remove_action('admin_bar_menu', 'wp_admin_bar_comments_menu', 60);
	}
}
add_action('init', 'df_disable_comments_admin_bar');

And there you have it, comments will be removed from all frontend pages and all backend pages in the CMS control panel.

Disable Comments with a Plugin

If you did want to go down the method of using a Plugin instead, we can simply activate and install the Disable Comments – Remove Comments & Protect From Spam Plugin.

To install the plugin, you can follow the below steps:

  • 1. Go to the WordPress Dashboard “Add New Plugin” section.
  • 2. Search For “Disable Comments”.
  • 3. Install, then Activate it.
  • 4. The plugin settings can be accessed via the ‘Settings’ menu in the administration area (either your site administration for single-site installs, or your network administration for network installs).

 

And that’s it! Pretty straightforward right? Let us know in the comments if this has helped you or if you require any assistance.

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]signs.com

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

With over 3 million WordPress installations as of the time of writing, you can guarantee this is the best plugin to use for any WordPress migration or backup!

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

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