18 Best WordPress Restaurant Themes For Your Cafe (2017)

Are you looking for WordPress restaurant themes? Restaurant websites have specific requirements to showcase their menu, photos, location, business hours, and other useful information. In this article, we have hand-picked some of the best WordPress themes for restaurants. Building a Restaurant Website with WordPress WordPress… Read More »

The post 18 Best WordPress Restaurant Themes For Your Cafe (2017) appeared first on WPBeginner.

Are you looking for WordPress restaurant themes? Restaurant websites have specific requirements to showcase their menu, photos, location, business hours, and other useful information. In this article, we have hand-picked some of the best WordPress themes for restaurants.

Best WordPress Restaurant Themes

Building a Restaurant Website with WordPress

WordPress is the most flexible and easy to use platform to build your restaurant website. It gives you access to dozens of payment platforms, third-party addons, thousands of templates and plugins. See our article on why you should use WordPress for more details.

You will need a self-hosted WordPress.org site to take advantage of all the powerful features of a WordPress site. See our guide on the difference between WordPress.com vs self-hosted WordPress.org site.

To start your restaurant website, you will need a WordPress hosting account. This is where your website will live on the internet. You will also need a domain name, which will be your website’s address on the internet such as wpbeginner.com.

We recommend using Bluehost. They are one of the largest hosting companies in the world and also one of the official WordPress hosting partner.

Next you will need to install WordPress. If you want step by step instructions, you can follow our guide on how to start a WordPress blog.

After the installation, you can pick a theme from our expert selection below and then follow instructions in our how to install a WordPress theme article.

Now let’s take a look at some of the best WordPress restaurant themes. This list includes both free and paid WordPress themes. All themes in the list are mobile responsive.

1. Delicio

Delicio

Delicio is a premium WordPress theme for restaurants. It comes with menu and location sections and supports WooCommerce out of box. It is compatible with restaurant reservation plugin allowing you to accept online reservations on your website.

The theme features large full screen header, bold call to action buttons, easy to use customization panel, and a live drag and drop page builder.

2. Rezo

Rezo

Rezo is a bold yet elegant WordPress restaurant theme. It features a responsive slider, stylish restaurant menu, and Google Maps support.

It also comes with a lightbox gallery which allows you to beautifully display photos. Set up is easy by using the easy to use theme options panel.

3. Seasons

Seasons

Seasons is an elegantly designed WordPress theme for restaurants, bars, cafes, and other food related websites. It comes with an easy to use restaurant menu page which is easy to setup using widgets as module.

Apart from that, it comes with all the features you would expect from a premium WordPress theme. Unique slider, easy theme options, quick setup, custom headers and styling.

4. Molino

Molino

Molino is a stylish WordPress theme for restaurants, coffee shops, and cafes. It features a very modern and hip look and comes with powerful features like page builder, layouts, content modules, events calendar, and much more.

It has Google Maps and contact form support built-in, which allows your users to easily find you. There are 5 color schemes ready to use and you can also choose your own color schemes.

5. Resto

Resto

Resto restaurant theme for WordPress comes with a powerful restaurant menu post type. Allowing you to easily add and update menu items. This beautiful premium theme comes with powerful features like drag and drop homepage builder, custom widgets, layouts, color choices, etc.

It comes with a very easy to use control panel allowing you to enable or disable features, upload logo, setup social networking, and much more.

6. Petit

Petit

Petit is a bright colored WordPress restaurant theme. It comes with beautiful layouts for recipe pages and custom shortcodes for a food related website.

It has a featured content slider, custom widgets, multiple color choices, and out of box support for multilingual websites.

7. Igloo

Igloo

Igloo is a modern WordPress restaurant theme with large featured images, beautiful typography, and powerful features. It comes with a built-in restaurant menu management system, reservations, custom widgets, sliders, galleries, and testimonials.

It has an easy to use theme options panel and it supports many of the most popular WordPress page builders.

8. Chinese Restaurant

Chinese Restaurant

Chinese Restaurant is a WordPress theme for all kind of restaurants. It takes design inspiration from Chinese cuisine, hence the name.

It comes with a powerful drag and drop page builder. Allowing you to easily drop content modules to build your pages. The theme also has built-in menu management, appointments, restaurant menu management, galleries and much more.

9. Downtown

Downtown

Downtown is a multi-purpose WordPress restaurant theme that can also be used for food blogging, restaurant reviews, bars, cafes, etc.

It comes with Google Maps, contact form, services, testimonials, staff profiles, and events calendar. You can use any colors to create your own color schemes, use custom backgrounds, and headers to make the theme truly yours.

10. Italica

Italica

Inspired by the Italian cuisine, Italica is a gorgeous WordPress theme for restaurants, cafes, and bars. It comes with 6 ready to use skins and comes with a powerful drag and drop builder. There are multiple layout choices and you can even create your own custom layouts.

It comes with appointment management system, restaurant menu builder, and many custom widgets. It is easy to setup and allows you to customize theme using live preview.

11. Restaurantz

Restaurantz

Restaurantz is a free WordPress restaurant theme. It has a beautiful layout with large slider, call to action, and it utilizes theme customizer for all theme options.

It supports the powerful free page builder by SiteOrigin and restaurant menu support can be added using free third party plugins.

12. Bettaso

Bettaso

Beattaso is a premium WordPress cafe and restaurant theme. It comes with drag and drop page builder, appointment manager, and restaurant menu section.

It has multiple colors, layout, and skins which allow you to truly customize the theme. It also supports Google Fonts, Google Maps for locations, and has tons of premium theme features.

13. Bakes and Cakes

Bakes and Cakes

This beautifully designed WordPress theme is free and suitable for stylish restaurants and cafes. It comes with testimonial section, Product section, about section, team section, banner, and Call to action section etc.

It is compatible with popular free restaurant menu plugins, and it supports WooCommerce out of the box. The theme is also translation ready and can be used on multilingual websites as well.

14. Cafe Pro

Cafe Pro

Cafe Pro is built on top of the powerful Genesis theme framework by StudioPress. It comes with a rock solid foundation and great set of features for a premium WordPress restaurant theme.

Theme homepage layout can be easily customized using the four widgetized areas. You get an easy to use theme options panel and custom widgets that allow you to easily show contact info, address, business hours, etc.

15. Greek Restaurant

Greek Restaurant

Greek Restaurant is a free WordPress restaurant theme. Built on top of Twitter’s bootstrap framework, this theme is fully responsive and looks good on all devices.

It comes with custom header, full width pages, shortcodes and a restaurant reservation system that allows you to accept reservations from your customers.

16. Mise En Place

Mise En Place

Mise En Place is a stunningly beautiful WordPress theme for restaurants. It comes with a menu management system, page builder, and WooCommerce support.

