5 Best Web Design Practices To Follow In 2020

In today’s highly competitive business scenario, owning a business website is absolutely essential. In order to make your brand stand out, you need to have an exceptional website.

Who doesn’t want to take their business to the next step? Well, if you wish your brand to grow, then there is a huge list of efforts to make. Any business that wishes to be competitive in this high paced world should definitely opt for a business website.

From getting a highly responsive website designed to maintain your website page speed, everything needs to be taken care of.

But making your business successful isn’t a matter of days. It takes a lot of dedication and efforts during a long time to rise and shine. Have a look at my personal post I posted here, you will see the journey I made in making a business a success.

A website is the exact reflection of your business, so make sure that it’s perfectly designed and portrays your business in the best possible way.

This complete guide is dedicated to some of the best web design practices to follow and about how you can get an exceptional website designed for your business:

Here, we will be discussing some of the best web design practices to follow in 2020:

Have a plan

The most important thing before getting started with designing a website is to have an exceptional plan. You can’t just get started with random ideas with no concrete foundation.

Make sure to have a clear idea of the website requirements and then plan out things accordingly. Ensure that your plan meets the needs of your website’s visitors.

Designing a creative website needs a lot of research, planning and efforts.

Moreover, it’s highly important to think beyond web design. Well, only a professional web designer can offer much more than just design and coding.

Rather, they can help with overall development as well as the maintenance of the website. It’s something that will definitely help your website to get ranked easily and efficiently.

Well-planned website design will in turn gift you with the best ROI that you are looking for. So, make sure to hire an experienced professional for getting an exceptional website designed for your business.

So, have a clear idea of your own set of goals and challenges that you and your business website are going to face in the long run. This way, you can be quite prepared for it.

So, before you go any further, it’s important to have a sorted plan to work accordingly.

SEO Savvy

Your website does need to be optimised according to the browser, but according to SEO guidelines as well. Having a website that isn’t SEO friendly won’t offer you any benefits in the long term.

Don’t ever overlook the power of optimising your website according to Google’s algorithms. It will definitely help you make your business website rank better in search engines.

If your goal is not only creating a website but creating an online presence that leaves a mark, then SEO is something you should definitely consider.

SEO strategy contains creating quality content, creating backlinks, getting your website ranked well on Google, attracting prospects and converting them into happy customers.
SEO plays a major role in helping your business rank well and reach the top.

Mobile ready

You might be thinking: what does being mobile-ready even mean?

Well, to be very precise, being mobile-ready is about how well a website can be accessed on mobile phones and on different browsers, for that matter.

In this digital age, people are using their mobile phones to search for everything, so your business website needs to be mobile-friendly.

Well, having an experienced designer by your side ensures that your website can be easily accessed on desktops, laptops, tablets as well as mobile phones.

There’s no denying the fact that a responsive web design can work wonders for your business. Responsive websites simply mean that your website can adapt to multiple screen sizes easily.

So, make sure that your website is mobile-ready!

Responsive design

Most people out there are using their smartphones and tablets to browse through different websites. So, you need to make sure that your website is responsive and that it fits the screen of different smart devices properly.

Your website needs to be mobile-friendly, or else visitors who use their smartphones to view your site are just going to bounce back. That’s something you don’t want for your website.

So, make sure to have a professional by your side who can help you create a responsive web design that will work on every device that your prospects are using.

A user-friendly website is something that can make a difference when it comes to your business’ ROI. A professional web designer not only makes your website look amazing but also ensures that it’s responsive, adapting to every device.

So, ensure your website is highly responsive and user-friendly to get the most out of it.

A responsive and optimised mobile site provides a great user experience to visitors. In such cases, visitors are more likely to stay on your website for a longer period. This way, you can keep a hold on the bounce rate of your website and gradually get to decrease it.

Having a responsive website definitely offers your visitors with better user experience. So, if your primary objective is the client experience, then you should definitely consider hiring a well-rated web developer rather than using self-service solutions.

Fast loading

A website should load in less than five seconds or less. So, make sure that your website has the shortest loading time possible.

Make sure to track your website loading speed and work on it if it’s showing any issues.

With fast-loading web pages, the bounce rate of the website gradually decreases. Your website needs to have a low bounce rate.

