25 Popular Sites Using WordPress as a CMS in 2020

Wondering how you can use WordPress as a CMS?

One of the most common misconceptions about WordPress is that it is just a blogging software. Some of you often ask us for examples of WordPress being used as a CMS Platform (Content Management System) and not just as a blog platform.

There are thousands of websites using WordPress as a content management system. WordPress is highly flexible and easy to customize even for beginners.

In this article, we will show you some of the most popular websites that are using WordPress as a CMS.

Why WordPress is The Most Popuplar CMS?

WordPress is the most popular website builder and content management system in the world. It has a market share of 35% of websites on the internet.

With WordPress, you can make a website, start a blog, or create an online store. It comes with thousands of free and premium plugins that work as addons to extend the features and functionality on your site.

Most websites use WordPress for its flexibility, easy-to-use admin panel, and thousands of themes / templates. You can set up a WordPress site quickly without writing any code.

Let’s take a look at some of the examples of websites using WordPress as a CMS.

1. BBC America

BBC America is a popular entertainment site that broadcasts several British TV shows like The Graham Norton Show, Top Gear, Doctor Who, and more. The site uses WordPress as a content management system and offers features that include full episodes, live TV, and user registration.

2. OptinMonster

OptinMoster is the leading conversion optimization software in the world. They use WordPress for different parts of their website including marketing site, blog, knowledgebase, and more.

3. WPForms

WPForms is the most popular WordPress contact form plugin. The website is built on WordPress with a shopping cart, knowledgebase, blog, and more features.

4. The Next Web

The Next Web is a tech and news website using WordPress to display the most recent news from all over the world. It showcases the news into categories and sections, and also offers the latest deals from popular international brands.

5. The Walt Disney Company

One of the biggest names in the media industry, The Walt Disney Company uses WordPress for its corporate website. The website offers users recent updates about company events, career opportunities, philanthropy efforts, and more.

6. Van Heusen

Van Heusen is an American fashion and clothing brand popular all over the globe. It is using WordPress with a shopping cart, newsletter subscriptions, and product galleries.

7. United States Mission Geneva

The U.S. Mission in Geneva is a US State Department website built with WordPress. It has multiple sections for image slider, the latest news, events, and policy pages.

8. Fauna and Flora International

Fauna and Flora International (FFI) is the forest conservation innovator known for their work on conserving different species globally. The site uses WordPress as a CMS to showcase its conservation campaigns, share news updates, and collect donations.

9. Sweden’s Official Site

Sweden’s Official Site is the country’s official information portal that shares news related to business, culture, traditions, nature, facts, and society. It is built on WordPress and utilizes it in a very effective way.

10. Nexstar Media

Nexstar Media is a local media site that uses WordPress as a content management system. It features news broadcasting, press releases, and more.

11. Chicago Weather Center

Chicago Weather Center is a weather forecast site that displays temperatures and other weather updates. It uses WordPress to add a TV schedule, podcasts, shows, events, news, and more on the site.

12. Creative Ad Awards

Creative Ad Awards is a website showcasing the most creative ads from around the globe. It uses WordPress to categorize and beautifully display those ad campaigns.

13. Harvard University Gazette

Harvard University Gazette which is managed by the Harvard University using WordPress as a CMS for their journal. The website looks stunning where you can find news and events organized in categories.

14. The Official James Bond Website

The official James Bond website uses WordPress to showcase their watch collection, display brand news, and promote Bond movies. The site also integrates with social networks to showcase Twitter feed in the sidebar.

15. Realtor.com | News

Realtor is a popular real estate website. It uses WordPress for its news and insights section. They use the WordPress RSS feed to fetch and display the blog content across other parts of their website.

16. Gnome

Gnome is an open-source software suite for Linux based operating systems. They use WordPress for their marketing site, which showcases features, software, and technologies sections.

17. PawPrintPets

PawPrintPets is a website for dog and puppy owners who want to get training, consultation, and classes. Using WordPress as a CMS, the website also offers podcasts, blog, and a WooCommerce powered online store.

18. CURE

CURE is an international organization offering medical aid to children in underdeveloped regions. It uses WordPress for their site to share case studies, news, stories, and fundraising.

19. Renault

Renault is one of the top car manufacturers in the world. Their official website is built on WordPress where they post about innovation, history, brands, and more.