Among other features, it supports large header images, custom widgets, shortcodes, Google Fonts integration, and live theme customizer.

17. Umami

Umami

Umami is a stylish restaurant theme for WordPress. It features a unique fullscreen layout with prominent call to action. Each post and page can have its own unique background.

The theme also comes with an easy to use restaurant menu management system. You can easily add menu items with images that open in a lightbox. It comes with custom widgets, shortcodes, Google Fonts, slideshow, and tons of other premium theme features.

18. Moonrise

Moonrise

Moonrise is a gorgeous WordPress restaurant theme. It features large header backgrounds, slideshows, shortcodes, and multiple customizable sections.

It comes with built in support for food menu, services, slideshow, contact widget, and contact blocks. It is easy to customize and translation ready out of the box.

We hope this article helped you find the best WordPress restaurant theme for your website. You may also want to see our list of 24 must have WordPress plugins for business websites.

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 18 Best WordPress Restaurant Themes For Your Cafe (2017) appeared first on WPBeginner.

18 Best WordPress Restaurant Themes For Your Cafe (2017)

Are you looking for WordPress restaurant themes? Restaurant websites have specific requirements to showcase their menu, photos, location, business hours, and other useful information. In this article, we have hand-picked some of the best WordPress themes for restaurants. Building a Restaurant Website with WordPress WordPress… Read More »

The post 18 Best WordPress Restaurant Themes For Your Cafe (2017) appeared first on WPBeginner.

Are you looking for WordPress restaurant themes? Restaurant websites have specific requirements to showcase their menu, photos, location, business hours, and other useful information. In this article, we have hand-picked some of the best WordPress themes for restaurants.

Best WordPress Restaurant Themes

Building a Restaurant Website with WordPress

WordPress is the most flexible and easy to use platform to build your restaurant website. It gives you access to dozens of payment platforms, third-party addons, thousands of templates and plugins. See our article on why you should use WordPress for more details.

You will need a self-hosted WordPress.org site to take advantage of all the powerful features of a WordPress site. See our guide on the difference between WordPress.com vs self-hosted WordPress.org site.

To start your restaurant website, you will need a WordPress hosting account. This is where your website will live on the internet. You will also need a domain name, which will be your website’s address on the internet such as wpbeginner.com.

We recommend using Bluehost. They are one of the largest hosting companies in the world and also one of the official WordPress hosting partner.

Next you will need to install WordPress. If you want step by step instructions, you can follow our guide on how to start a WordPress blog.

After the installation, you can pick a theme from our expert selection below and then follow instructions in our how to install a WordPress theme article.

Now let’s take a look at some of the best WordPress restaurant themes. This list includes both free and paid WordPress themes. All themes in the list are mobile responsive.

1. Delicio

Delicio

Delicio is a premium WordPress theme for restaurants. It comes with menu and location sections and supports WooCommerce out of box. It is compatible with restaurant reservation plugin allowing you to accept online reservations on your website.

The theme features large full screen header, bold call to action buttons, easy to use customization panel, and a live drag and drop page builder.

2. Rezo

Rezo

Rezo is a bold yet elegant WordPress restaurant theme. It features a responsive slider, stylish restaurant menu, and Google Maps support.

It also comes with a lightbox gallery which allows you to beautifully display photos. Set up is easy by using the easy to use theme options panel.

3. Seasons

Seasons

Seasons is an elegantly designed WordPress theme for restaurants, bars, cafes, and other food related websites. It comes with an easy to use restaurant menu page which is easy to setup using widgets as module.

Apart from that, it comes with all the features you would expect from a premium WordPress theme. Unique slider, easy theme options, quick setup, custom headers and styling.

4. Molino

Molino

Molino is a stylish WordPress theme for restaurants, coffee shops, and cafes. It features a very modern and hip look and comes with powerful features like page builder, layouts, content modules, events calendar, and much more.

It has Google Maps and contact form support built-in, which allows your users to easily find you. There are 5 color schemes ready to use and you can also choose your own color schemes.

5. Resto

Resto

Resto restaurant theme for WordPress comes with a powerful restaurant menu post type. Allowing you to easily add and update menu items. This beautiful premium theme comes with powerful features like drag and drop homepage builder, custom widgets, layouts, color choices, etc.

It comes with a very easy to use control panel allowing you to enable or disable features, upload logo, setup social networking, and much more.

6. Petit

Petit

Petit is a bright colored WordPress restaurant theme. It comes with beautiful layouts for recipe pages and custom shortcodes for a food related website.

It has a featured content slider, custom widgets, multiple color choices, and out of box support for multilingual websites.

7. Igloo

Igloo

Igloo is a modern WordPress restaurant theme with large featured images, beautiful typography, and powerful features. It comes with a built-in restaurant menu management system, reservations, custom widgets, sliders, galleries, and testimonials.

It has an easy to use theme options panel and it supports many of the most popular WordPress page builders.

8. Chinese Restaurant

Chinese Restaurant

Chinese Restaurant is a WordPress theme for all kind of restaurants. It takes design inspiration from Chinese cuisine, hence the name.

It comes with a powerful drag and drop page builder. Allowing you to easily drop content modules to build your pages. The theme also has built-in menu management, appointments, restaurant menu management, galleries and much more.

9. Downtown

Downtown

Downtown is a multi-purpose WordPress restaurant theme that can also be used for food blogging, restaurant reviews, bars, cafes, etc.

It comes with Google Maps, contact form, services, testimonials, staff profiles, and events calendar. You can use any colors to create your own color schemes, use custom backgrounds, and headers to make the theme truly yours.

10. Italica

Italica

Inspired by the Italian cuisine, Italica is a gorgeous WordPress theme for restaurants, cafes, and bars. It comes with 6 ready to use skins and comes with a powerful drag and drop builder. There are multiple layout choices and you can even create your own custom layouts.

It comes with appointment management system, restaurant menu builder, and many custom widgets. It is easy to setup and allows you to customize theme using live preview.

11. Restaurantz

Restaurantz

Restaurantz is a free WordPress restaurant theme. It has a beautiful layout with large slider, call to action, and it utilizes theme customizer for all theme options.

It supports the powerful free page builder by SiteOrigin and restaurant menu support can be added using free third party plugins.

12. Bettaso

Bettaso

Beattaso is a premium WordPress cafe and restaurant theme. It comes with drag and drop page builder, appointment manager, and restaurant menu section.

It has multiple colors, layout, and skins which allow you to truly customize the theme. It also supports Google Fonts, Google Maps for locations, and has tons of premium theme features.

13. Bakes and Cakes

Bakes and Cakes

This beautifully designed WordPress theme is free and suitable for stylish restaurants and cafes. It comes with testimonial section, Product section, about section, team section, banner, and Call to action section etc.