Having a responsive web design can help you to quickly convert your website visitors or prospects into happy customers.

Fast loading web pages are a plus point for your business website and it’s something that can help your business grow organically.

With all these best web design practices to follow in 2020, we’ll also be discussing some of the good reasons to hire experienced web designers:

Uniqueness

By hiring a professional web designer you can expect to get a unique and exceptional website designed. So, make sure to hire professionals that can match your specific needs.

Customisation

Professional web designers are there to offer customised designs that match your set of specific needs and desires. So, if you have a clear idea of how your website should look then you should consider hiring a professional web designer who can bring your dream website into reality.

Responsive web design

In order to get a responsive web design, you need to hire experienced professionals. A responsive website is well designed to work on a mobile device and a computer screen effectively.

Browser compatibility

There are a handful of browsers out there and your website needs to be prepared for all of them. You just can’t deny the fact that not all browsers are created equally. So, your business website must be friendly enough for all the browsers. Make sure to properly test your website on different browsers to get a clear idea of the browser compatibility of your website.

A reliable website

Professional web designers can offer their clients a reliable website. So, make sure to do some research and hunt for someone who can offer you a reliable and error-free website.

Creative minds

Professional web designers are creative in their approach. So, make sure to hunt for creative developers who can get an amazing as well as a responsive website designed. Someone who loves experimenting with new web design trends will provide you with the web design that you really need.

Know market trends

Experienced professionals have deep knowledge of the market and are well aware of the current market trends. So, look for professionals that have up-to-date details about their particular field.

Save your time and efforts

A professional web design agency can definitely save enough of your time and efforts. You no longer have to worry about how your website will look and how it can be optimised. So, leave it all to the professionals.

Launching your business online can prove itself to be one of the best marketing strategies. But before that, you need to get the best web development services for your project to make it a huge success.

For a business that is looking forward to leaving its mark in the online world, getting the perfect website designed can make an immense difference.

Smart business owners invest in their websites to bring their online business to the next level. Being the best marketing tool to grow your business, you should consider investing in your business website.

So, take some time, take a step ahead and get your perfect business website prepared.

Hire Silva Web Designs

Are you looking for professional Web Designs / Web Developers? Look no further, we take care of every single step to get your website to tip-top-shape and have an advantage over your competitors. From planning, creating, building and launching your amazing new website, we can assure you that you won’t be disappointed with our services.

We offer the full package, such as:

  • Brand design
  • Responsive design
  • CMS systems
  • E-commerce
  • Social Media Marketing
  • Email campaigns
  • SEO (Search Engine Optimisation)
  • App development
  • Hosting
  • Copywriting

and much much more!

We have experts that are fluent in various CMS systems such as…

  • WordPress
  • Shopify
  • Magento
  • PrestaShop
  • WooCommerce
  • SquareSpace
  • Laravel
  • CodeIgnitor

 

and again, various other CMS systems on top of this!

Interested? Why not start the process and send an email to [email protected] with your requirements and we’ll get back to you with a quote and deliver nothing but the best.

We love working with new customers and we strive through delivering the best quality of work. We’re pretty sure we won’t disappoint 😉

Loved this article? Drop us a message in the comments. \m/ Happy Coding all \m/

