Website Translation and Bilingual Marketing

The first step in your bilingual marketing campaign is translating your website. So, it is worth allocating a marketing budget if you’re going after more business in the Latinx market. Opening your customer base to a second language gives you a competitive advantage, and your company is stronger for it.

“Offering more than one language means you are less fragile than companies that don’t. You are more agile to changes in the market. If your English website fails, your Spanish website is still running.”

Warren Laine-Naida

Translating your online store into Spanish in domestic markets with high percentages of Spanish speakers – for example, Los Angeles, CA, San Antonio, TX, or Phoenix, AZ  – is a smart business move. In that regard, website translation is a priority and makes a lot of sense for an eCommerce site, but what if you’re a real estate agent, hair stylist, or mechanic? Sí, your small business website should be en español also.

“It’s not only online stores that can benefit from going multilingual, though. A translated blog, for example, has the potential to gain new followers and generate more revenue from ads.”

WP Buffs

What is Bilingual Marketing? 

Before going beyond website translation and bilingual marketing, we need to agree on a simplified definition of marketing. Marketing is communication. You’re communicating a message to your audience, and – more importantly – that message is being received by your audience. 

So, if a portion of your customer base prefers to engage with brands in their native language – Spanish – then the best way to reach them is with a bilingual marketing campaign. But is that only in Spanish or a mix?

You have two obvious choices: create a totally different campaign in Spanish or translate the current marketing campaign into Spanish. The latter is an extension of your current marketing strategy, serving as a parallel campaign with a similar goal. That makes the marketing campaign bilingual. One of the best strategies, especially for the Hispanic market, is a hybrid approach –  where the campaign has Spanish and English.

“Before you tailor a bilingual marketing campaign, it is necessary to re-evaluate your business marketing objectives and then create content that positions it under the end-user requirement.”

Alpha Co. Marketing & Media

The important thing to remember with bilingual campaigns is that word-for-word translations aren’t always effective – or accurate. Always make an effort to translate colloquialisms thought for thought. So, be careful, but go ahead and start that bilingual campaign.

Does Bilingual Marketing Work? 

Of course, bilingual marketing works. And if you’re following along with our article, you get it. In fact, bilingual and Hispanic-centered marketing campaigns win awards. Casanova//McCann, who has worked with Denny’s, The California Lottery, and more, has won 2 years in a row at Cannes.

Bilingual marketing works because it honors your customers. It works because it speaks to customers where they are and because people speak more than just English. International companies know this. American companies who both recognize this fact and incorporate it into their business strategy win – all the way to the bank.

“Hispanics and Latinos are more likely to stick with a brand they like, which means strong customer lifetime value.”

SASSO

What Companies Excel at Bilingual Marketing in Spanish? 

McDonald’s is one of the first companies that dedicated social accounts to Spanish speakers. Netflix does well in the Hispanic market, IKEA has had success with Spanish-based marketing, and Ford Motor Company resonates well.

One great example of going beyond just translation in bilingual marketing is from Target. Their #SinTraducción (Without Translation) culture-based campaign won hearts and brought shoppers in the door. How’s that for más negocios?

Target had a spike in Hispanic Share of Voice by over 500%, outperformed metrics on ad recall and persuasion scores, but most importantly for our Target client-partners, it increased foot traffic in key Hispanic markets.”

Third Ear

How Do You Find Developers To Help with Bilingual Marketing?

One of the first places to ask for referrals for bilingual developers is your local Hispanic Chamber of Commerce if “bilingual” refers to Spanish. They’ll be able to source local Spanish speakers who understand local colloquialisms. Another great place to find developers is at local WordPress Meetups. You can always reach out on social media to find experts. But that’s all quite a bit of work. We have a suggestion, though.

Our partners at Codeable have a directory of elite WordPress developers – many of whom are not only bilingual but polyglots (fluent in many languages). When you’re looking for a WordPress developer who can build your WordPress website, help with your bilingual marketing campaigns, y habla espanol, then we have your back.

Featured Photo by Brett Zeck on Unsplash

WP Buffs – Your Best Friends

Have a multilingual site? No problemo. Our “Perform” and “Custom” Care Plans include support for multiple languages. We love WPML for WordPress translation, but there are other plugins and platforms available, such as Weglot and Lokalise to name a few.

If you’ve been paying attention to the WP Buffs blog, then you’ve seen MailChimp for WordPress (MC4WP) mentioned as one of our top WordPress email plugins. We will walk you through how to use Mailchimp with WordPress using the Mailchimp for WordPress Plugin and traditional code.

MC4WP: MailChimp for WordPress

Mailchimp for WordPress is a plugin that can be added to your WordPress website to connect with Mailchimp, better manage your marketing campaigns, and add users from your websites straight to Mailchimp’s lists.

MC4WP allows users to add forms and custom signup methods for Mailchimp to your WordPress site. Users will need controlling access to a Mailchimp account to get started.

Set Up a Mailchimp Account

To use Mailchimp for WordPress, you must sign up for a Mailchimp account. New users can register on the Mailchimp website, opting for a free or paid version.

If you’ve already got a Mailchimp account confirmed and ready to go, you can log in and skip ahead to the next section.

Before Signing Up for Mailchimp

What you will need for the signup process:

• A browser that meets minimum requirements for Mailchimp to work correctly.
• An email address to be used as the primary communication method with your account.
• A unique Mailchimp username.
• A physical mailing address to be in all emails (can be a P.O. Box).
• Though not required to sign up, a credit card is the only payment accepted for subscription plans and add-ons.

Using Mailchimp to spam end users is against their regulations, and suspicion of spam activities will result in account suspension.

Sign Up for a Mailchimp Account

Creating a Mailchimp account is very simple:

1. Visit Mailchimp to sign up for an account.
2. Enter your email, a unique username, and password, and then click “Sign Up.”

Note: Emails that start with role-based names like “admin” or “security” get automatically blocked from signing up with Mailchimp.

1. Successful registration will display a confirmation message and send an activation email to the email you entered.
2. Check your email for the account activation message from Mailchimp.

Note: check your spam folder and review Mailchimp’s activation email troubleshooting tips for more ideas.

Confirm Your Mailchimp Account

Before Mailchimp allows you to use all its features, you must confirm your email address and complete account activation.

1. Locate the account activation email from Mailchimp and open it
2. Click the “Activate Account” link in the email and allow it to open your browser
3. Mailchimp will require you to prove your humanity with a button click to complete the setup.

Suppose you use the Mailchimp application or integrate with WordPress without confirming your email. In that case, you may run into functionality issues that are not explained clearly, including the inability to connect Mailchimp for WordPress to your Mailchimp account.

Mailchimp Account Setup

The first time logging in to Mailchimp, a prompt will have you answer basic questions to complete the setup. The information Mailchimp requires includes:

• Name (for your profile that can access multiple Mailchimp accounts)
• Email Address to contact you at
• Company or Organization Details for content assistance (and targeted ads)
• Website URL
• A physical address is legally necessary for any email sent (can be a P.O. Box)

Take a peek at their signup process to learn more about how Mailchimp uses your information.

Confirm Your Mailchimp Plan

Mailchimp automatically starts everyone off on the Free version, and a free plan is all you need to connect your Mailchimp account to your Mailchimp for WordPress Plugin. If you seek a specific functionality from Mailchimp not available in the Free option, you may need to consider a Mailchimp paid plan.

Create an Email List in Mailchimp

If you did not create or import an email list during setup, you need to create new email lists for your marketing campaigns.

How to Use MailChimp with WordPress Plugin

Before you can use the MC4WP plugin, it needs to connect to your Mailchimp account. Like many plugins, a connection to an external application like Mailchimp uses an API key.

An admin account can set up a Mailchimp account with your WordPress site several ways, but every method requires the use of a Mailchimp API Key.

Create a Mailchimp API Key

You will need to log in to your Mailchimp account to access the area where you create and manage your API Keys.

1. With a successful log-in, go to Account > Extras > API Keys.
2. Create a New API Key or copy an existing API Key.
3. Copy the API Key for your WordPress site or keep this information handy.

Once connected, the API Keys area of Mailchimp will also be where you confirm your connection status to your WordPress site. You can also toggle off the API Key or create other types of Keys for development.

Use the API Key to Connect Mailchimp to WordPress

There are two ways to add the Mailchimp API Key to your WordPress website. If you are not a developer or still getting comfortable with editing code, it is easier to use the Mailchimp for WordPress plugin to set the API.

Add the Mailchimp API Key to the Mailchimp for WordPress Plugin