20. Katy Perry

Katy Perry is a well-known American singer and songwriter. Her official site is using WordPress to display the latest albums, songs, and video releases.

21. Sony Music

Sony Music is the official website of the global music brand. It uses WordPress to display their featured artists, labels, and news from the music industry.

22. Hip2Save

Hip2Save is a well-known deals and coupons website. It is built on WordPress to showcase discounts from popular brands from all over the world.

23. Time.com

TIME is one of the oldest American news and magazine website. The site uses WordPress to post news in categories, embed YouTube videos, and publish weekly magazines.

24. Sylvester Stallone

Sylvester Stallone is a popular actor and public figure known for his work in movies. His official website uses WordPress to showcase movie trailers, actor’s bio, photos, art, and more.

25. The Washington Post | Brand Studio

The Washington Post is a leading investigative journalism website that shares news on politics, public opinions, and more. It is using WordPress for their Brand Studio website that showcases their interactive stories.

We hope this article helped you find some inspiring examples of WordPress being used as a CMS. You may also want to take a look at our list of 40+ big name brands using WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 25 Popular Sites Using WordPress as a CMS in 2020 appeared first on WPBeginner.

March 13, 2020 at 05:00PM

How to Add Custom Fonts in WordPress

Do you want to add custom fonts in WordPress? Custom fonts allow you to use beautiful combination of different fonts on your website to improve typography and user experience.

Apart from looking good, custom fonts can also help you improve readability, create a brand image, and increase time users spend on your website.

In this article, we will show you how to add custom fonts in WordPress using Google Fonts, TypeKit, and CSS3 @Font-Face method.

Note: Loading too many fonts can slow down your website. We recommend choosing two fonts and use them across your website. We’ll also show you how to properly load them without slowing down your website.

Before we look at how to add custom fonts in WordPress, let’s take a look at finding custom fonts that you can use.

How to Find Custom Fonts to Use in WordPress

Fonts used to be expensive, but not any more. There are many places to find great free web fonts such as Google Fonts, Typekit, FontSquirrel, and fonts.com.

If you don’t know how to mix and match fonts, then try Font Pair. It helps designers pair beautiful Google fonts together.

As you are picking your fonts, remember that using too many custom fonts will slow down your website. This is why you should select two fonts and use them throughout your design. This will also bring consistency to your design.

Video Tutorial

If you don’t like the video or prefer the written guide, then please continue reading.

Adding Custom Fonts in WordPress from Google Fonts

Google Fonts is the largest, free, and most commonly used font library among website developers. There are multiple ways you can add and use Google Fonts in WordPress.

Method 1: Adding Custom Fonts Using Easy Google Fonts Plugin

If you want to add and use Google Fonts on your website, then this method is by far the easiest and recommended for beginners.

First thing you need to do is install and activate the Easy Google Fonts plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you can go to Appearance » Customizer page. This will open the live theme customizer interface where you’ll see the new Typography section.

Clicking on Typography will you show different sections of your website where you can apply Google Fonts. Simply click on ‘Edit Font’ below the section you want to edit.

Under the font family section, you can choose any Google Font you want to use on your website. You can also choose font style, font size, padding, margin, and more.

Depending on your theme, the number of sections here could be limited and you may not be able to directly change font selection for many different areas of your website.

To fix this, the plugin also allows you to create your own controls and use them to change fonts on your website.

First, you need to visit Settings » Google Fonts page and provide a name for your font control. Use something that helps you quickly understand where you will be using this font control.

Next, click on the ‘Create font control’ button and then you will be asked to enter CSS selectors.

You can add HTML elements you want to target (for instance, h1, h2, p, blockquote) or use CSS classes.

You can use Inspect tool in your browser to find out which CSS classes are used by the particular area you want to change.

Now click on the ‘Save font control’ button to store your settings. You can create as many font controllers as you need for different sections of your website.

To use these font controllers, you need to head over to Appearance » Customizer and click on the Typography tab.

Under Typography, you will now see a ‘Theme Typography’ Option as well. Clicking on it will show your custom font controls you created earlier. You can now just click on the edit button to select the fonts and appearance for this control.

Don’t forget to click on the save or publish button to save your changes.

Method 2: Manually Add Google Fonts in WordPress