It is compatible with popular free restaurant menu plugins, and it supports WooCommerce out of the box. The theme is also translation ready and can be used on multilingual websites as well.

14. Cafe Pro

Cafe Pro

Cafe Pro is built on top of the powerful Genesis theme framework by StudioPress. It comes with a rock solid foundation and great set of features for a premium WordPress restaurant theme.

Theme homepage layout can be easily customized using the four widgetized areas. You get an easy to use theme options panel and custom widgets that allow you to easily show contact info, address, business hours, etc.

15. Greek Restaurant

Greek Restaurant

Greek Restaurant is a free WordPress restaurant theme. Built on top of Twitter’s bootstrap framework, this theme is fully responsive and looks good on all devices.

It comes with custom header, full width pages, shortcodes and a restaurant reservation system that allows you to accept reservations from your customers.

16. Mise En Place

Mise En Place

Mise En Place is a stunningly beautiful WordPress theme for restaurants. It comes with a menu management system, page builder, and WooCommerce support.

Among other features, it supports large header images, custom widgets, shortcodes, Google Fonts integration, and live theme customizer.

17. Umami

Umami

Umami is a stylish restaurant theme for WordPress. It features a unique fullscreen layout with prominent call to action. Each post and page can have its own unique background.

The theme also comes with an easy to use restaurant menu management system. You can easily add menu items with images that open in a lightbox. It comes with custom widgets, shortcodes, Google Fonts, slideshow, and tons of other premium theme features.

18. Moonrise

Moonrise

Moonrise is a gorgeous WordPress restaurant theme. It features large header backgrounds, slideshows, shortcodes, and multiple customizable sections.

It comes with built in support for food menu, services, slideshow, contact widget, and contact blocks. It is easy to customize and translation ready out of the box.

We hope this article helped you find the best WordPress restaurant theme for your website. You may also want to see our list of 24 must have WordPress plugins for business websites.

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 18 Best WordPress Restaurant Themes For Your Cafe (2017) appeared first on WPBeginner.

How to Clear Your Cache in WordPress

Recently, one of our readers asked us how to clear cache in WordPress? Your web browser, server, and caching plugins installed on your website can all serve cached content which can make it difficult for you to see the changes you made to your site… Read More »

The post How to Clear Your Cache in WordPress appeared first on WPBeginner.

Recently, one of our readers asked us how to clear cache in WordPress? Your web browser, server, and caching plugins installed on your website can all serve cached content which can make it difficult for you to see the changes you made to your site right away. In this article, we will show you how to properly clear your cache in WordPress.

How to clear cache in WordPress

What is Cache and When Do You Need to Clear Cache?

Caching solutions store a static version of your website. This allows WordPress to skip running the heavier PHP scripts and improves your website performance.

How caching works in WordPress

There are many different type of caching solutions available. The most popular ones are WordPress caching plugins like WP Super Cache and W3 Total Cache.

These plugins offer an easy to use interface for controlling what to cache, when to expire cached content, and cleaning up cache on demand.

Managed WordPress hosting providers like WPEngine also run their own caching solutions, so that you don’t have to install a caching plugin.

If you are using a CDN service like MaxCDN, then they would also serve cached copies of static content.

If you’re using a web application firewall like Sucuri or CloudFlare to improve your WordPress security, then they also have their own cache to speed up your site and reduce downtime.

Lastly, your browser may also store cached versions of pages on your computer.

The purpose of caching is to speed up your website and improve the overall user experience. However, sometimes this causes you to not see the changes you make right away which can be frustrating. In that case, you will need to clear caches to see your changes.

Having said that, let’s take a look at how to clear your cache in WordPress.

Step 1: Clear Your Browser Cache

First, you need to clear your web browser cache. Most web browsers can store static content like stylesheets, JavaScript, images from a website to make your subsequent visits faster.

However, sometimes web browsers may fail to realize that a web page has changed. Instead of fetching a fresh copy, they may still reload the page from the cached version store on your computer.

Here is how you will clean your browser cache in Google Chrome. First you need to click on the menu icon and then select More Tools » Clear Browsing Data.

Clear cache in Google Chrome

This will bring up a popup where you can select the content you want to remove. Make sure that cached images and files is checked and then click on ‘Clear browsing data’ button.

Clear browsing data in Google Chrome

You have successfully cleared your browser cache, and you can now try visiting your website.

If you are still not seeing the changes you made, then move on to the next steps in this article.

For other web browsers see their respective documentations on how to clear browser cache.

Step 2: Clear Cache in Your WordPress Caching Plugin

If you are using a WordPress caching plugin on your site, then you need to clear your plugin cache. Most caching plugins allow you to easily do that from the plugin’s settings page.

Clear Cache in WP Super Cache

WP Super Cache is the most popular WordPress caching plugin. It allows you to clean or purge all cached content with a single click.

You need to visit Settings » WP Super Cache page and click on ‘Delete Cache’ button.

Delete cache in WP Super Cache

That’s all, WP Super Cache will now delete all cached files from your website.

Clear Cache in W3 Total Cache

W3 Total Cache is another popular WordPress caching plugin. It also makes it super easy to clear cache with one click.

Head over to Performance » Dashboard page and click on ’empty all caches button.

Empty cache in W3 Total Cache

W3 Total Cache will now delete all cached content for your site.

Clear Cache on WPEngine

WPEngine is a managed WordPress hosting provider. They run their own caching solution, so their customers don’t need to install a caching plugin.

If you are unable to notice changes take effect immediately, then you can easily clear WPEngine cache from your WordPress admin area.

You need to click on the WPEngine menu item in the admin bar and then under ‘General’ settings click on purge all caches button.

Clear WPEngine cache

WPEngine will now purge all stored cache for your WordPress site.

Clear Cache in Sucuri

If you’re using a web application firewall like Sucuri to protect your website, then they also have their own layer of caching.

You can clear the cache from your Sucuri plugin by going to Sucuri » WAF menu in your WordPress admin area.

Sucuri Clear Cache

We hope this article helped you learn how to clear cache in WordPress. You may also want to see our guide on how to boost WordPress speed and performance.

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 Clear Your Cache in WordPress appeared first on WPBeginner.

How to add Awesome Typography in WordPress with Typekit

Have you ever wondered how designers are able to use beautiful custom web fonts on their sites? Often they’re adding custom fonts to WordPress using Typekit, an Adobe service that gives you access to high quality fonts. In this article, we’ll show you how to add Typekit fonts in… Read More »

The post How to add Awesome Typography in WordPress with Typekit appeared first on WPBeginner.

Have you ever wondered how designers are able to use beautiful custom web fonts on their sites? Often they’re adding custom fonts to WordPress using Typekit, an Adobe service that gives you access to high quality fonts. In this article, we’ll show you how to add Typekit fonts in WordPress to improve your typography.