To configure the plugin on your website to communicate with Mailchimp, you must access the WordPress admin control panel.

1. Log in to your WordPress admin dashboard.
2. If you haven’t already done so, add the Mailchimp for WordPress plugin MC4WP and activate it.
3. Open MC4WP and enter your API key in the input field.

Adding the Mailchimp API Key add a PHP Constant

If you are comfortable altering the code of your website, you also have the option to define a Mailchimp API through the definition of the MC4WP_API_KEY PHP Constant.

define(‘MC4WP_API_KEY’, ‘your-api-key-here’);

The PHP Constant needs defining in a loaded area like your functions.php file. If you’re unfamiliar with editing a functions.php file, see our Beginner’s Guide on how to Edit Functions.php in WordPress.

Create or Add Signup Forms to Your WordPress Website

There are essentially three types of Mailchimp signups to create and add to your WordPress site, and those include a popup, an inline-block, and sidebar signup. The signup form style best for your site will depend on your marketing and user experience goals.

Without a paid subscription, you get limited to using the Mailchimp block or custom code. Code Snippets can be accessed using HTML blocks in the visual builder. Mailchimp offers the opportunity to create a form on their site and copy and paste the form code into your WordPress blocks for use.

Mailchimp Forms

Before you can sign users up for marketing communications, a form is required to collect their information. Mailchimp comes with some mobile-optimized default forms, and admins can update form fields to match your preferred labels.

Mailchimp forms are single opt-in by default. People who subscribe using your forms get immediately added to the Mailchimp list.

Double opt-in signup through Mailchimp requires email verification before users get automatically added to a list. The double opt-in is especially handy for websites with many unsubscribes, complaints, or bounces.

Add a Mailchimp Signup in a Popup

Mailchimp has the functionality to be used in a popup window. If you want your guests to get a popup invitation related to a Mailchimp campaign,

Where to Paste MailChimp Popup Code

Mailchimp offers additional functionality through the use of code snippets. For code snippets to work correctly, they will need to be in a file that gets loaded, like a theme’s functions.php file or a specified code block.

Add an Inline Mailchimp Signup

WordPress.com offers a free Mailchimp block in the default visual block editor. You can add the Mailchimp block to any post or page by selecting it from the list of available blocks.

Some plugins also have a built-in Mailchimp visual block, such as Jetpack version 7.1 or higher. Any plugin that offers integration with Mailchimp through WordPress is accessing your Mailchimp API Key to help build your pages and run your campaigns.

Add a Mailchimp Sidebar or Footer Signup

The sidebar and footer can house various widgets for custom work in a standard WordPress theme. To use a custom Mailchimp signup in one of these areas, create a dedicated “Mailchimp for WP Form” widget.

A developer can build a custom widget using the Mailchimp API Key created, or developers can save time using the “Mailchimp for WordPress” plugin.

1. Log in to your WordPress Admin dashboard and ensure the MC4WP plugin is active.
2. Navigate to Appearance > Widgets and select Mailchimp for WP Form widget.
3. Drag the widget into the desired widget area.
4. Select the form you would like to use from your Mailchimp options and give it a unique Title.
5. Save your changes

Your form should be visible in the sidebar where it is present. If you want to customize or create a unique format, you can edit the signup forms in the MailChimp For WordPress form settings.

Creating Custom Style for Mailchimp Signup Forms

If you want to customize your Mailchimp forms in WordPress, Mailchimp provides a reference table of CSS Selectors to call. If your visual builder has issues overwriting the form code, you may need to add custom code to your site that calls the CSS Hooks.

If there is an absolute need to use custom style code, it may be best to code your forms from scratch or have a professional from WP Buffs do it for you.

MailChimp WordPress Plugins

In addition to Mailchimp integrating with WordPress directly, several plugins are available to automate your marketing with your website.

The MC4WP plugin has base forms available for use, but WordPress also allows the environment to integrate with the following plugins:

• Default WordPress Forms
• Contact Form 7
• WooCommerce
• Gravity Forms
• Ninja Forms 3
• WPForms
• BuddyPress
• MemberPress
• Events Manager
• Easy Digital Downloads
• Give
• UltimateMember

It also offers the following add-ons and integrations:

• Google reCAPTCHA
• WPBruiser anti-spam
• Mailchimp for WordPress Premium
• Mailchimp Top Bar
• Mailchimp ACtivity
• Boxzilla Pop-ups

More on Managing Email Campaigns from WP Buffs

Mailchimp can go even further with automation programs like Zapier or in the hands of a quality WordPress developer. Access to an API Key will give a good developer the ability to automate a large portion of your marketing campaigns.

Developers and programs can access that API to integrate your favorite plugins and programs.

If you would like to hear more from our experts about email deliverability, open rates, and personalization from the WP Buffs, listen to our Podcast with special guest Rene Morozowich to do just that. You can also subscribe to our newsletter to keep updated on the latest from WP Buggs.

If WP Buffs has caught your attention and you’re interested in finding out more about our WordPress services, contact us. Our team of skilled professionals can decrease the stress around growing your online presence.

Frequently Asked Questions

What is a Favicon?

A favicon is an icon that shows up in the browser tab or window and on the list of bookmarks or favorites specifically associated with a particular site. If a browser does not find a custom favicon, it shows a default favicon instead.

A WordPress favicon is often a tiny version of the site’s logo. You may be able to shrink the logo to favicon size, but it is usually necessary to create one related to the original logo.

Why should I use a Favicon?

Businesses should have a favicon to improve familiarity and encourage trust from potential customers. Branding allows visitors to recognize a site instantly. It adds continuity and legitimacy.

Individuals can also use a favicon for similar reasons, though the goal is repeat visitors rather than purchases in most situations.

Favicon Specifications

The favicon size in WordPress is 16×16 pixels. However, some other browsers and applications use a larger size, ranging from 16 to 195 pixels square.

If you stick with the 16×16 size, the applications that use larger sizes will generally enlarge it, often causing pixelation. Because of this, WordPress’ Site Identity requires 512×512 instead.

Some common alternate sizes are:

• 24 pixels – the icon for a pinned site in Internet Explorer 9
• 72 pixels – the icon on an iPad home screen
• 128 pixels – the icon used on the Chrome Web Store
• 195 pixels – the icon shown on Opera Speed Dial

Favicon Formats

A favicon will not display correctly if it is saved in an incorrect format. The most common format is Windows ICO, which was the original requirement. It can hold a variety of sizes and resolutions for use over multiple platforms. It is the only format used by Internet Explorer.

PNG is the most user-friendly option since nearly any graphics program will save in this format, and it provides a small file size and allows the favicon to be transparent if desired.

Opera supports using SVG for favicons, though it is the only browser that does.

GIF, JPG, and APNG are options but are less useful because their resolution is worse, and they can be distracting. Distraction is especially likely with animated GIF files and APNG files, which are also animated.

Creating a Favicon

Designing a WordPress favicon to add recognition to your site is a great idea. You can design one on a graphics program on your computer or use a free website online, such as favicon-generator.org or favicon.cc.

Consider the following factors to improve the value of your favicon.

Identity

The most important reason to have a favicon is to be recognized. Create a design that represents the product or service you offer or a design that matches your brand logo. An image that directly relates to your brand, such as a smaller version of the logo or the main letter or letters of the company name, is ideal.

Simplicity

Because of its small size, simple is best. Basic shapes or letters are a good choice for visibility. When visitors recognize it at a glance, it is most effective. The more detail you attempt to include, the more difficult it is for the visitor to recognize what the icon is. Precision, boldness, and clarity are essential.

Colors

High contrast will improve readability and increase recognition. Consider the favicons of such sites as NBC and Netflix. Their sites are instantly obvious. Sites that have a clear color identity should include that color in their WordPress favicon. Again, keep it simple. Too many colors can cause an unclear image.

How to Add a Favicon to WordPress

Add a WordPress favicon using one of the following methods:

1) Use the built-in Site Icon option in WordPress.

Hover over Appearance and choose Customize, then choose the Site Identity tab. Site Icon is at the bottom of the left panel and allows you to choose any 512 pixels or larger square image, which it then resizes as needed.

If the file you choose is not a square, WordPress provides an interface to crop the image to a square.

2) Edit the header.php

Edit header.php file in your current theme and add this code:

<link rel=”icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” >
 <link rel=”shortcut icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” />

Replace “yourdomain” with your site’s domain name, and make sure to upload the favicon to the webspace.