This method requires you to add code to your WordPress theme files. If you haven’t done this before, then see our guide on how to copy and paste code in WordPress.

First, visit the Google fonts library and select a font that you want to use. Next, click on the quick use button below the font.

On the font page, you’ll see the styles available for that font. Select the styles that you want to use in your project and then click on the sidebar button at the top.

Next, you will need to switch to the ‘Embed’ tab in the sidebar to copy the embed code.

There are two ways you can add this code to your WordPress site.

First, you can simply edit your theme’s header.php file and paste the code before the <body> tag.

However, if you are unfamiliar with code editing in WordPress, then you can use a plugin to add this code.

Simply install and activate the Insert Headers and Footers plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, go to Settings » Insert Headers and Footers page and paste the embed code in the ‘Scripts in header’ box.

Don’t forget to click on the Save button to store your changes. The plugin will now start loading the Google Font embed code on all pages of your website.

You can use this font in your theme’s stylesheet like this:

.h1 site-title { 
font-family: 'Open Sans', Arial, sans-serif; 
}

For more detailed instructions see our guide on how to add Google fonts in WordPress themes.

Adding Custom Fonts in WordPress Using Typekit

Typekit by Adobe Fonts is another free and premium resource for awesome fonts that you can use in your design projects. They have a paid subscription as well as a limited free plan that you can use.

Simply signup for an Adobe Fonts account and visit the browse fonts section. From here you need to click on the </> button to select a font and create a project.

Next, you’ll see the embed code with your project ID. It will also show you how to use the font in your theme’s CSS.

You need to copy and paste this code inside the <head> section of your website.

There are two ways you can add this code to your WordPress site.

First, you can simply edit your theme’s header.php file and paste the code before the <body> tag.

However, if you are unfamiliar with code editing in WordPress, then you can use a plugin to add this code.

Simply install and activate the Insert Headers and Footers plugin.

Upon activation, go to Settings » Insert Headers and Footers page and paste the embed code in the ‘Scripts in header’ box.

That’s all, you can now use the Typekit font you selected in your WordPress theme’s stylesheet like this:

h1 .site-title { 
font-family: gilbert, sans-serif;
} 

For more detailed instructions check out our tutorial how to add awesome typography in WordPress using Typekit.

Adding Custom Fonts in WordPress Using CSS3 @font-face

The most direct way of adding custom fonts in WordPress is by adding the fonts using CSS3 @font-face method. This method allows you to use any font that you like on your website.

First thing you need to do is download the font that you like in a web format. If you do not have the web format for your font, then you can convert it using the FontSquirrel Webfont generator.

Once you have the webfont files, you would need to upload it on your WordPress hosting server.

The best place to upload the fonts is inside a new “fonts” folder in your theme or child theme‘s directory.

You can use FTP or File Manager of your cPanel to upload the font.

Once you have uploaded the font, you need to load the font in your theme’s stylesheet using CSS3 @font-face rule like this:

@font-face {
        font-family: Arvo;  
        src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);  
        font-weight: normal;  
}

Don’t forget to replace the font-family and URL with your own.

After that you can use that font anywhere in your theme’s stylesheet like this:

.h1 site-title { 
font-family: "Arvo", Arial, sans-serif; 
}

Loading fonts directly using CSS3 @font-face is not always the best solution. If you are using a font from Google Fonts or Typekit, then it is best to serve the font directly from their server for optimal performance.

That’s all, we hope this article helped you add custom fonts in WordPress. You may also want to checkout our guide on how to use icon fonts in WordPress and how to change the font size in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Custom Fonts in WordPress appeared first on WPBeginner.

March 12, 2020 at 05:00PM

How to Bulk Convert Classic Blocks to Gutenberg in WordPress

Several of our readers have asked how to convert old WordPress post content into the new Gutenberg (block) format in WordPress.

After you update to any version above WordPress 5.0, your older post and page content will show up inside a Classic block in the new WordPress content editor.

To convert the content into individual blocks, you would need to edit each post and page separately. If you have dozens or hundreds of posts, then this can take a lot of time. Thankfully, there’s a bulk convert option.

In this article, we will show you how to bulk convert classic blocks to individual Gutenberg blocks in WordPress.

Understanding the “Classic” Block

If you installed WordPress before version 5.0 came out, the posts and pages you created used the old or Classic editor.