∆ SILVA TEAM ∆

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [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!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [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 and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

Decrease or Disable the Strength Required for your WooCommerce Passwords

Today we are going to show you an easy way to decrease or disable the strength required for your WooCommerce Passwords without the use of a plugin.

Disable the Password Strength

The first thing I will point out here is that this method is not necessarily advised but it’s one of those requests you might come across from time to time. Forcing strong passwords on your WooCommerce store can sometimes deter customers from processing their order which is one of the main reasons you are probably reading this post. For the average person, the strength at which WooCommerce/Wordpress require their passwords to be is above and beyond anything the customer will remember. Personally, I use LastPass to generate and store all of my passwords, so this is not an issue for me, but your customers may not be as tech-savvy.

Disabling strong passwords should be done at your own discretion, but until WordPress make the password strength parameters editable, I imagine many people will want to do it. You can add the following code to your theme’s functions.php file to completely remove the password strength check:


/**
 * Remove password strength check.
 */
function iconic_remove_password_strength() {
    wp_dequeue_script( 'wc-password-strength-meter' );
}
add_action( 'wp_print_scripts', 'iconic_remove_password_strength', 10 );

Decrease the Password Strength

It is actually possible to just decrease the strength required for your customer’s passwords. This is a much better option than disabling it completely, in most scenarios anyway.

The default strength is 3, and can range from 0 (non-existent) to 5 (ridiculously strong). You can change this by adding the following filter in your functions.php file:


/**
 * Change min password strength.
 */
function iconic_min_password_strength( $strength ) {
    return 2;
}
 
add_filter( 'woocommerce_min_password_strength', 'iconic_min_password_strength', 10, 1 );

Pretty simple right? If this has helped, leave a comment below, we’d love to hear from you.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

How to add /blog/ in front of your single post URLs in WordPress

Today we will show you how to add /blog/ in front of your single post URL’s. Let’s take this blog post for example, at the moment you will see the single post is the default ‘how-to-add-blog-in-front-of-your-single-post-urls-in-wordpress’, maybe you or one of your clients has asked you to change this to ‘/blog/how-to-add-blog-in-front-of-your-single-post-urls-in-wordpress’. This can be achieved quite easily.

Adding ‘blog’ to your single posts

Firstly, you will want to go to your Permalinks settings (WP Admin → Settings → Permalinks) and select ‘Custom Structure’. It should display your current structure in the text box next to it. Now, add /blog in front of what is in the text box (including the slash in front!). You can change the word blog if you want something different.

Adding /blog/ to your categories and tags

Next, we’ll also add the new base in front of the category and tag URLs. If the text boxes are empty, add this in the Category base: blog/category and this in the Tag base: blog/tag;

And that’s it. Your blogs will now have blog/ in front of them whilst your other pages remain unchanged!

Custom post types

If you are using Custom Post Types (CPT) on your site, you will need to make sure that ‘rewrite with front’ is disabled for each of your post types. Otherwise your custom post type URLs will also get changed to have /blog in-front of them.

If you use a plugin to register your CPT’s, look for the ‘Rewrite‘ option, and make sure that ‘With Front‘ is unchecked. After saving your settings, go back to the Permalinks Settings and click ‘Save Changes’ (this is necessary so that the new links are re-generated).

If this doesn’t work, try also filling out the ‘Slug’ in your post type ‘Rewrite’ settings. Some plugins require this for the ‘With Front’ option to work (and again, save your permalink settings!).

If you have created your own CPT’s in your code, make sure that when registering your post type, you have disabled rewrite with front. As an example, if you had a CPT for Events you will need to add the following code:


'rewrite'	      	=> array( 
	'slug' => 'events',
	'with_front' => false
),

As always, after making this change, save your permalink settings in WP Admin after changing your rewrite rules!

We hope you found this useful… happy coding!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

How to stop spam emails coming from WordPress’ Contact Form 7

Receiving lots of spam emails from contact forms on WordPress websites is always a big issue. The most commonly used plugin for WordPress is Contact Form 7, and this is highly targetted by spammers. Spam from contact forms can be a big issue for sites that get a lot of traffic and so, it results in receiving hundreds of spam emails every day. These are inconvenient and it makes it very difficult to spot the genuine messages in between all the spam.

Not only can you receive spam emails, if you have a WordPress Blog, but it will also be quite often the comments within your posts get bombarded with junk as well. Today, we will show you six different methods to reduce/remove spam coming from your WordPress website.

Note; – We don’t recommend using ALL of the methods we are going to list as WordPress websites should be kept clean and shouldn’t be overloaded with several unnecessary plugins. We recommend trialling one or two of the below methods and monitor how much spam you receive after they have been implemented. If one method doesn’t work for you, try another method until you are happy. We would recommend installing Akismet from being with.

1. Using Contact Form 7’s in-built anti-spam measures

You’ll find a lot of articles recommending CAPTCHA and quiz plugins that work with Contact Form 7. Most of these are unnecessary as it’s better to use the features already built into the Contact Form 7 WordPress plugin.

Quiz

Simple quizzes are becoming a popular way to combat contact form spam. They work by asking the user a simple question such as “Which is bigger, 2 or 8?”. Fortunately, bots can’t answer this question and as a result, only people who enter the correct response can submit the contact form.

To add a quiz, edit your contact form and click the Generate Tag dropdown. Paste the shortcode that appears below into your contact form. It will look something like this:


[quiz capital-quiz "Which is bigger, 2 or 8?|8"]

2. Minimum character count

Sometimes a lot of spam can come from bots that enter text with just 2 digits in a field, usually a number. If all of your spam messages follow an obvious pattern, you can block them by setting up your contact form to block messages that meets the pattern. In this case, we used Maximum and Minimum options in Contact Form 7 to require messages to be more than 20 characters long. Genuine enquires will usually provide more than 20 characters, so this blocks bots without frustrating real users.

The WordPress website featured in this article received a lot of spam contact forms with 2-digit messages – usually a number. I have no idea what they were trying to achieve, but it’s obviously a popular type of spam at the moment.

The Message/Comments field will look something like this:


[textarea* your-message minlength:20 maxlength:500]

Akismet

Akismet has a great reputation as being one of the best WordPress anti-spam plugins. Not everyone knows that it works with Contact Form 7 as well as blog comments.

Once you have activated the plugin and followed the on-screen instructions to add your API key (free for a non-profit-making website or a small monthly fee for business sites), you need to do a bit of extra config to make it talk to Contact Form 7 which you can read more about here.

In my tests, Akismet stopped about 70% of the Contact Form 7 spam but not all of it. It worked well in conjunction with some of the other solutions mentioned in this article. We no longer received any spam comments within the blog once this was activated as well.

4. Contact Form 7 Honeypot

Contact Form 7 Honeypot is a WordPress plugin that adds a hidden field to your contact form. Real users won’t complete it because the field is invisible. However, bots won’t know this and will fill it in. This allows the plugin to recognise them as bots and block their submission, clever right?

After you have installed and activated the plugin, use the Generate Tag option to create a honeypot shortcode to insert into your contact form. Note; this can be inserted anywhere within the contact form. It will look something like this:-


[honeypot honeypot-401]

5. reCAPTCHA v3

reCAPTCHA v3 returns a score for each request without user friction. The score is based on interactions with your site and enables you to take appropriate action for your site.

To set this up, you will first have to register your site on your Google Developers account. For full instructions, you can follow the guide here.

Then on your WordPress site you can go to Contact –> Integrations, all you need to do from here is enter your Site Key and Secret Key provided from your developer account.

6. Really Simple CAPTCHA

The Really Simple CAPTCHA WordPress plugin was created by the developer of Contact Form 7 so they work together seamlessly. The plugin allows you to add a CAPTCHA to your contact form. It’s designed to prevent bots from submitting forms on your WordPress website.

Once you have installed and activated Really Simple CAPTCHA, insert a CAPTCHA tag into your Contact Form 7 form. (Click the Generate Tag dropdown to see the available options and create a customised tag to paste into your form.) It will look something like this:


[captchac captcha-14]

You can find further instructions about this here.

Do note though that CAPTCHAs are becoming slightly old fashioned and are not great for user experience. They also require particular features to be enabled on your server, which may not be in place for your WordPress website.

We would recommend adding a quiz first (see point 1.), and only trying CAPTCHA if this doesn’t work. The two methods basically do the same thing. They prevent automated bots from submitting your website contact form – so you shouldn’t need both.

Conclusion

All WordPress websites receive spam in slightly different ways. What works for one website may not work for another.

When I had to stop Contact Form 7 spam on a WordPress website, we immediately achieved a huge reduction in spam simply by installing Akismet.

We fixed the problem completely by combining Akismet with the Contact Form 7 Honeypot plugin, a quiz and a minimum character count.

If you just want to add one method to reduce Contact Form 7 spam, then we recommend Akismet. This is the best standalone solution as it’s so powerful and comprehensive. You can use it whether you’re a WordPress expert or a beginner. It can make a real difference to your WordPress contact form spam.

If you still receive spam, try the Contact Form 7 Honeypot in conjunction with this, trust us, it will definitely help!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

How to Clean up Your WordPress Media Library

Today we are going to show you how to clean up your WordPress Media library. Whenever you upload an image to WordPress, several copies of that media file are uploaded in various different sizes. Over time, this can lead to a lot of files in your storage that are not used anywhere on the website.

By cleaning up your WordPress media library, you can save a lot of disk space on your hosting and reduce backup sizes.

In this tutorial, we will cover two different plugins and you can decide which one you prefer to go with.

Note: You will be cleaning up unused media files by deleting them forever. This action cannot be undone. Make sure that you have a complete WordPress backup in place before proceeding further.

Option 1. Clean up WordPress Media Library using Media Cleaner

For this method, we will be using the Media Cleaner plugin. It is available as a free plugin with a pro version available with some more features.

First things first, you will need to do is install and activate the Media Cleaner plugin.

Upon activation, go to Media –> Cleaner page to analyse your WordPress media library. The plugin may ask you to reset itself, during this process it will create a new table in your WordPress database to store data.

After that, you need to click on the Start Scan button to run the media analysis.

Media Cleaner will now look for files in your media library and inside your WordPress posts/pages. It will try and find the files that are in your media library but are not used on your website.

This may take a while depending on the size of your media library and the content you have.

Once finished, you’ll see a list of results. It will show you all the media files that are not currently in use on your website as shown below:-

You can select the files that you don’t want to keep and delete them. You can also click on the Delete All button to instantly delete all unused media files.

Option 2. Clean Up WordPress Media Library using Media Dedupper

With this method, we will be using the Media Dedupper plugin. It is also available as both a free and paid version.

However, we recommend using the Pro version because it allows you to prevent deleting duplicate images in the WordPress gallery, Yoast SEO, WooCommerce, and more.

First, you need to install and activate the Media Dedupper plugin.

Upon activation, you need to visit Media –> Manage Duplicates page and click on the Index Media button to analyse your media library.

The plugin will start analysing your media library and will list all the duplicate images. You can then see if a duplicate image is used on your website.

After reviewing the files, you can select all files or specific duplicates. Next, simply select ‘Smart Delete’ from the Bulk actions drop-down menu and then click the Apply button.

Smart Delete feature will make sure that images that are being used on your website are not deleted. It will also merge duplicate images allowing you to reuse media files without reuploading the same file.

Further methods to reduce Diskspace

Now that you have taken care of the duplicate images on your website, the next step is to optimise your existing media files.

A lot of beginners will directly upload images from their phones and cameras. These high-quality images are often too big in file size. They take up disk space, increase backup sizes, and affect the speed and performance of your WordPress website.

You can use a WordPress image compression plugin to automatically optimise your media files without losing quality. The best plugin for this job is Smush. We use this on every web site we work with. It will go through your entire media library and reduce the dimensions, file size in order to speed up your website. We love the plugin so much we are signed up to the Pro version which you can read more about here.

We hope this article helped you learn how to clean up the WordPress media library.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

ACF Repeater Load More using AJAX

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

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

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


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

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

Now moving on to the JavaScript:-


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

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


/**
 * ACF Load More Repeater
*/

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

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

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

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

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

Adding ACF Fields as Admin Columns to your CPT

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

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

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

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

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


/**
 *	ACF Admin Columns
 *
 */

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

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

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


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

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

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


 /*
 * Add Sortable columns
 */

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

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

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

WordPress – How to add Category Name to the body class

The body_class function is great for adding a bunch of classes to the body tag that has information about what kind of page you are currently viewing, most likely for styling purposes. As a default, it doesn’t include a class for the current category (or categories) for a single post.

The below PHP code adds the category ‘nice’ name, and you can simply add this to your functions.php file:


add_filter('body_class','add_category_to_single');
  function add_category_to_single($classes) {
    if (is_single() ) {
      global $post;
      foreach((get_the_category($post->ID)) as $category) {
        // add category slug to the $classes array
        $classes[] = $category->category_nicename;
      }
    }
    // return the $classes array
    return $classes;
  }

We needed to do some specific styling for each of the different categories for single posts and this was a good way to achieve that. Let’s say you had the category ‘Technologies’ and you wanted to make the h1 tags blue. The PHP code above will add the class ‘technologies’ to the body so that you could style all the posts with this category as simple as doing:-


body.technologies {
    color: #2581c4;
}.

Pretty simple right?

Hope this helps! Happy coding 😉

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share