If you want to prevent WordPress from undoing the change in an update, create a child theme before editing and edit the child theme file instead of the main theme file.

3) Use a WordPress plugin.

Use one of the plugins we list below.

How to Change a Favicon in WordPress

Changing the WordPress favicon is similar to adding one. The same methods work to upload a new favicon. It is also possible to upload a new one and overwrite the old one, which will change it when visitors clear their cache or do a hard refresh.

Let WP Buffs handle your upgrades and changes if you find the process confusing. The team is available 24/7 to provide service and assistance.

Simplify with a WordPress Favicon Plugin

Ease the process of adding or changing the WordPress favicon by installing a plugin.

• You can use the plugin Insert Headers and Footers to add the code above easily. Paste the code into the header section and save it.
• The plugin All in One Favicon adds the functionality to ease the process of adding a favicon.
• RealFaviconGenerator is a plugin that generates icons based on the browser’s requirements.
• Another popular plugin is Heroic Favicon Generator, which generates a favicon from an uploaded image or one already in your media library. It uses drag-and-drop for uploading image files.

Why is my WordPress Favicon not Showing up?

There are several possible reasons for favicon errors, from user error to browser idiosyncrasies.

Cache

When your website is cached, changes to elements like the favicon take time to show up. You can speed up the process by doing a hard refresh (Ctrl + F5) or by clearing the browser cache. If that does not fix the problem, check the favicon file type. If it is not an .ico file, then it may be incompatible with the browser.

Typos

If you have a typographical error in the code, the favicon is likely to error out rather than display. Simple errors such as a missing quote, slash, or bracket cause errors that mess up the image and possibly the entire web page. Check the code carefully.

WordPress Favicon Location

The file reference is very specific, as well. If the link (the part within the href quotes) points to an image that does not exist, the favicon will not display. Be careful to upload the favicon file and copy the exact link. The best way to do this is to use the Media Library inside WordPress.

Local View

If you are checking the display on a local computer rather than loading up the internet page, the WordPress favicon will not show because most browsers do not look locally for the favicon. Check the page on the internet to be certain it is showing to visitors.

Wrong Image Type

The default file type for the favicon image is .ico (“image/ico”). When another file type is used, such as PNG or SVG, that must be adjusted in the code when using the edit theme method. The file type must match the file type of the image. For example, a PNG file should say “image/png” instead of “image/ico.”

For more information about all sorts of WordPress-related topics, subscribe to the WPBuffs newsletter.

People Also Ask

A 404 page is the technical expression describing situations when a page isn’t found. For example, it might be because the user mistypes an URL in the browser tab or that webpage is no longer online. 

In the following paragraphs, you will learn how to edit a 404 page in WordPress. An attractive 404 page is the best solution to overcome an embarrassing moment. Instead of disappointing site visitors, an excellent 404 page will contribute to a better image of your brand. 

What a 404 Page Is 

You click on a link or type in an URL address in the browser tab. Next, the browser starts requesting data from the server hosting the website you want to visit. This is a basic explanation of Internet browsing. The information exchange between browser and server implies, amongst many others, a few status codes. In addition, there are statuses to describe the webpage redirection, the client or server errors, or informational purposes. 

All the status codes with form 4XX regard client errors. For example, 403 Forbidden is when the server understands the browser’s request but refuses to provide the data. By far, the 404 page is the most famous status code. You get a 404 page when you click on a broken link, type in a wrong URL driving to an inexistent webpage, or if the resource you asked for hasn’t ever existed. 

Even essential sites, like huge magazine news or heavily visited stores, might contain a 404 Page error. Of course, it’s unavoidable, but you should know how to pass over the embarrassing situation. Hence, it would help if you did everything possible to create a good-looking 404 error page for your site. 

The Anatomy of a Good 404 Page 

Some websites earn a backlink and public recognition by mentioning in lists featuring cool 404 pages. Site visitors appreciate a good design or a humorous message on a 404 page. This should convince you that a good-looking 404 error page is a priority for your online businesses. Here is what a good 404 page should include: 

●     The error message – Users should realize an issue from the moment they land on a 404 page. Make it explicit so that everyone understands. 

●     Links to your content – You don’t want users to abandon your site. Provide them links to relevant content. Be it your best content or something related to the missing page, it’s totally up to you. What matters is keeping them on your site. 

●     Apologies – Let people know that you are sorry for their inconvenience. Use humor if possible – it’s the best method to encourage them to give your site a second chance. 

●     Good design – People are disappointed when they land on a 404 page and tend to overreact. A stunning piece of design, in addition to engaging content, may change their mind. Do your best to craft an excellent 404 page. 

How to Edit a 404 Page in WordPress 

Luckily, we have various options to edit a 404 page in WordPress. The most experienced users may go for editing the 404.php file. This is the file responsible for displaying the 404-error page. Web admins who prefer using a page builder like Elementor may create a 404 page. Finally, a few plugins to make 404 pages are available for those lacking coding skills. Let’s dissect all the ways to create and edit a 404 page in WordPress. 

Edit a 404 Page Through an FTP Client 

A good rule of thumb is to perform a backup copy of your site before editing the code. Don’t ever skip this step – in most cases, you won’t need a site backup, but bad things happen when unprepared. So do that backup to rest assured! 

Let’s suppose that you performed a complete site backup and you are ready to dive deeper into the matter. Use the FTP client of your choice and connect to the site localhost. Search for a file called 404.php file – it’s the file responsible for displaying the 404-error webpage. Usually, WordPress themes have a dedicated 404.php file, but some might miss this file. Double-check if your theme code includes a 404.php file. If your theme doesn’t have a 404.php file, you will have to build one. Create a new file and copy the following lines of code: 

404 Page template

<?php 
/** 
* The template for displaying 404 pages (Not Found) 
* 
* @package WordPress 
* @subpackage Twenty_Thirteen 
* @since Twenty Thirteen 1.0 
*/ 
get_header(); ?> 
<div id="primary" class="content-area"> 
<div id="content" class="site-content" role="main"> 
<header class="page-header"> 
<h1 class="page-title"><?php _e( 'Not Found', 'twentythirteen' ); ?></h1> 
</header> 
<div class="page-wrapper"> 
<div class="page-content"> 
<h2><?php _e( 'This is somewhat embarrassing, isn’t it?', 'twentythirteen' ); ?></h2> 
<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p> 
<?php get_search_form(); ?> 
</div><!-- .page-content --> 
</div><!-- .page-wrapper --> 
</div><!-- #content --> 
</div><!-- #primary --> 
<?php get_footer(); ?>

Source: Creating an Error 404 Page on WordPress Codex

This is the code behind the 404 Page of Twenty Thirteen theme – it’s a basic page suitable for editing and use for your project. Of course, you can take a look at other default WordPress themes and check their 404 pages. The 404 page of the Twenty Thirteen theme calls the header and the footer of your site, so the page is in line with the style of your site. No matter how your site looks, the 404-error page will have a similar design. However, you have to adapt the content displayed on this page. At this stage, the talent of your content creator steps in.  

Optionally, you may edit the 404.php file to display the content published on your site. The options are endless, so let’s see some potential modalities of enhancing the 404 Page error. 

• Display the titles of the latest seven posts- All you have to do is to paste this snippet of code into the 404.php file: 

<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 7, 'format' => 'custom', 'before' => '<span class="my-post-title">', 'after' => '</span>, ' ) ); ?>

• Display the titles of random seven posts Paste the following code to display seven random posts: 

<ul> 
<?php 
$rand_posts = get_posts( array( 
'posts_per_page' => 5, 
'orderby' => 'rand' 
) ); 
if ( $rand_posts ) { 
foreach ( $rand_posts as $post ) : 
setup_postdata( $post ); 
?> 
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> 
<?php 
endforeach; 
wp_reset_postdata(); 
} 
?> 
</ul>

Add your logo or a funny image (cats and dogs always work) to make viewers smile and give you a second chance. Next, test the 404 page after you finish the editing work. To display your 404-page, type in your site address in the browser bar and add a random string of letters after it. It result should look something like this:

https://example.com/dfdfddfd

If it’s not working, it’s because the server can’t find your custom 404.php file. In this scenario, you should go to the site .htaccess file and paste the following line of code: 

ErrorDocument 404 /index.php?error=404

Important: If you edit a new or a recently launched website, it might not have the .htaccess file. It’s not a big problem -change your site’s permalinks and save your operation. Then, revert to your preferred permalinks format immediately after that. In this way, you will have generated the .htaccess file.  