Typekit Fonts in WordPress

Why Use Typekit Fonts?

Typekit is a popular subscription-based font service that can save you a lot of money. Instead of paying for individual font licenses, which can get quite expensive, you can access their whole library of hundreds of fonts for free or for a flat yearly rate.

The Typekit library is a massive collection of over 1,000 fonts. Some of the most beautiful fonts that you can find on the web are available through Typekit, an Adobe service.

Their basic free plan comes with access to 230+ fonts, and you can use 2 font families on one website for free. Other plans start from $49.99 to $99.99 per year.

These awesome Typekit fonts can be easily added to any website without slowing down your page load speeds. The fonts are served from Adobe’s CDN and load at much faster speeds than if you were to host them on your own site.

Typekit for WordPress Video Tutorial

If you don’t like the video or need more instructions, then you can continue reading below.

Why Use Custom Web Fonts on WordPress?

Typography plays a crucial role in the design of your site.

Choosing the right fonts will clearly communicate your personality and message to your readers. No matter what kind of image you want to portray — professional, friendly, casual, experienced — the fonts on your website can help project the right image.

By using the right set of fonts, you can leave a lasting impression. Instead of looking like every other site on the web, your text looks noticeably different. Selecting the proper font for your WordPress site can make your website go from a simple design to an aesthetically pleasing and stunning work of art.

The right custom web fonts can:

  • increase conversion rates
  • lower your site’s bounce rate
  • increase time spent on your website
  • create a memorable experience for users

Ready to get started with Typekit fonts? Here’s how to use Typekit to customize your WordPress design.

How to Get Started With Typekit

First you’ll need to create a Typekit account. To do this, just visit Typekit.com to compare the available plans.

You’ll need to choose which plan you want to sign up for. The free plan limits you to one website and includes access to limited fonts. You may want to get started with the free plan to try it out, and then upgrade later on. The upgrade gives you a larger library of fonts, and you can use them on more websites.

Typekit Subscription Plans

The next step is creating a kit. The kit lets you put together a specific library of fonts and settings for your website, so Typekit loads only the files and code needed. To create your kit, add your site name and domain name and then click on Continue.

Creating a kit for your site

After you’re done filling out your information for your kit, Typekit will give you a bit of JavaScript code to add to your site. You can copy and paste this code in a text editor like Notepad to save it for now. We’ll add it to your site in the next step of this tutorial.

For now, you can get started choosing your fonts. You can browse the font library and filter by options like classification, weight, width, x-height, and more.

Choosing a font from Typekit library

When you see a font you like, you can click on it for more details and examples. If you’d like to add it to your web kit, click the Web Use: Add to Kit button on the right side.

add a typekit font to your web kit

This will bring up a pop-up where you need to add the font you selected to the kit you just created.

adding your custom web font to a kit

Now you can click the Publish button to save the changes to your kit.

publish your kit to save your changes

That’s all! Your font kit is now ready to use.

Adding Your Typekit Fonts in WordPress

The easiest way to add your new custom web fonts to your WordPress blog is by using a WordPress Typekit plugin.

We recommend the Typekit Fonts for WordPress plugin. After installing and activating the plugin, you can visit Settings » Typekit Fonts to configure the plugin.

using a wordpress typekit plugin to customize fonts

First you’ll need to paste the JavaScript code you saved earlier in the Typekit embed code field. After that, you can add CSS selectors to specify where you want to use the font on your site.

In the screenshot above we added the font to the h1.site-title CSS selector.

Your WordPress theme may use different classes for different elements. You’ll need to use the Inspect Element tool in your web browser to find out those CSS classes. You may also want to checkout our WordPress generated CSS cheat sheet for beginners to help you get started.

Using Inspect Element tool in Google Chrome to find CSS classes

That’s all! We hope this article helped you learn how to add awesome typography in WordPress with Typekit. You may also want to take a look at our guide on how to add Google web fonts in your WordPress themes.

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 Awesome Typography in WordPress with Typekit appeared first on WPBeginner.

How to add Awesome Typography in WordPress with Typekit

Have you ever wondered how designers are able to use beautiful custom web fonts on their sites? Often they’re adding custom fonts to WordPress using Typekit, an Adobe service that gives you access to high quality fonts. In this article, we’ll show you how to add Typekit fonts in… Read More »

The post How to add Awesome Typography in WordPress with Typekit appeared first on WPBeginner.

Have you ever wondered how designers are able to use beautiful custom web fonts on their sites? Often they’re adding custom fonts to WordPress using Typekit, an Adobe service that gives you access to high quality fonts. In this article, we’ll show you how to add Typekit fonts in WordPress to improve your typography.

Typekit Fonts in WordPress

Why Use Typekit Fonts?

Typekit is a popular subscription-based font service that can save you a lot of money. Instead of paying for individual font licenses, which can get quite expensive, you can access their whole library of hundreds of fonts for free or for a flat yearly rate.

The Typekit library is a massive collection of over 1,000 fonts. Some of the most beautiful fonts that you can find on the web are available through Typekit, an Adobe service.

Their basic free plan comes with access to 230+ fonts, and you can use 2 font families on one website for free. Other plans start from $49.99 to $99.99 per year.

These awesome Typekit fonts can be easily added to any website without slowing down your page load speeds. The fonts are served from Adobe’s CDN and load at much faster speeds than if you were to host them on your own site.

Typekit for WordPress Video Tutorial

If you don’t like the video or need more instructions, then you can continue reading below.

Why Use Custom Web Fonts on WordPress?

Typography plays a crucial role in the design of your site.

Choosing the right fonts will clearly communicate your personality and message to your readers. No matter what kind of image you want to portray — professional, friendly, casual, experienced — the fonts on your website can help project the right image.

By using the right set of fonts, you can leave a lasting impression. Instead of looking like every other site on the web, your text looks noticeably different. Selecting the proper font for your WordPress site can make your website go from a simple design to an aesthetically pleasing and stunning work of art.

The right custom web fonts can:

  • increase conversion rates
  • lower your site’s bounce rate
  • increase time spent on your website
  • create a memorable experience for users

Ready to get started with Typekit fonts? Here’s how to use Typekit to customize your WordPress design.

How to Get Started With Typekit

First you’ll need to create a Typekit account. To do this, just visit Typekit.com to compare the available plans.

You’ll need to choose which plan you want to sign up for. The free plan limits you to one website and includes access to limited fonts. You may want to get started with the free plan to try it out, and then upgrade later on. The upgrade gives you a larger library of fonts, and you can use them on more websites.

Typekit Subscription Plans

The next step is creating a kit. The kit lets you put together a specific library of fonts and settings for your website, so Typekit loads only the files and code needed. To create your kit, add your site name and domain name and then click on Continue.