When you upgrade WordPress to version 5.0 or later, all your old posts and pages still need to be editable. This means that WordPress automatically places the content for those posts and pages inside a single “Classic” block:

This makes sure that your old posts and pages are still editable, and they look the same on the front-end of your website even if you don’t convert the content into individual blocks.

However, if you want you can convert them from a single classic block into the new multi-block format used by the WordPress block editor.

The Classic block contains all the post content, such as images, embeds, text, and more. You can go to any of the old posts on your site to see how the Classic block looks.

If you select the block by clicking on it, you can see the block type. This appears just above the block in the top left-hand corner and also in the Block settings on the right-hand side.

You can edit the content in the Classic block. Most users, though, will want to update their old posts to the new block format for ease of editing.

We covered this process in detail in our article on how to update your old WordPress posts with the Gutenberg block editor, but let’s quickly recap.

To convert an individual Classic block into new Gutenberg blocks, you can click the ‘More Options’ button (three dots in a vertical line), and then click ‘Convert to Blocks’.

Your post will then be converted into separate blocks. As you can see, the text and images have been separated here. The text is in the new ‘Paragraph’ block.

This process is quick and straightforward for a single post. However, WordPress doesn’t have a built-in way to do it automatically for every post.

If you want to switch a lot of posts to the new Gutenberg block format at once, then you’ll need a bulk converter plugin.

Bulk Convert Classic Block into Gutenberg Blocks

First, you need to install and activate the Bulk Block Converter plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, go to Tools » Block Conversion in your WordPress dashboard. You’ll see the following screen:

Tip: Make sure you create a complete WordPress backup of your site before using the bulk block converter. You cannot undo the conversion once it’s taken place.

To start, click the ‘Scan Content’ button and the converter will find all your content that’s ready for conversion.

Note: Posts that use a mix of Classic blocks and other blocks won’t be picked up by the converter.

If you want to convert all the content on your site at once, simply click the large ‘Bulk Convert All’ button at the top of the screen.

You’ll see a warning like this. Go ahead and click ‘OK’ to continue.

If you don’t want to convert everything at once, that’s fine too. You can filter the list by ‘Post Type’ (posts or pages). You can also switch to the ‘Published’ or ‘Drafts’ lists to see only that set of posts.

You can select everything on your list by clicking the checkbox to the left of ‘Title’. We’ll filter our list to show pages, not posts, and then select all of them:

You can even select individual posts and pages by clicking on the checkbox to the left of their title.

Note that if you use this method, you won’t see the warning before the conversion takes place. Once each piece of content is converted, you’ll see ‘Converted’ listed next to it in the table.

Important Tip About Shortcodes

One snag you might run into is that the Bulk Block Conversion tool doesn’t convert shortcodes. It’ll create a shortcode block for you, but you’ll need to put the shortcode itself back in manually.

If you’re using shortcodes, then make sure you note them down before running the bulk converter. Otherwise, it could take a while to figure out which shortcodes you need to put back and where to place them.

We hope this article helped you learn how to bulk convert classic blocks to Gutenberg in WordPress. You may also want to see our comparison of the best WordPress drag & drop page builders and the best WordPress contact form plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Bulk Convert Classic Blocks to Gutenberg in WordPress appeared first on WPBeginner.

March 11, 2020 at 05:36PM

How to Fix WordPress Login Page Refreshing and Redirecting Issue

We often get messages from our users that their WordPress login page keeps refreshing and redirecting. This locks them out of the WordPress admin area, and they are unable to work on their website.

Login issues can be caused by various different errors such as error establishing database connection, internal server error or white screen of death.

Another type of login error is when your WordPress login page keeps refreshing and redirecting it back to the login screen. In this article, we will show you how to fix the WordPress login page refreshing and redirecting issue.

If you are going to try the advanced steps mentioned in this WordPress tutorial, then please create a back up of your site. See our guide on how to manually create WordPress database backup.

Video Tutorial

If you don’t like the video or prefer the written version instead, then please continue reading.

What Causes Login Page Refresh and Redirect Issue in WordPress?

Incorrect WordPress URL settings and failure to set login cookies are the most common reasons causing the login page redirect and refresh issue.

Normally, when you login, WordPress validates your username and password and then sets a login cookie in your browser. After that, it redirects you to the WordPress admin area.