Edit a 404 Page Through Theme Editor (Not Recommended) 

A significant number of articles related to editing a 404 page in WordPress mention the theme editor as a viable solution. It’s not! Although it is convenient and straightforward to edit the site code directly from the WordPress admin dashboard, it’s hazardous and may end up a fiasco. Not to mention, it’s not professional at all to edit the site while it’s online and accessible to everyone. Besides, your editing disappears once you update the theme (unless you use a child theme). 

Edit a 404 Page Through Page Builders 

This method is safe, simple, and effective. You are probably familiar with page builders like Elementor, Divi Builder, Beaver Builder, SeedProd, or Themify Builder. Which you choose isn’t relevant, as long as you have a good grasp on it. These builders let you create an excellent 404 page without writing a single line of code. This is the best solution if you are worried about pasting code snippets into your site files. 

Check the blog and the documentation of your favorite page builder, and, most likely, you will find a tutorial explaining how to create a 404 page. In addition, some page builders have dedicated templates for 404 pages. Choose a template and personalize it to match your brand. 

404 Page WordPress Plugins 

You don’t have many alternatives to create a 404 page with a dedicated plugin. However, a few plugins deserve your attention. Their capital advantage is that you don’t have to write code to create and edit 404 pages. The plugins are simple, effective, and lightweight. 

404page 

You may be tempted to believe that you have to be a coder to create a good 404 error page. Thanks to this plugin, everyone can conceive an attractive 404 error page. Besides, the 404page plugin isn’t as complex as page builders are. You focus on your final product – a good 404 error page. 

Install and activate the plugin. Next, create a 404 page the same as you do the rest of the pages on your site. From your WordPress admin dashboard, go to Appearance > 404 Error Page and choose the page you have just built to be your site custom 404 error page. 

This plugin doesn’t allow redirecting webpages; it just tells the search bots that the webpage is missing. 404page is a personal project of a developer, so there is no agency behind this plugin. Take into account that the plugin has 100,000 active installs and an almost perfect rating – 4.9 stars out of 5. Under these circumstances, the plugin developer deserves our appreciation! 

All 404 Redirect to Homepage & Broken Images Redirection 

The name of the plugin isn’t quite impressive, but it’s highly suggestive. The plugin handles the 404 Page errors differently than the previous alternative. Instead of delighting visitors with a well-designed 404 page, this plugin redirects all 404 errors to the homepage or other webpage. The biggest advantage of this plugin is that you have control over the broken links on your site. Additionally, you may use this plugin to redirect users. For example, instead of letting people visit an un-updated blog post, use this plugin to drive them to the updated version.     

Colorlib 404 Customizer  

This plugin is simple to use and genuinely helps you create engaging 404 pages. It comes with professionally crafted 404 templates that you can customize to suit your needs. Colorlib 404 Customizer plugin allows inserting social media buttons, changing the background color or image, and configuring the text headings. More advanced users can add custom CSS code. The plugin is open-source, so you can contribute to bettering the plugin. 

Use a page builder or do it through your theme.

If you use a page builder already, you’ll already have the option for customizing your 404 through it. Pretty much every page builder allows you to edit your 404 page. Here’s a list of plugins we’re confident that you can do it in:

● Breezy

● Elementor 

● Beaver Builder

● Divi Builder

● Site Origin

If you are using a theme such as OceanWP, GeneratePress, or Astra, you can do it through their theme options. You’ll get a finished excellent looking 404 page if you import demo content. The only downside of importing demo content and using pre-built designs is that your website will more or less look precisely like the Demo. Take, for example, this website and the Astra demo. Everybody who has looked through Astra’s library of starter sites will quickly recognize that the website owners haven’t created it themselves. This might harm how much users trust your site.

On the bright side, Astra, OceanWP, and the other themes with 500.000+ users extend their starter site library more every month. 

Over to You 

You now have a clear idea about how to edit a 404 page in WordPress. There are many solutions to do it, and you should select the one suitable for your skills and needs. What matters is having an exciting 404 error page to delight your viewers. The method and tools you use to design and implement that 404 page don’t concern your customers. You don’t have any excuse to lack an excellent 404 error page! Go to the drawing board and start building a custom error page! 

Regardless of the reason, how fast a website appears in front of the visitor’s face can impact the user experience and cause your business to miss out on client connections. The user’s website experience is mainly dependent on the critical rendering pathway and managing the scripts your website loads during the rendering process.

What Is Rendering?

All websites follow a pathway for the user to see and interact with its content. The pathway of loading the website is called the critical rendering pathway. This pathway describes each site’s steps to gather and build data for the visitor and their browser.

What Browsers Do Before Rendering

Entering a website URL triggers the following process:

1. Navigation is complete when a user requests a specific URL.
   1. A DNS lookup occurs, in which a server provides an IP address
   2. The browser and the website server perform a TCP Handshake to make a connection
   3. Secure connection requests get a TLS Negotiation or second handshake exchange
2. The browser receives a response, and it gets the website’s code
   1. The first packet of data is received in a TCP Slow Start to regulate network traffic
   2. The user sends acknowledgments (ACKs) to the server to establish the connection limitations and send rates.
3. The browser parses the information and turns the data into a CSS Object Model (CSSOM) and Document Object Model (DOM).
   1. The DOM tree gets built (site and page structure)
   2. A preload scanner gathers external resources, such as scripts and images.
   3. The CSSOM gets built (style tree)
   4. JavaScript gets compiled while the CSSOM builds
   5. The Accessibility Object Model (AOM) is built for assistive devices to interpret content.
4. Rendering occurs using the CSSOM and DOM trees previously created.

What Happens When You Render a Page?

Websites are rendered through code design to complete the layout, style, painting, and sometimes compositing on a website. The CSS Object Model (CSSOM) and Document Object Model (DOM)

Style

The DOM and CSSOM combine into a render tree, and construction starts. The render tree organizes the visible nodes, content, and computed styles for the site and each unique node.

Layout

The layout is the step where architecture meets construction, and a structure is created for the page to display the width, height, and location of all nodes in the render tree. Every object gets size and position determined.

Websites get laid out in a box structure. These boxes can adjust to an unlimited number of different viewport sizes. When the box structure changes for sizing, this is called a reflow.

Paint: First Paint and First Contentful Paint (FCP)

The moment a website browser does any rendering of a page is called the “First Paint.” First Paint could be a solid background color only depending on the page’s code.

First Contentful Paint (FCP) refers to the measurable moment when a website visitor can view content on your page (text, images, videos, etc.). The FCP measures from the beginning of your page load to the point that any content gets rendered.

First Paint and FCP are not the same as a fast loading page or fast performance, but user experience becomes measurably more positive when site visitors perceive a quick loading page. Fine-tuning your First Paints, load time, and site performance improve the user’s perception of load time.

Compositing

Web pages use layers where objects overlap to organize the structure. Compositing is where the page computes the order of things to render them correctly.

Reflows trigger a re-composite since object positioning often changes in a reflow.

What Are Render-Blocking Resources

Scripts, stylesheets, and HTML imports that slow, delay, or block the browser from rendering content on a website are render-blocking resources. When people refer to render-blocking resources, they are usually referring to:

• CSS
• JavaScript in the <head> section
• Fonts loaded from a server or content delivery network
• HTML imports (legacy pages)

There is plenty of CSS and JavaScript that is not render-blocking and is critical to load near the top. Prioritize style sheets to ensure that any site visitor sees the intended content instead of unstyled content or nothing.

What Is Render-Blocking JavaScript and CSS?

During the rendering process, your browser loads the website information by first running through the information in the <head>, including every script. The scripts all need to be run in order and fully processed before the page is visible in your browser.

Scripts build into a queue, so the script order in the <head> is essential during development. Depending on the code, it may slow or prevent your website from fully loading, and these are what we refer to as render-blocking CSS and JavaScript.

Scripts on your WordPress website may come from themes, custom work, or plugins added for various functionalities.

Are Images Render-Block Resources?

If you are wondering if images are render-blocking resources, they are not. The size of a picture can still cause load issues on your page, but it should not block the rendering.

Why Eliminate Render-Blocking Resources?

Render-blocking scripts can slow page load times and ruin a website experience for your visitors. The perception of a slow website can lead to a loss in visitors if your website experience is poor. Low visitor retention can affect your search engine results and lower your results list.

Lower Search Engine Optimization (SEO) rankings mean a reduction in visitors and loss of potential business. Losing rankings reduces your visitor count, and a poor site reduces your visitor retention; render-blocking resources can be a huge problem.