Creating a kit for your site

After you’re done filling out your information for your kit, Typekit will give you a bit of JavaScript code to add to your site. You can copy and paste this code in a text editor like Notepad to save it for now. We’ll add it to your site in the next step of this tutorial.

For now, you can get started choosing your fonts. You can browse the font library and filter by options like classification, weight, width, x-height, and more.

Choosing a font from Typekit library

When you see a font you like, you can click on it for more details and examples. If you’d like to add it to your web kit, click the Web Use: Add to Kit button on the right side.

add a typekit font to your web kit

This will bring up a pop-up where you need to add the font you selected to the kit you just created.

adding your custom web font to a kit

Now you can click the Publish button to save the changes to your kit.

publish your kit to save your changes

That’s all! Your font kit is now ready to use.

Adding Your Typekit Fonts in WordPress

The easiest way to add your new custom web fonts to your WordPress blog is by using a WordPress Typekit plugin.

We recommend the Typekit Fonts for WordPress plugin. After installing and activating the plugin, you can visit Settings » Typekit Fonts to configure the plugin.

using a wordpress typekit plugin to customize fonts

First you’ll need to paste the JavaScript code you saved earlier in the Typekit embed code field. After that, you can add CSS selectors to specify where you want to use the font on your site.

In the screenshot above we added the font to the h1.site-title CSS selector.

Your WordPress theme may use different classes for different elements. You’ll need to use the Inspect Element tool in your web browser to find out those CSS classes. You may also want to checkout our WordPress generated CSS cheat sheet for beginners to help you get started.

Using Inspect Element tool in Google Chrome to find CSS classes

That’s all! We hope this article helped you learn how to add awesome typography in WordPress with Typekit. You may also want to take a look at our guide on how to add Google web fonts in your WordPress themes.

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 Awesome Typography in WordPress with Typekit appeared first on WPBeginner.

Three FREE Training Courses on ASP.NET Core from Microsoft Virtual Academy

This time last year we did a Microsoft Virtual Academy class on what was then called “ASP.NET 5.” It made sense to call it 5 since 5 > 4.6, right? But since then ASP.NET 5 has become .NET Core 1.0 and ASP.NET Core 1.0. It’s 1.0 because it’s smaller, newer, and different. As the .NET “full” framework marches on, on Windows, .NET Core is cross-platform and for the cloud.

Command line concepts like dnx, dnu, and dnvm have been unified into a single “dotnet” driver. You can download .NET Core at http://dot.net and along with http://code.visualstudio.com you can get a web site up and running in 10 minutes on Windows, Mac, or many flavors of Linux.

So, we’ve decided to update and refresh our Microsoft Virtual Academy. In fact, we’ve done three days of training. Introduction, Intermediate, and Cross-Platform and all three days are now available! We just released training for ASP.NET Core 1.0 Cross-Platform that shows Mac, Ubuntu, and Docker!

Head over to Microsoft Virtual Academy and watch our new, free “Introduction to ASP.NET Core 1.0.” It’s a great relaxed pace if you’ve been out of the game for a bit, or you’re a seasoned .NET “Full” developer who has avoided learning .NET Core thus far. If you don’t know the C# language yet, check out our online C# tutorial first, then watch the video.

Introduction to ASP.NET Core 1.0

Join experts Scott Hanselman and Maria Naggaga, and find out how to build .NET Core applications on any operating system. Bring your web development expertise and roll up your sleeves, for this first in a three-part series.

image

Intermediate ASP.NET Core 1.0

Want a deeper dive into ASP.NET Core 1.0? Build on what you learned in Introduction to ASP.NET Core 1.0, and explore this new technology even further, as Scott Hanselman, Jeff Fritz, and Rowan Miller offer an in-depth, intermediate-level look at ASP.NET Core 1.0.

Intermediate ASP.NET Core 1.0

ASP.NET Core 1.0 Cross-Platform

Ready to build and deploy ASP.NET Core 1.0 apps? Join experts Scott Hanselman, Maria Naggaga, and Glenn Condron, and see how to do just that using Mac and Linux. Revisit content from the Introduction to ASP.NET Core 1.0 course, but using a Mac and Linux.

image

Do us a favor when you watch these, rate them (5 stars!) and SHARE them on your social networks.

NOTE: There’s a LOT of quality free courseware for learning .NET Core and ASP.NET Core. We’ve put the best at http://asp.net/free-courses and I encourage you to check them out!

Hope you have as much fun with these courses as we had creating them!


Sponsor: Do you deploy the same application multiple times for each of your end customers? The team at Octopus have taken the pain out of multi-tenant deployments. Check out their latest 3.4 release


© 2016 Scott Hanselman. All rights reserved.
     

This time last year we did a Microsoft Virtual Academy class on what was then called "ASP.NET 5." It made sense to call it 5 since 5 > 4.6, right? But since then ASP.NET 5 has become .NET Core 1.0 and ASP.NET Core 1.0. It's 1.0 because it's smaller, newer, and different. As the .NET "full" framework marches on, on Windows, .NET Core is cross-platform and for the cloud.

Command line concepts like dnx, dnu, and dnvm have been unified into a single "dotnet" driver. You can download .NET Core at http://dot.net and along with http://code.visualstudio.com you can get a web site up and running in 10 minutes on Windows, Mac, or many flavors of Linux.

So, we've decided to update and refresh our Microsoft Virtual Academy. In fact, we've done three days of training. Introduction, Intermediate, and Cross-Platform and all three days are now available! We just released training for ASP.NET Core 1.0 Cross-Platform that shows Mac, Ubuntu, and Docker!

Head over to Microsoft Virtual Academy and watch our new, free "Introduction to ASP.NET Core 1.0." It's a great relaxed pace if you've been out of the game for a bit, or you're a seasoned .NET "Full" developer who has avoided learning .NET Core thus far. If you don't know the C# language yet, check out our online C# tutorial first, then watch the video.

Introduction to ASP.NET Core 1.0

Join experts Scott Hanselman and Maria Naggaga, and find out how to build .NET Core applications on any operating system. Bring your web development expertise and roll up your sleeves, for this first in a three-part series.

image

Intermediate ASP.NET Core 1.0

Want a deeper dive into ASP.NET Core 1.0? Build on what you learned in Introduction to ASP.NET Core 1.0, and explore this new technology even further, as Scott Hanselman, Jeff Fritz, and Rowan Miller offer an in-depth, intermediate-level look at ASP.NET Core 1.0.

Intermediate ASP.NET Core 1.0

ASP.NET Core 1.0 Cross-Platform

Ready to build and deploy ASP.NET Core 1.0 apps? Join experts Scott Hanselman, Maria Naggaga, and Glenn Condron, and see how to do just that using Mac and Linux. Revisit content from the Introduction to ASP.NET Core 1.0 course, but using a Mac and Linux.