If WordPress fails to set the login cookie correctly, or your WordPress admin area URL is incorrect, then you’ll be redirected back to the login page instead of the admin dashboard.

That being said, let’s troubleshoot and fix the WordPress login page redirect and refresh issue.

Clear Cookies to Resolve Login Issues

WordPress uses cookies for login authentication, so the first step in troubleshooting WordPress login issues is the simplest one. Clear your browser cookies and cache.

In Google Chrome, click on the browser settings menu and then select More Tools » Clear Browsing Data.

This will launch the Chrome Settings page with ‘Clear Browsing Data’ popup displayed on the screen.

From here, you need to select ‘Clear cookies and other site data’ and ‘Cached images and files’ options.

Next, click on the ‘Clear data’ button and Google Chrome will clear the browser cache.

Also, make sure that your browser has cookies enabled. After doing that restart your browser and then try to login. This should fix the issue for most folks.

We have a complete guide with screenshots showing how to clear cache and cookies in all major browsers.

Update WordPress URL Settings

WordPress comes with a settings option that has the URL of your website and the URL of your WordPress installation.

If you had access to your WordPress admin area, then you could see this option under Settings » General page.

If these URLs are incorrect, then WordPress will redirect you back to the login page.

Now, since you are unable to access the WordPress admin area, you’ll need to edit the wp-config.php file to fix this issue.

The wp-config.php file is a special file in WordPress which contains your important WordPress settings. You can access using an FTP client or via File Manager app in your WordPress hosting account dashboard.

You’ll find the wp-config.php file in your site’s root folder. Simply edit the file and paste the following code just before the line that says ‘That’s all, stop editing! Happy publishing’.

define('WP_HOME','https://www.example.com');
define('WP_SITEURL','https://www.example.com');

Don’t forget to replace example.com with your own domain name.

After that save your changes and upload the file back to your website.

You can now visit your website and try to log in and hopefully, this would have fixed the issue for you.

If it didn’t, then continue reading for additional steps.

Delete .htaccess File in WordPress

Sometimes .htaccess file can get corrupted which can result in internal server errors or login page refreshing error.

Simply access your website through an FTP client or via the File Manager app in your hosting account dashboard.

Once connected, locate the .htaccess file in the root folder of your website and download it to your computer as backup.

After that, go ahead and delete the .htaccess file from your website.

Next, open the wp-admin directory and if there is a .htaccess file there, then go ahead and delete it as well.

You can now try to log in to your WordPress website. If you succeed, then this means that your .htaccess file was stopping you from logging into WordPress.

Once you are logged in, simply go to Settings » Permalinks page in WordPress admin area and click on the Save button without making any changes. This will generate a new .htaccess file for your website.

Deactivate All WordPress Plugins

Sometimes WordPress plugins can cause this issue especially if there is a conflict between two plugins.

To deactivate all your WordPress plugins, connect to your website using an FTP client or via the File Manager app in your hosting account dashboard.

Once connected, go to the /wp-content/ directory. Inside it, you’ll see a folder named ‘plugins’. This is where WordPress installs all your plugins.

Simply rename the plugins folder to plugins_backup. This will deactivate all WordPress plugins installed on your website.

We also have a detailed tutorial on how to deactivate all WordPress plugins when unable to access WP-Admin.

Once you have deactivated all plugins, try to logging in to your WordPress site. If you succeed, then this means that one of your plugins was causing the issue.

Revert Back to the Default Theme

WordPress themes can also cause conflicts after upgrading to a newer version of WordPress or the theme itself. To find out whether the problem is being caused by your theme, you need to deactivate your theme.

The process is similar to deactivating the plugins. Connect to your website using an FTP client. Go to /wp-content/themes/ directory and rename your current theme directory to themes_backup.

Once you have done that, then try logging in again. If you succeed, then this means your theme was causing the issue.

You can now reinstall a fresh copy of your theme to see if this resolves the issue. If the issue reappears, then contact your theme’s support or switch to a different WordPress theme.

We hope this article helped you resolve the WordPress login page refreshing and redirecting issues. You may also want to see our WordPress troubleshooting guide with step by step instructions on how to fix WordPress errors on your own.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Fix WordPress Login Page Refreshing and Redirecting Issue appeared first on WPBeginner.

March 10, 2020 at 02:00PM