If your website has a goal of a high Google PageSpeed Score, understanding your render-blocking resources is key to achieving that goal.

How to Eliminate Render-Blocking Resources

Getting serious about your site’s SEO rankings and user experience means your site needs to have render-blocking resources dealt with or removed. If you aren’t building your site from scratch, start testing your website for render-blocking resources.

Once you have those render-blocking resources identified, you will choose your method to address the issue and improve your site functionality.

Test If Your Website Has Render-Blocking Resources

It never hurts to run an assessment on your website to discover any render-blocking resources (try Google PageSpeed Insights). If you’ve optimized to the best of your ability, are following best practices and are still experiencing issues, or don’t know where to start, page evaluators can be helpful guides.

Methods to Eliminate Render-Blocking JavaScript and CSS

WordPress allows you to manage any resources getting in the way of your site’s rendering in a few different ways. WordPress will enable you to organize your render-blocking scripts and links with code, tags, file organization and optimization, and plugins.

Professional developers can also create custom plugins or themes that build these processes into the code.

Remove Render-Blocking Javascript with Code

Three methods to address render-blocking resources through code are:

1. Move tags for <script> and <link> to the bottom of your HTML code
2. Add async or defer attributes to the tag for non-critical scripts.
3. Remove unused JavaScript code.

WordPress loads a jQuery Migrate file to provide compatibility with old versions of jQuery used by plugins and themes. You can use a piece of code or a plugin to stop WordPress from loading this jQuery Migrate file if nothing on your site needs it to function.

Eliminate Render-Blocking Stylesheets

The nature of stylesheets makes them render-blocking resources by nature. You can address this on your site in the following ways:

1. Split CSS up by media type (mobile, tablet, desktop, etc.)
2. Optimize the Critical Rendering Path
3. Combine CSS files

Using WordPress and a visual builder, you may not control how a page builds directly, but there are ways to work around any issue.

Address Render-Blocking Using a WordPress Plugin or Extension

WordPress plugins and extensions get used in organizing the scripts on a page. Plugins will go through your page’s <script> and <link> tags and apply the defer or async attributes based on specific guidelines.

We have gone through and tested a range of plugins for WordPress and continue to share useful things like our favorite plugins for speed optimization on the blog.

Have a WordPress Professional Eliminate Render-Blocking Resources for You

Some plugins require customization and, while appearing straightforward, can end up not working if set up incorrectly. There is no shame in asking a WordPress professional to help and WP Buffs has several specialists that can optimize your site.

Best Practices to Optimize Rendering

1. Bundle your render-blocking resources to decrease their impact on the page load.
2. Reduce the size of the resource, so the number of bytes to load is lowered.
3. Defer the download of non-render blocking resources.
4. Don’t add CSS with the @import rule as it is an external load.
5. Use a WordPress plugin designed to cache your scripts and optimize your JavaScript and CSS.
6. Load custom fonts locally.
7. Identify Critical and Non-Critical CSS and JavaScript.
8. Mark non-critical render-blocking code with async or defer attributes.
9. Code not used should be removed.

Eliminate the Headache and Let a WordPress Professional Help

WP Buffs are skilled at optimizing WordPress sites and improving page performance. We understand why performance matters to your business and what areas to focus on to make the most significant impact.

Improving your website’s performance and visitor experience can be more than just render-blocking resources. WP Buffs can take a look at your site and address:

• Image sizes
• Image quality and delivery format
• Page length and percentage of dynamic content
• Poorly built themes
• Unnecessary scripts that cause delays
• Plugins that are poorly built
• Unused external scripts
• Outdated software
• Limited web hosting plan unable to sufficiently support the site’s needs

WordPress can be a reasonably easy platform to build a website on, but maximizing the user experience can take a trained professional or often a great service provider.

Frequently Asked Questions

If you are new to WordPress, altering theme files might seem scary. No matter how good of a developer you become, that fear doesn’t go away, but you can reduce the risk of something going wrong by wisely deciding your method on altering the functions.php file of your website. Let’s start with discussing what the functions.php file does, then dive right into how to edit functions.php in WordPress and what you should be aware of when working on it.

What is the functions.php File?

There is a functions.php file located within each WordPress theme. That file is source code for defining one or more functions using blocks of code to be accessed and called for use in other areas of the programming.

In short, it stores action code for other sections of the programming to access and use. You may find your functions.php file converts specific post types into blog pages, adds Google Analytics, or houses code that makes your theme unique.

Reasons to Be Cautious When Editing functions.php

Before making any changes to your functions.php file, some essential things to understand include:

• Changes are theme-specific: each theme has a functions.php file.
• Theme updates or reinstalls may cause your changes to be lost, as it saves over the file.
• Coding errors in the functions.php file can lock you out of the site or lead to other errors.

The functions.php file is essential for your site to work correctly, and making changes may result in your website breaking. Being able to undo your last change(s) quickly can reduce downtime, especially for retail sites, so make sure you:

• Test your change on a staging site
• Backup the file before changing it
• Be ready to revert changes by making one change at a time (when possible)
• Do it only when necessary and typically just for a child theme
• Consider a site-specific plugin to manage a code snippet instead

Check out our article on WordPress Problems Solved for understanding ways to fix common WordPress issues that developers of all levels encounter.

How to Use a Plugin Instead of Editing functions.php Directly (Safest Method)

One of the safest ways to edit the functionality of the site is to use a plugin, such as Code Snippets, instead of editing the functions.php file. Using a plugin will ensure that your code will stay active with updates or changes, as it operates independently from the theme and, therefore, is not overwritten if the theme is updated or reinstalled.

Additionally, Most plugins that manage code snippets will also work with WordPress multisite. Instructions will vary with the plugin used.

How to Edit functions.php in WordPress Using the Admin Theme Editor

Editing the functions.php file through the Theme Editor is as easy as understanding how to edit source code in WordPress. WordPress’s design includes a built-in editor that enables modification of your theme files using the online admin portal.

Attention: This method should not be used on a live (production) website unless absolutely necessary, because any mistakes have the potential to take the site offline and you will not be able to access the Admin Theme Editor to fix the issue.

If your site is accessible through wp-admin, you can edit the files using the default WordPress menu options.

1. Log in to your site through wp-admin as an administrator.
2. Access your site’s source code under Appearance > Theme Editor.
3. Verify the theme or select a new one using the Select theme dropdown menu to edit and click select.
4. In the menu Theme Files, select the functions.php file by clicking on the corresponding title.
5. Make your edits and click Update File to save the changes.

Note: Each theme has a functions.php file, so it is essential to make sure you are working in the correct theme files, or your edits will be saved in the wrong place and will not appear on the website.

Access functions.php File Through an FTP Client

File Transfer Protocol (FTP) or Secure File Transfer Protocol (SFTP) is a fast way to access files related to your site. If you prefer to access your functions.php file through an FTP/SFTP client, there are many different programs to choose from for a range of costs.

To access your functions.php file through an FTP client, follow these steps:

1. Access your site using your preferred FTP program and your login credentials
2. You should see your local files and the websites files side by side: navigate to the desired theme’s files and locate the functions.php file. Note: You may need to navigate to a different folder to find the functions.php file.
3. Upload your new functions.php file to your WordPress Site

Note: Wait until the upload is complete, or you may create a corrupt file that breaks your site.

Use a Professional or Managed Services

There is no shame in knowing when to partner with a professional or utilize a managed service provider if the work you need to do goes beyond your comfort or skill level. If your time is valuable, have a WordPress managed service provider, like ourselves, handle your website for you.

We, at WP Buffs have a range of WordPress care plans and maintenance packages designed to make your website work stress-free, including making changes to your WordPress backend.

Frequently Asked Questions

Before you panic, let us tell you the solution is likely simple! You may just need to clear WordPress cache and browser cache in order to see those new changes.

In this guide, you’ll learn what cache is and why you may need to empty your WordPress cache.

We’re also covering several tutorials to show you how to clear cache in WordPress using plugins, how to clear cached information through your hosting provider, and how to clear browsing data from your web browser.

Spoiler alert: One of the best things you could do to enhance the performance of a WordPress website besides maintaining proper security is to enable caching. Knowing how to clear your cache when needed helps too!

But you also don’t have to do this alone. Our team at WP Buffs helps website owners, agency partners, and freelancer partners set up caching solutions, maintain your WordPress site, and more. Whether you need us to manage 1 website or support a 1,000 client sites, we’ve got your back.

What Is Cache? Plus, How Cached Information Is Stored