image

Do us a favor when you watch these, rate them (5 stars!) and SHARE them on your social networks.

NOTE: There's a LOT of quality free courseware for learning .NET Core and ASP.NET Core. We've put the best at http://asp.net/free-courses and I encourage you to check them out!

Hope you have as much fun with these courses as we had creating them!


Sponsor: Do you deploy the same application multiple times for each of your end customers? The team at Octopus have taken the pain out of multi-tenant deployments. Check out their latest 3.4 release



© 2016 Scott Hanselman. All rights reserved.
     

How to Add a Privacy Policy in WordPress

Do you want to add a privacy policy on your WordPress site? Privacy policy is a document required by law that discloses the information you collect about visitors on your website. In this article, we will show you how to easily add a privacy policy… Read More »

The post How to Add a Privacy Policy in WordPress appeared first on WPBeginner.

Do you want to add a privacy policy on your WordPress site? Privacy policy is a document required by law that discloses the information you collect about visitors on your website. In this article, we will show you how to easily add a privacy policy in WordPress.

How to add a privacy policy page in WordPress

What is Privacy Policy and Do You Need it on Your Website?

All websites collect information about their visitors in different ways. In many countries (including the United States), websites are required by law to disclose the information they collect about their visitors and how this information is used.

Here are some of the ways in which a typical WordPress site collects user information.

All websites on the internet should have a privacy policy page. It protects your business from legal issues and also helps build consumer trust.

What to Include in a Privacy Policy?

The basic requirements for a privacy policy are quite simple. You need to list all the ways you collect or intend to collect user information on your website.

A simple privacy policy page should contain the following information:

  • Information you collect about users visiting your website.
  • Methods used to collect information, e.g. cookies and web beacons, sign up, registration, comment forms, etc.
  • Mention all third-party advertisers collecting user information on your website like Google Adsense.
  • Include links to the privacy policy of each advertising program you participate in
  • How users can block cookies and opt-out of third party advertisements
  • Your contact information so that users can reach out if they have questions

There are many websites on the internet that allow you to automatically generate text for your privacy policy or terms of service pages.

You can also use WPBeginner’s privacy policy page as an starting point. Simply replace all references to WPBeginner and our parent company with the name of your website or business.

Adding a Privacy Policy Page in WordPress

First you need to visit Pages » Add New in your WordPress admin area to create your new privacy policy page.

You should name your page Privacy Policy, so that your users immediately know what this page is about.

Creating a new privacy policy page in WordPress

Next, you need to add the text for your privacy policy page. You can copy the text of our privacy policy page or use an online privacy policy generator.

You can even use a plugin like Auto Terms of Service and Privacy Policy to generate the content.

Don’t forget to add your own contact information and business name before hitting the publish button.

Adding Link to Privacy Policy Page in WordPress

Most websites display link to their privacy policy page in the footer area of their website. This way the link appears on every page but is not taking space in your main navigation menu.

There are multiple ways to do this. You can simply add the link to your theme’s footer.php file. If this is your first time editing a WordPress theme file, then take a look at our guide on how to copy paste code in WordPress.

<a href="http://example.com/privacy-policy">Privacy Policy</a>

Many WordPress themes have widget areas in the footer. You can add a custom menu widget with the link to your privacy policy page in this area.

First, you will need to visit Appearance » Menus page and create a new custom menu. See our beginner’s guide on how to add navigation menu in WordPress for detailed instructions.

Creating a new custom menu

Don’t forget to click on the save menu button to save your new menu.

After creating your menu head over to Appearance » Widgets page. You will notice ‘Custom Menu’ widget under the list of available widgets.

Add this widget to your footer widget area. See our guide on how to add and use widgets in WordPress.

Add custom menu widget

You will need to select the custom menu you created earlier in the widget settings and then click on the save button.

That’s all, you have successfully added a privacy policy page to your WordPress site.

Privacy policy link in the footer

We hope this article helped you learn how to add a privacy policy in WordPress. You may also want to see our step by step WordPress SEO guide for beginners.

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 a Privacy Policy in WordPress appeared first on WPBeginner.

An Inferno on the Head of a Pin

Today’s processors contain billions of heat-generating transistors in an ever shrinking space. The power budget might go from:

  • 1000 watts on a specialized server
  • 100 watts on desktops
  • 30 watts on laptops
  • 5 watts on tablets
  • 1 or 2 watts on a phone
  • 100 milliwatts on an embedded system

That’s

Today's processors contain billions of heat-generating transistors in an ever shrinking space. The power budget might go from:

  • 1000 watts on a specialized server
  • 100 watts on desktops
  • 30 watts on laptops
  • 5 watts on tablets
  • 1 or 2 watts on a phone
  • 100 milliwatts on an embedded system

That's three orders of magnitude. Modern CPU design is the delicate art of placing an inferno on the head of a pin.

Look at the original 1993 Pentium compared to the 20th anniversary Pentium:

Intel Pentium 66 1993
Pentium
66 Mhz
16kb L1
3.2 million transistors
Intel Pentium G3258 20th Anniversary Edition 2014
Pentium G3258
3.2 Ghz
2 core / 4 thread
128kb L1, 512kb L2, 3MB L3
1.4 billion transistors

I remember cooling the early CPUs with simple heatsinks; no fan. Those days are long gone.

A roomy desktop computer affords cooling opportunities (and thus a watt budget) that a laptop or tablet could only dream of. How often will you be at peak load? For most computers, the answer is "rarely". The smaller the space, the higher the required performance, the more … challenging your situation gets.

Sometimes, I build servers.

Inspired by Google and their use of cheap, commodity x86 hardware to scale on top of the open source Linux OS, I also built our own servers. When I get stressed out, when I feel the world weighing heavy on my shoulders and I don't know where to turn … I build servers. It's therapeutic.

Servers are one of those situations where you may be at full CPU load more often than not. I prefer to build 1U servers which is the smallest rack mountable unit, at 1.75" total height.

As you can get so many cores on a die these days, I only build single CPU servers. One reason is price; the other reason is that clock speed declines proportionally to the number of cores on a die (this is for the Broadwell Xeon V4 series):

coresGHz
E5-163043.7$406
E5-165063.6$617
E5-168083.4$1723
E5-2680122.4$1745
E5-2690142.6$2090
E5-2697182.3$2702

Yes, there are server CPUs with even more cores, but if you have to ask how much they cost, you definitely can't afford them … and they're clocked even slower. What we do is serviced better by a smaller number of super fast cores than a larger number of slow cores, anyway.

With that in mind, consider these two Intel Xeon server CPUs:

As you can see from the official Intel product pages for each processor, they both have a TDP of 140 watts. I'm scanning the specs, thinking maybe this is an OK tradeoff.