Caching systems save and store a static version of your WordPress website. Because of this process, WordPress no longer needs to run heavier PHP scripts and can load your web pages faster. This boosts overall website speed and improves user experience, which both also impact SEO!

As a website owner, you have several ways to store a cached version of your WordPress site. Client-side caching, or browser caching, stores the HTML pages on the user’s computer. That means when that user visits your site, the cached version is loaded from that local computer.

Server-side caching stores the static HTML pages on the website server’s hard disk or RAM. Typically, this is a method used for very robust websites with multiple databases.

Between the two options, browser caching is the fastest, although server-side caching is still a superior option than not caching at all!

Why We Use Website Caching & Why You May Need to Clear Cache

The reason we use website caching is because it provides an optimal experience for visitors. By sending a saved static copy of the site, your website can load much more quickly with each new visitor.

That said, what’s the point in making a website faster if you don’t have new content to display to visitors?

People aren’t going to visit your website unless you have something compelling or of value to share with them. And people certainly won’t return to your website if you don’t continually populate it with new content.

While caching is supposed to clear, the second something changes on your WordPress site, that’s not always the case. Sometimes, you have to take matters into your own hands. Boom! #WordPress Click To Tweet

When you make new changes to your website, they may not always reflect in real time right away — that’s because of the stored cached version of your website.

That means when you make design tweaks or post new content… or there are changes to plugins, themes, or your database, you may need to manually clear your cache in order for visitors to experience the most updated version of your WordPress site.

What Does Purge From Cache Mean?

Purge, delete, and clear your cache are three different phrases all used to explain the same concept. You’re eliminating saved information your browser or server has retained from your WordPress site, including cached images, files, and pages. This means, the next time you go to load your website, your browser will be pulling new information from the website server.

It’s important to understand this means you’ll likely have to re-enter any saved logins associated with your WordPress account… so make sure you have those written down somewhere safe!

After purging all cache, you’ll probably notice a change in page load speed. (And we mean slower page speeds, not faster.) Your page speed should return to normal after your caching solution caches the new version of your website, as long as it’s optimized.

How to Clear Cache in WordPress Using a Plugin

“How do I clear the cache in WordPress?” Well, WordPress caching plugins are the easiest-to-implement form of browser caching. As a WordPress admin, they’re also the easiest caching solution for you to be able to clear cached site data on your own — without help from your website hosting service.

Below are step-by-step instructions for how to clear cache in WordPress from five of the most popular caching plugins.

Clear WordPress Cache With WP Super Cache Plugin

WP Super Cache is one of the less complex plugins, which just means you’ll have less control over which cached data can be cleared. All the same, it’s very easy to execute!

Click settings > WP Super Cache on the menu bar to the left of the screen. Once you’re in the WP Super Cache settings, there are three spots you can delete your cache: the Easy tab, the Contents tab, or the Admin toolbar.

Click the Delete Cache button, and your saved HTML pages will be cleared.

Clear WordPress Cache With W3 Total Cache Plugin

W3 Total Cache by BoldGrid is a popular and effective choice for caching your website info. They even promise to improve your overall site performance x10 when fully configured.

If you use the W3 Total Cache plugin, to purge your cache, go to the Performance menu and locate the Settings for the plugin.

Scroll down the page and take note of the individual caching settings. When enabled, you’ll be given two choices to clear cache on your WordPress site:

Empty Cache is for when the settings remain the same, but you want to delete the cached data for that particular option. Save Settings & Purge Caches enables you to save a new caching configuration and purge the current cache all at once.

Or you can instantly purge all cached content and data from your website using the Performance menu in the admin toolbar:

Clear WordPress Cache With WP Fastest Cache

WP Fastest Cache is another plugin that is easy to configure and use when you want to clear cache on a WordPress site. In fact, it’s a fan favorite for many WordPress users because of its simplicity and user-friendliness.

When using WP Fastest Cache, to clear the cache, go to the Delete Cache tab.

You have two options:

• Delete the cached content.
• Delete the cached content plus the minified CSS and JavaScript files.

You can also do this from wherever you are in WordPress. Just expand the Clear Cache menu in the admin toolbar and you’ll see the options there:

Clear WordPress Cache With WP Rocket

Click Settings > WP Rocket on the menu bar to the left of the screen. Once you’re on the Dashboard tab, click the Clear Cache button. You can also hover over the WP Rocket button on the WordPress admin bar and click the Clear Cache button.

Image source: WP Rocket

If you want to delete the cache off of a specific blog post or website page, you can click on the Pages or Posts buttons on the left-hand menu bar, hover over the blog or page you’re looking to target, and press the Clear This Cache link.

Image source: WP Rocket

Or, from the post or page editor screen, in the editor panel, pless the Clear Cache button right above the Move to Trash link in the Publish meta box.

Image source: WP Rocket

Clear WordPress Cache With Hummingbird

WPMU DEV’s Hummingbird plugin allows you to compress files, use “lazy loading,” read website performance reports, cache your WordPress site, and more. Active on +1 million websites around the world, it’s a world-class plugin with loads of features to help optimize your site… and we highly recommend it!

Clearing your cache with the Hummingbird plugin is really simple. Just follow these instructions, starting from your WordPress dashboard: Hummingbird Pro > Caching > Clear cache.

How to Clear Cached Files Through Your Web Hosting Provider

1. Clear All Cache With Kinsta

When you use Kinsta, a premium managed WordPress hosting provider, they take care of all your caching needs at the server-level. This includes full-page and object caching.

If you end up needing to manually clear your cache while using Kinsta, it’s easy! Just go to your WordPress dashboard and find the Clear Cache button on the right-hand side. Click it… and voilà!

Image source: Kinsta

2. Clear All Cache With Nexcess

Nexcess is a diverse company that offers fully managed hosting for WordPress, WooCommerce, and Magento.

Of course, today we’re talking about WordPress. When you use Nexcess to host your WordPress site, they’ll automatically take care of your page caching. If you ever need to manually clear your cache, they make it almost as easy as Kinsta does.

Click Nexcess > Page Cache from the hand-hand side menu. Then, select the Clear Site Cache button on the admin toolbar.

Image source: Nexcess

You’re all done! You’ve successfully purged your site’s cache.

3. Clear All Cache With Siteground

The Siteground WordPress hosting provider offers two ways to clear the cache from their built-in caching solution: from your Siteground hosting dashboard or from your WordPress admin dashboard.

To delete your cache from your hosting dashboard, underneath Site Tools, go to Speed > Caching > Dynamic Cache tab and select the menu button next to the domain name for the site you’d like to delete the cache from. Then press Flush Cache.

Alternatively, you can install the SG Optimizer plugin. Once installed, all you need to do is press Purge SG Cache on the admin bar (or top bar).

4. Clear All Cache With WP Engine

WP Engine provides managed WordPress hosting and offers their own built-in caching system. In other words: no caching plugin required.

You can manually clear your WP Engine cache by clicking on WP Engine on the top bar (or admin bar) on your WordPress dashboard. Under General settings, click the blue Purge All Caches button… and you’re done!

5. Clear All Cache With BlueHost

BlueHost is one of the most popular hosting companies… and they make dealing with cache super simple. Their hosting service provides a built-in caching solution that helps to improve your website’s optimization and performance.

To clear all cached pages and information with BlueHost, just go to the WordPress dashboard (or your admin area) and find where it says “Caching” on your admin toolbar (at the top of the page). When you hover over that, the option to Purge All should appear. Select that option to purge all caches.

More Tools to Delete Cache Files

1. How to Clear Cache When You Have a CDN

A content delivery network (CDN) provides WordPress websites with an additional level of caching. Basically, a CDN sends a cached copy of your website from one of its far-flung data centers to website visitors that are nearby. So, not only do you benefit from delivering cached content quickly to visitors, you shorten the physical gap between the server and them. (Which makes your loading speeds incredibly fast!)

To clear cache on your CDN, you will have to log into your third-party CDN platform to do so. Check their FAQs for information on how to clear cache for your WordPress site’s CDN.

2. How to Clear Cache on Your Reverse Proxy

An HTTP reverse proxy like Varnish or Nginx is another type of caching you may want to purge.

If enabled, you should install the Proxy Cache Purge plugin. There are a few reasons for this:

First, if you want to prevent users on the front end of the site from seeing updates you’re making to the website, you can do so in Settings by putting it into Development mode:

This ensures they only see the cached content (pre-update) while you work on the site.

You can also use this plugin if you want to know if caching is working properly:

After you run the test, it will tell you if something like a plugin or theme is creating a conflict and preventing your website from clearing cache properly.

To completely purge a reverse proxy cache with this plugin, use the menu in the admin toolbar:

3. How to Clear Cache on Your WordPress Firewall

A WordPress firewall is technically a reverse proxy, because it reviews and filters traffic before it reaches your website. One major difference, though, is the proxy is meant for website performance enhancements and the firewall is meant for security.

Not all tools available to implement a firewall give you the ability to clear WordPress cache. However, Sucuri Security and CloudFlare are two examples of WordPress firewall plugins that enable cache clearing.

Clear WP Cache With Sucuri Security

If you’re using the WP Sucuri plugin, on the menu in your WordPress admin dashboard, select Sucuri > WAF. On the Clear Cache Tab, select the Clear Cache button.

Clear WP Cache With CloudFlare

With CloudFlare you can either clear all cached data or purge cache from a specific URL. When you’re logged into CloudFlare, click the Caching button on the top menu bar.

If you’d like to purge everything CloudFlare has stored, your next steps are simple. Click blue the Purge Everything button. A warning pop-up will appear. If you accept, click Purge Everything again.

To clear the cache of a specific page, select the blue Custom Purge button instead of Purge Everything. In the box that appears, select URL in the Purge by field. Enter the appropriate URL in the text box, complete any further instructions in the form, and press Purge.

Ideally, you’ll want to set up your firewall plugin to automatically clear the cache when content is updated. You can also use these methods to manually clear cache if you’re not able to see updates on your site, though.

4. How to Clear Cache Using the WordPress Command Line

Wondering, “How do I clear my WordPress cache without plugins?” Using the WordPress command line may be one option. However, Using the WordPress Command Line to delete cache doesn’t eliminate the page cache, but the object cache — which stores database queries. So only attempt this method if you’re looking to flush your object cache.

To do this, execute the following in your WordPress command line:

# Flush cache.

$ wp cache flush

Success: The cache was flushed.

5. How to Clear Browser Cache

Right now, you’re probably only thinking about the cached version of your WordPress site, but don’t forget that your browser also has a caching system that stores copies of every site you visit. That means to see new changes on your website, you may also have to purge the cache from your web browser.

Here are step-by-step instructions to clear browsing data from Safari, Google Chrome, and Firefox.

Safari Tutorial

Go to the Safari menu by clicking Safari in the top left corner of your screen (if you’re using a Mac). In the dropdown menu, select Preferences.

Go to the Privacy tab (with the palm icon). Next to “Cookies and website data,” select the Manage Website Data button. Press Remove All.

Google Chrome Tutorial

In the right-hand corner of your screen, click the three dots in a vertical line (the Settings). From there, select More Tools, then Clear Browsing Data.

This is the easiest way to clear your browsing data in Google Chrome, but you can also go to three dots, select Settings in the dropdown menu. You’ll be brought to a new page.

In the Privacy and security section, click Clear Browsing Data. Select the Advanced tab. You’ll then be able to select specific data you’d like to be cleared from the cache, instead of clearing all browsing data.

FireFox Tutorial

In the top menu bar, select Firefox > Preferences. On the new screen, click Privacy & Security in the left-hand side menu. Underneath Cookies and Site Data, click Clear Data. You can then choose to clear Cookies and Site Data along with Cached Web Content — or one or the other.

Image source: Mozilla

Caching is Vital for Your Site’s Success

Caching is an important part of what makes your website perform so well. But there are times when you have to clear WordPress cache data so that updated content can be shown to visitors.

The above guide details the various ways in which you might need to clear cache on WordPress websites in order to display those updates. But if you find that you don’t have time to handle caching management or other pieces of your speed optimization strategy, get in touch with WP Buffs and let them take care of it for you.

Want to give your feedback or join the conversation? Add your comments on Twitter.

All of that information falls under the banner of ‘analytics’. WordPress doesn’t include an analytics solution out of the box, which means you’ll need to use a service such as Google Analytics (which happens to be both free and fantastic).

We love free and powerful solutions, so in this article, we’ll show you how to add Google Analytics to WordPress using two approaches. Then we’ll introduce you to five Google Analytics plugins that can make monitoring your numbers much easier. Let’s get to it!

In This Article

• The Benefits of Adding Google Analytics to WordPress (And Using a Dashboard Solution)
• How to Add Google Analytics to WordPress (2 Methods)
• 5 Top Google Analytics WordPress Plugins to Create a Data-Rich Dashboard
• Frequently Asked Questions
• Wrapping Up

Video Tutorial

Our team at WP Buffs helps website owners, agency partners, and freelancer partners set up and monitor Google Analytics, 24/7. Whether you need us to manage 1 website or support 1,000 client sites, we’ve got your back!

The Benefits of Adding Google Analytics to WordPress (And Using a Dashboard Solution)

A WordPress website is not a set-it-and-forget-it kind of thing. In order to maximize this tool within your marketing arsenal, you have to keep an eye on what visitors are doing on your site. Then you can begin to formulate a plan for how to make them respond even more positively.

Google Analytics enables you to do just that. This tool can provide you with access to a staggering amount of data, including specifics such as:

• Number of pageviews
• Average session duration
• Bounce rate
• Geographic origin
• Device type
• Traffic source
• Behavior flow
• E-commerce data points
• Custom-created goals

All of that information is invaluable, but in some cases it can be overwhelming. In fact, if you’re using Google Analytics for the first time, it can be hard to find the data you’re interested in. To give you an idea of what you’re in for, here’s a quick look at a Google Analytics dashboard:

That’s just a single tab, and it may already seem hard to navigate. Google Analytics’ User Interface (UI) is great, but there’s a lot of information on every page. That’s why a WordPress Google Analytics dashboard can make your life a lot easier.

By a “Google Analytics WordPress dashboard”, we mean a section of your admin area where you can monitor data without leaving your website:

Along with helping you monitor key numbers, a WordPress Google Analytics dashboard can benefit you in a multitude of ways. Some of the key benefits include:

• It’s easy to implement. Thanks to WordPress Google Analytics plugins, connecting this platform with our favorite Content Management System (CMS) can be a breeze.
• You can be more productive by integrating your analytics into the WordPress dashboard, keeping all of your most vital information in one place.
• Google Analytics plugins are easy to customize and use. You can set them to display the data that matters most, and within the time frames that are most relevant.
• WordPress analytics dashboards are great for clients, as they take the intimidation factor out of Google Analytics.
• By putting analytics within the dashboard, you’ll encourage your clients to log into WordPress regularly, since they’ll know they can get a high-level overview of their statistics right there.
• Real-time insights and long-term analytics are available within the same dashboard panel, making it easier to make smart and timely decisions for the site based on data (rather than on gut instinct).
• You’ll be able to tell if your site is receiving unusual traffic, which could indicate potential security issues.

There’s no reason not to track your website’s numbers, and every reason to do so. All you need is the right solution.

Fortunately, Google Analytics is the most powerful free solution on the market. In the next section, we’ll go over how to install Google Analytics manually and by using plugins, so you can start tracking analytics right away.

Before we move on, though, we should mention that you don’t have to go it alone. Adding Google Analytics to WordPress can be a little tricky, but we can help! We include Google Analytics setup as a part of our services, and can help you with the processes below.

Google Analytics is one of the most powerful tools you can use to monitor and track your website. Plus, it’s free and easy to integrate with #WordPress
Click To Tweet

How to Add Google Analytics to WordPress (2 Methods)

As usual, WordPress provides you with more than one approach to accomplish a specific goal. When learning how to install Google Analytics on WordPress, there are two routes you can take:

1. Add Google Analytics to WordPress Manually
2. Use a Google Analytics Plugin

Both approaches have their pros and cons, which we’ll explore within their respective sections. Let’s start by going over how to set up Google Analytics on WordPress manually.

1. Add Google Analytics to WordPress Manually

Signing up for a Google Analytics account is simple. All you need in order to use the free service is a Google account and a website. For the purposes of this walkthrough, we’re going to assume that you already have both.

During the signup process, Google will ask for some basic information about your website, including its URL and what it’s about:

Once you make your way past the signup stage, you’ll gain access to your Google Analytics dashboard. Keep in mind that at this point, your site isn’t connected to the service yet. Now Google will ask you what type of property you want to connect:

If you select the Web stream option, Google will ask you once more for your website URL and enable you to select what interactions will be tracked:

After you click on Create Stream, Google Analytics shows you a section called Tagging Instructions. You need to add what is called a ‘tag’ or a code snippet to your website, in order to connect it to the platform:

If you select the Global site tag option, a custom code snippet will appear. Copy and save that snippet, or keep this tab open because you need to add that code to WordPress.

That begs the question – where to add Google Analytics code in WordPress? The Google Analytics global site tag code should go within your website’s header. There are two ways you can add that code manually, which are:

1. Use the Customizer to modify your site’s header.
2. Edit your theme’s code (or a child theme’s, preferably) manually via File Transfer Protocol (FTP).

Both approaches are relatively simple, but they require you to be comfortable editing code manually. However, when it comes to adding code to the WordPress header or footer, we almost always recommend that you use a plugin.

2. Use a Google Analytics Plugin

Google Analytics plugins are tools that enable you to connect the platform with your website without needing to dig into its code.

In the past, a lot of Google Analytics plugins required you to enter a unique ID from the third-party site. These days, most plugins simply ask you to grant authorization for them to pull data directly from your Analytics account.

That process works much the same regardless of what plugin you’re using. For example, if you use Site Kit by Google, it will ask you to sign into your Google account and confirm site ownership:

This particular plugin automatically sets up a Search Console account for your website. Once that’s done, you can connect other Google services with a few clicks, including Analytics:

If you select that option, Site Kit will ask you to confirm which Google Analytics account you want to use. Then it will ask for permission to access your analytics data:

Once you allow the plugin all the permissions it needs to function, it will start pulling data from Google Analytics. However, keep in mind that if you just started using the service, it may take a while until it starts showing you concrete numbers:

As you can see, using a Google Analytics plugin can be much simpler than adding the platform’s tracking code manually. However, we’ve just shown you one plugin so far. In the next section, we’ll expand that selection.

5 Top Google Analytics WordPress Plugins to Create a Data-Rich Dashboard

Now that you know how to use Google Analytics on WordPress, let’s talk about the tools you can leverage. There are a lot of WordPress Google Analytics plugins to choose from. For this roundup, we’ll focus on tools that enable you to connect the platform to your website and display some of its metrics within your dashboard.

As we mentioned earlier, most Google Analytics plugins let you connect the analytics tool with your website without you needing to input any data. However, some extensions may still ask you for your Google Analytics ID. If that happens, you can refer to this guide on how to find that ID.

Below, we’ll take a look at five of the best Google Analytics WordPress plugins to consider:

1. Google Analytics for WordPress by MonsterInsights
2. Google Analytics WD
3. Site Kit by Google
4. Google Analytics Dashboard by Analytify
5. Beehive Analytics

1. Google Analytics for WordPress by MonsterInsights

Among the most-highly trusted WordPress plugins for Google Analytics is the one available from MonsterInsights*. Since this is a freemium plugin, you can expect that there will be more data available as you pay to play. However, the free version of this plugin is also quite powerful.

Here are some of the highlights:

• The interface of the plugin is beautiful, and features some subtle animations to keep your clients engaged with their data.
• Rather than just focusing on numbers, the MonsterInsights plugin shows data that’s especially helpful for clients that produce a lot of content. Specifically, they’ll be able to see the number of pageviews, the top URLs, and a list of referral websites.
• The premium version of the plugin provides additional insights. Among other things, you can see what’s going on with your AMP content, AdSense ads, e-commerce products, and Facebook Instant Articles.

With this MonsterInsights plugin, you’ll be able to access a dedicated Google Analytics dashboard from within the WordPress admin area:

However, some parts of that dashboard aren’t available if you’re using the free version of the plugin. This is one of the many reasons we recommend investing in a premium license. 

Buy MonsterInsights for $100-$400/yr*

2. Google Analytics WD

The Google Analytics plugin from 10Web is definitely one of the best Google Analytics WordPress plugins around. If you want access to comprehensive analytics and more control over how the data is displayed from within WordPress, this is a solid tool to consider using.

Here is what you need to know about this plugin:

• The premium plugin provides access to reports from within WordPress, as well as more customization of those reports (especially for e-commerce goal tracking).
• You can see a high-level overview of your analytics from the main WordPress dashboard widgets, or you can use the new Analytics tab to drill down deeper.
• Analytics can be displayed using one or two variables, depending on what you’re trying to track.
• You can also experiment with the type of data visualization through the use of line charts, standard column charts, or even pie charts.

Here is how the data is displayed from within the main WordPress dashboard widget:

And here is the expanded view and customization capabilities from within the Analytics tab:

If you need an analytics tool for your own websites, this plugin is a terrific choice. However, for clients, you can expect there to be a learning curve if they’re new to analytics tools. In that case, you may find that one of the simpler plugin solutions will be more suitable for them.

Buy 10Web for $85-$150/yr

3. Site Kit by Google

We’ve already given you a taste of how this plugin from Google works. To sum it up, Site Kit from Google is an official plugin that provides you with a simple way to connect multiple Google services with your WordPress website.

Those services include:

• Google Analytics
• Search Console
• AdSense
• PageSpeed Insights
• Tag Manager
• Optimize

If you’re the kind of person who likes using Google services, this plugin can be a one-stop solution for integrating almost all of the options that you might need. Moreover, each platform that you integrate gets its own dashboard where you can monitor its data:

Connecting most services using this plugin is as easy as selecting which Google account to use and granting it the corresponding permissions. However, if you don’t want to integrate any other Google services beyond Analytics, there’s little reason for you to use this swiss-army knife of a plugin.

Download Site Kit for free

4. Google Analytics Dashboard by Analytify

The Google Analytics Dashboard plugin by Analytify does precisely what its name implies. With this plugin, you can add Google Analytics to WordPress with a few clicks, and get access to a dashboard within your admin panel.

Here are some of the many features that the plugin offers, as well as some of the data sets it can show you:

• Enhanced e-commerce tracking with support for WooCommerce
• Built-in traffic numbers for all your WordPress posts and pages
• Top countries and cities by visitors
• Page bounce rates
• Statistics by device type
• Which websites are sending you the most visitors

All of that data is available both in the form of graphs and simple numerical breakdowns:

If you value a user-friendly analytics dashboard, this plugin is one of our top recommendations. Its free version also offers a wealth of information, and it’s a great option for both personal and client websites.

Keep in mind that there’s also a premium version which provides you with access to much more data within the dashboard. That includes real-time numbers, analytics campaigns, goals, and much more.

Download Google Analytics by Analytify for free

5. Beehive Analytics

Beehive Analytics is part of the WPMU DEV family of plugins. It’s a free plugin that enables you to connect your Analytics account with WordPress, and display its data within your dashboard.

This Google Analytics tool includes options to protect your visitors’ privacy, such as IP anonymization. Beehive Analytics also enables you to decide which user roles have access to which data within the dashboard.

Using Beehive Analytics, you get access to the following information from a custom dashboard:

• Number of sessions and users
• Number of page views
• Average time on page
• Bounce rate statistics
• Top countries and most visited pages
• User trends
• Referral websites and search engine reports

If you want a powerful Google Analytics dashboard that gives you insight into all the most important metrics you should be monitoring, Beehive Analytics is a solid choice:

Since we’re talking about a free plugin, there are no hidden premium features to speak of. Although Beehive Analytics is a robust solution, it’s also missing some more advanced functionality, such as e-commerce tracking and goals reporting. However, if you only want access to core metrics, we recommend giving this plugin a try.

Download Beehive Analytics for free

Frequently Asked Questions (FAQs)

Free WordPress site speed eBook

Speed eBook to improve Core Web Vitals

Download our Free Speed eBook to get the 12-step checklist on achieving load times under 1 second!

Get the Download
FREE EBOOK

Wrapping Up

Using an analytics tool for your website is not negotiable. Without a service such as Google Analytics, you’re essentially flying blind. You may know how much traffic you’re getting, but you’ll miss out on a wealth of information about your visitors’ behavior, where they come from, and how well your SEO efforts are working

Learning how to add Google Analytics to WordPress is easier than you might imagine. You can do so manually or using a plugin. As is often the case, the latter is the better approach. As for what plugins to use, there are plenty of top options, including Google Analytics for WordPress by MonsterInsights and Site Kit by Google.

If you want help setting up Google Analytics for your website, we have your back. A WP Buffs, we can help you find the Google Analytics solution that works best for your needs and integrate it with your WordPress website. With our premium maintenance services, you’ll always have access to the critical metrics that you want to monitor.

Want to give your feedback or join the conversation? Add your comments  on Twitter!

Image credit: Unsplash.