Unfortunately, here's what I actually measured with my trusty Kill-a-Watt for each server build as I performed my standard stability testing, with completely identical parts except for the CPU:

  • E5-1630: 40w idle, 170w mprime
  • E5-1650: 55w idle, 250w mprime

I am here to tell you that Intel's TDP figure of 140 watts for the 6 core version of this CPU is a terrible, scurrilous lie!

This caused a little bit of a problem for me as our standard 1U server build now overheats, alarms, and throttles with the 6 core CPU — whereas the 4 core CPU was just fine. Hey Intel! From my home in California, I stab at thee!

But, you know..

Better Heatsink

The 1.75" maximum height of the 1U server form factor doesn't leave a lot of room for creative cooling of a CPU. But you can switch from an Aluminum cooler to a Copper one.

Copper is not usually all that necessary; it is significantly more expensive than aluminum, so it's usually cheaper to throw a larger mass of aluminum at the cooling problem when you can. But copper dissipates more heat in the same form factor when space is a constraint, which it definitely is in a 1U case.

The famous "Ninja" CPU cooler came in copper and aluminum versions so we can compare apples to apples. At 12v (max fan speed):

  • Aluminum Ninja had 24C rise over ambient
  • Copper Ninja had 17C rise over ambient

You can scale the load and the resulting watts of heat by spinning up MPrime threads for the number of cores you want to "activate", so that's how I tested. And each run has to be overnight to be considered successful!

  • Aluminum heatsink — stable at 170w (mprime threads=4), but heat warnings with 190w (mprime threads=5).
  • Copper heatsink — stable at 190w (mprime threads=5) but heat warnings with 230w (mprime threads=6).

This helped, noticeably. But we need more.

Better Thermal Interface

When it comes to server builds, I stick with the pre-applied grey thermal interface pad that comes on the heatsinks. But out of boredom and a desire to experiment, I …

  • Removed the copper heatsink.
  • Used isopropyl alcohol to clean both CPU and heatsink.
  • Applied fancy "Ceramique" thermal compound I have on hand, using an X shape pattern.

I wasn't expecting any change at all, but to my surprise with the new TIM applied it took about 2-3x as long to reach throttle temps with mprime threads=6. Before, it would thermally throttle within a minute of launching the test, and after it took ~10 minutes to reach that same throttle temp. The difference was noticeable.

That's a surprisingly good outcome, and it tells us the default grey goop that comes pre-installed on heatsinks is ... not great. Per this 2011 test, the difference between worst and best thermal compounds is 4.3°C.

But as Dan once bravely noted while testing Vegemite as a thermal interface material:

If your PC's so marginal that a CPU running three or four degrees Celsius warmer will crash it [or, for modern CPUs, cause the processor to auto-throttle itself and substantially reduce system performance], the solution is not to try to edge away from the precipice with better thermal compound. It's to make a big change to the cooling system, or just lower the darn clock speed.

An improved thermal interface just gets you there faster (or slower); it doesn't address the underlying problem. So we're not done here.

Ducted Airflow

Most, but not all, of the SuperMicro cases I've used have included a basic fan duct / shroud that lays across the central fans and the system. Given that the case fans are pretty much directly in front of the CPU anyway, I've included the shroud in the builds out of a sense of completeness more than any conviction that it was doing something for the cooling performance.

This particular server case, though, did not include a fan duct. I didn't think much about it at the time, but given the overheating problem this 6-core CPU and its 250 watt heat generation was putting on our 1U build, I decided I should build a quick card stock duct and test it out.

(I know, I know, it's a super janky duct! But I was prototyping!)

Sure enough, this duct, combined with the previous heatsink and TIM changes, enabled the server to remain stable overnight with a full MPrime run of 12 threads.

I think we've certainly demonstrated the surprising (to me, at least) value of fan shrouds. But before we get too excited, let's consider one last thing.

Define "CPU Load"

Sometimes you get so involved with solving the problem at hand that you forget to consider whether you are, in fact, solving the right problem.

In these tests, we defined 100% CPU load using MPrime. Some people claim MPrime is more of a power virus than a real load test, because it exerts so much heat pressure on the CPUs. I initially dismissed these claims since I've used MPrime (and its Windows cousin, Prime95) for almost 20 years to test CPU stability, and it's never let me down.

But I did more research and I found that MPrime, since 2011, uses AVX2 instructions extensively on newer Intel CPUs:

The newer versions of Prime load in a way that they are only safe to run at near stock settings. The server processors actually downclock when AVX2 is detected to retain their TDP rating. On the desktop we're free to play and the thing most people don't know is how much current these routines can generate. It can be lethal for a CPU to see that level of current for prolonged periods.

That's why most stress test programs alternate between different data pattern types. Depending on how effective the rotation is, and how well that pattern causes issues for the system timing margin, it will, or will not, catch potential for instability. So it's wise not to hang one's hat on a single test type.

This explains why I saw such a large discrepancy between other CPU load programs like BurnP6 and MPrime.

MPrime does an amazing job of generating the type of CPU load that causes maximum heat pressure. But unless your servers regularly chew through zillions of especially power-hungry AVX2 instructions this may be completely unrepresentative of any real world load your server would actually see.

Your Own Personal Inferno

Was this overkill? Probably. Even with the aluminum heatsink, no change to thermal interface material, and zero ducting, we'd probably see no throttling under normal use in our server rack. But I wanted to be sure. Completely sure.

Is this extreme? Putting 140 TDP of CPU heat in a 1U server? Not really. Nick at Stack Overflow told me they just put two 22 core, 145W TDP Xeon 2699v4 CPUs and four 300W TDP GPUs in a single Dell C4130 1U server. I'd sure hate to be in the room when those fans spin up. I'm also a little afraid to find out what happens if you run MPrime plus full GPU load on that box.

Servers are an admittedly extreme example of CPU performance heat and size tradeoffs, one of the few left. It is fun to play at the extremes, but the SoC inside your phone makes the same tradeoffs on a smaller scale. Tiny infernos in our pockets, each and every one.

[advertisement] At Stack Overflow, we put developers first. We already help you find answers to your tough coding questions; now let us help you find your next job.

How to Change the Default Gravatar on WordPress

Do you want to change the default Gravatar on your WordPress site? By adding your own default gravatar image, you can make your comments section branded. In this article, we will show you how to change the default gravatar in WordPress and replace it with… Read More »

The post How to Change the Default Gravatar on WordPress appeared first on WPBeginner.

Do you want to change the default Gravatar on your WordPress site? By adding your own default gravatar image, you can make your comments section branded. In this article, we will show you how to change the default gravatar in WordPress and replace it with your own custom default gravatar image.

How to change default gravatar image in WordPress

What is Default Gravatar and Why Change it?

Gravatar is a web service created and run by WordPress co-founder Matt Mullenweg’s company called Automattic. It allows anyone to create a profile and associate avatar images to their email addresses.

This avatar image is then displayed on all WordPress blogs where users leave comments or write blog posts. For more details see our guide on What is gravatar and why you should start using it right away.

All WordPress sites come with built-in support for gravatars and automatically show users’ avatars when they write posts or leave comments.

However, if a user doesn’t have a gravatar image, then WordPress automatically shows the default gravatar image. The default option is to show an image called mystery man. It looks like this:

Default mystery person gravatar in WordPress

If you don’t want to use the mystery man as default image, then you can change it to your own branded image.

Having said that, let’s see how you can change the default gravatar image on your WordPress site, so you can use a custom default gravatar image.

Changing Default Gravatar Image in WordPress

First, you need to visit Settings » Discussion page and scroll down to Avatars section. This is where you can configure and change gravatar settings on your WordPress site.

Gravatar settings in WordPress

You will notice that there are a few choices available under the default avatar option. These avatars are used when a user does not have a gravatar associated with their email address.

Out of the box WordPress uses the mystery person icon as the default gravatar. You can change that to blank or gravatar logo.

There are few other options available as well. These are automatically generated images in different designs. These images use comment author’s name or email address to mathematically generate a unique gravatar image.

Don’t forget to click on the save changes button after changing your default gravatar.

Using Custom Default Gravatar Image in WordPress

WordPress also allows you to use your own default gravatar images. Here is how you can easily add your own custom default gravatar image in WordPress.

First you need to create an image that you want to use as the default gravatar. This image should be a square, like 250×250 pixels.

Next, you need to upload this image to your WordPress site. Head over to Media » Add New and upload your custom default gravatar image.

Upload and edit custom default gravatar image

After the image is uploaded, you need to click on the Edit link next to the image.

WordPress will now open your image for editing. You need to just copy the image file URL and paste it in a plain text editor like Notepad.

Copy file URL

Now you need to add some code to your WordPress site. If you haven’t done this before, then please take a look at our guide on how to copy paste code in WordPress.

Add the following code to your theme’s functions.php file or a site-specific plugin.

add_filter( 'avatar_defaults', 'wpb_new_gravatar' );
function wpb_new_gravatar ($avatar_defaults) {
$myavatar = 'http://example.com/wp-content/uploads/2017/01/wpb-default-gravatar.png';
$avatar_defaults[$myavatar] = "Default Gravatar";
return $avatar_defaults;
}

Don’t forget to replace $myavatar value to the URL of the custom gravatar image you uploaded earlier.

You can now visit Settings » Discussion page and you will notice your custom default avatar added to default avatar choices.

Custom default gravatar image

Select your custom default avatar image, and then click on the save changes button.

WordPress will now use your image for users who don’t have their gravatar associated with their email addresses.

Custom default avatar image in WordPress

We hope this article helped you learn how to change the default gravatar on WordPress. You may also want to see our guide on how to set custom avatars for users 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 Change the Default Gravatar on WordPress appeared first on WPBeginner.

How to Change the Default Gravatar on WordPress

Do you want to change the default Gravatar on your WordPress site? By adding your own default gravatar image, you can make your comments section branded. In this article, we will show you how to change the default gravatar in WordPress and replace it with… Read More »

The post How to Change the Default Gravatar on WordPress appeared first on WPBeginner.

Do you want to change the default Gravatar on your WordPress site? By adding your own default gravatar image, you can make your comments section branded. In this article, we will show you how to change the default gravatar in WordPress and replace it with your own custom default gravatar image.

How to change default gravatar image in WordPress

What is Default Gravatar and Why Change it?

Gravatar is a web service created and run by WordPress co-founder Matt Mullenweg’s company called Automattic. It allows anyone to create a profile and associate avatar images to their email addresses.

This avatar image is then displayed on all WordPress blogs where users leave comments or write blog posts. For more details see our guide on What is gravatar and why you should start using it right away.

All WordPress sites come with built-in support for gravatars and automatically show users’ avatars when they write posts or leave comments.

However, if a user doesn’t have a gravatar image, then WordPress automatically shows the default gravatar image. The default option is to show an image called mystery man. It looks like this:

Default mystery person gravatar in WordPress

If you don’t want to use the mystery man as default image, then you can change it to your own branded image.

Having said that, let’s see how you can change the default gravatar image on your WordPress site, so you can use a custom default gravatar image.

Changing Default Gravatar Image in WordPress

First, you need to visit Settings » Discussion page and scroll down to Avatars section. This is where you can configure and change gravatar settings on your WordPress site.

Gravatar settings in WordPress

You will notice that there are a few choices available under the default avatar option. These avatars are used when a user does not have a gravatar associated with their email address.

Out of the box WordPress uses the mystery person icon as the default gravatar. You can change that to blank or gravatar logo.

There are few other options available as well. These are automatically generated images in different designs. These images use comment author’s name or email address to mathematically generate a unique gravatar image.

Don’t forget to click on the save changes button after changing your default gravatar.

Using Custom Default Gravatar Image in WordPress

WordPress also allows you to use your own default gravatar images. Here is how you can easily add your own custom default gravatar image in WordPress.

First you need to create an image that you want to use as the default gravatar. This image should be a square, like 250×250 pixels.

Next, you need to upload this image to your WordPress site. Head over to Media » Add New and upload your custom default gravatar image.

Upload and edit custom default gravatar image

After the image is uploaded, you need to click on the Edit link next to the image.

WordPress will now open your image for editing. You need to just copy the image file URL and paste it in a plain text editor like Notepad.

Copy file URL

Now you need to add some code to your WordPress site. If you haven’t done this before, then please take a look at our guide on how to copy paste code in WordPress.

Add the following code to your theme’s functions.php file or a site-specific plugin.

add_filter( 'avatar_defaults', 'wpb_new_gravatar' );
function wpb_new_gravatar ($avatar_defaults) {
$myavatar = 'http://example.com/wp-content/uploads/2017/01/wpb-default-gravatar.png';
$avatar_defaults[$myavatar] = "Default Gravatar";
return $avatar_defaults;
}

Don’t forget to replace $myavatar value to the URL of the custom gravatar image you uploaded earlier.

You can now visit Settings » Discussion page and you will notice your custom default avatar added to default avatar choices.

Custom default gravatar image

Select your custom default avatar image, and then click on the save changes button.

WordPress will now use your image for users who don’t have their gravatar associated with their email addresses.

Custom default avatar image in WordPress

We hope this article helped you learn how to change the default gravatar on WordPress. You may also want to see our guide on how to set custom avatars for users 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 Change the Default Gravatar on WordPress appeared first on WPBeginner.