Posted on

How to Edit a WordPress Website (Ultimate Guide)

Are you a new WordPress.org user who wants to learn how to edit your WordPress site?

Here at WPBeginner, we have helped millions of beginners build their websites using WordPress, which is the most popular website builder on the market. If you need help with editing your website, then you have come to the right place.

In this article, we will show you the basics of editing a WordPress website.

How to Edit a WordPress Website (Ultimate Guide)

An Overview of Ways to Edit a WordPress Site

As an open-source content management system, WordPress has a lot of features to build and edit your website.

If you installed WordPress recently, then you may have come across Gutenberg, which is WordPress’s drag-and-drop block editor that allows you to customize a page or post. This feature is pretty easy and beginner-friendly.

The Gutenberg block editor interface

You may have also seen the Full Site Editor.

This is an extension of Gutenberg that lets you use the block editor to customize block-based WordPress themes.

The WordPress Full Site Editor

That said, if you use a classic, non-block WordPress theme, then the FSE won’t be available to you. Instead, you will have to use the WordPress Theme Customizer.

This feature doesn’t come with a drag-and-drop function, so it’s not as user-friendly. You have to edit your theme using some menu settings in the left-hand panel.

Using the WordPress Theme Customizer to edit a transportation and logistics website

If you need more customization options that aren’t available in WordPress’s built-in features, then you can install a page builder plugin like SeedProd.

This is what we usually recommend to WordPress beginners. Like Gutenberg, SeedProd has a drag-and-drop feature. However, it offers more ways to get creative, like animation effects and more content block options to build your pages.

Editing the online coaching business theme in SeedProd

Some WordPress users also use the Classic Editor. It’s WordPress’s legacy page and post editor that looks a bit like a document editor.

This feature is no longer enabled by default in the latest WordPress versions. However, some people still use it because they are more familiar with it and want to keep their current website designs.

The Classic Editor Interface

In this article, we will show you how to edit different parts of your WordPress website using the editors we’ve mentioned.

We will also assume that you have WordPress installed and set up already. Otherwise, you will need a WordPress hosting plan, domain name, and WordPress installation.

Want to skip to a specific section in this tutorial? Feel free to use these quick links below:

How to Edit a WordPress Theme

One of the first things you should do after installing WordPress is to choose and customize your theme. We will show you 3 ways to do that.

Customizing a Block Theme With the Full Site Editor

Full Site Editing was introduced in WordPress 5.9. It’s designed to make it easy to edit WordPress block themes using the block editor.

One tell-tale sign that you are using a block WordPress theme is you will see Appearance » Editor in your WordPress admin area. If you see Appearance » Customize instead, then you can skip to using the Theme Customizer.

Clicking Appearance Editor in the WordPress admin

To use the Full Site Editor, you will need to have a block theme installed. You can find plenty of them in our list of the best block WordPress themes for Full Site Editing.

If you want to find some free options, go to Appearance » Themes. Then, click ‘Add New Theme.’

Adding a new WordPress theme in the admin area

After that, just switch to the ‘Block Themes’ tab.

You will then see dozens of block themes on your screen. For installation instructions, check out our step-by-step guide on how to install a WordPress theme.

Finding WordPress block themes in the admin area

Once you have the theme installed, you must go to Appearance » Editor.

Now, you will see the main Full Site Editing dashboard. You can then edit your theme’s navigation menu, styles, pages, templates, and patterns.

We will discuss these topics in the rest of the tutorial, but we will show you briefly how to change the style of your theme.

To do this, click the ‘Styles’ menu.

Clicking Styles in the Full Site Editing interface

Now, you will see a list of the color scheme and typography pairings provided by the theme.

Every time you click on a style, the interface will preview it for you.

Choosing a theme style in the Full Site Editor

Once you are satisfied with your choice, just click ‘Save.’ Alternatively, you can create a custom style.

You can learn more about this and other ways to use the Full Site Editor in our beginner’s guide to WordPress Full Site Editing.

Customizing a Classic Theme With the Theme Customizer

If you use a classic WordPress theme, then you will work with the Theme Customizer to edit it. Simply head to Appearance » Customize from the WordPress admin area to access it.

Opening the WordPress theme customizer

Now, what you can customize here varies by the theme you are using.

For instance, if you have the Astra theme, then you can customize the style of your entire website, header, footer, sidebar, page, logo, and so on.

For this reason, we recommend reading your theme’s documentation for more instructions.

What the Theme Customizer looks like for Astra theme

Our guide on the Theme Customizer can give you more detailed pointers.

Once you’ve made your changes, you can preview the website in different screen resolutions. Then, you can hit the ‘Publish’ button at the top to make your edits live.

Publishing a classic WordPress theme in the Theme Customizer

One downside of the Theme Customizer is its user experience isn’t as flexible or easy as the block editor. If you feel this way, then we recommend using the next method instead.

Customizing a WordPress Theme With a Page Builder Plugin

Many WordPress users who aren’t satisfied with the platform’s built-in design features use a page builder to edit their site. This is a WordPress plugin that can replace the default editor for designing different parts of your website.

Most page builders come with a drag-and-drop functionality, so they are just as easy to use as the block editor. What’s more, they come with more page blocks and templates to personalize your website.

Out of all the page builders we’ve tried, we find SeedProd to be the best. It comes with 300+ templates for various industry categories, from eCommerce and accommodation to services.

SeedProd Website and Theme Builder

Note: While SeedProd comes in a free version, we recommend upgrading to the Pro plan to access the Theme Builder. This is what we will use in this tutorial.

To use SeedProd, you will need to install the WordPress plugin first. After that, go to SeedProd » Settings to activate your Pro plan license. Simply insert your license key and click ‘Verify Key’ to complete this step.

Verifying SeedProd Pro's license key

Next, switch to SeedProd » Theme Builder.

Just click ‘Theme Template Kits‘ to view your theme options.

Accessing SeedProd's Theme Template Kits

As you can see, there are many theme template kits available, from online stores to service sites. Feel free to use the filtering and sorting settings to find the right one for your needs.

Once you’ve made your choice, just hover over the theme template and click the orange checkmark button to use it.

Choosing a theme template kit in SeedProd

Now, just go back to the Theme Builder page and select a theme template you’d like to edit.

For demonstration purposes, we will show you how to edit the style of your SeedProd theme template. To do this, locate the ‘Global CSS’ theme template, hover over it, and click ‘Edit Design.’

Editing a theme template kit's Global CSS in SeedProd

You are now inside the SeedProd page builder and can customize your theme template’s style. Here, you can change your website’s colors, fonts, backgrounds, buttons, forms, and layout.

Let’s see how to change the theme’s default font. To do this, open the ‘Fonts’ menu. Then, just choose one of SeedProd’s many font and color options for the heading and body text.

All the changes you make will show up automatically in the right-side preview.

Changing a SeedProd theme template kit font in the Global CSS theme template

Once you are happy with the style, just click ‘Save’ to make these changes official.

Then, you can go back to SeedProd » Theme Builder and turn on the ‘Enable SeedProd Theme’ toggle in the top right corner.

Enabling the SeedProd theme template kit in WordPress

For more information about editing WordPress themes with SeedProd, you can see our guide on how to easily create a custom WordPress theme.

How to Edit a WordPress Page or Post

If you have updated WordPress to the latest version, then most likely, you will use the Gutenberg block editor to edit a page or post.

You can create a new page by going to Pages » Add New Page. This will automatically make an entirely blank page and direct you to the block editor.

On the other hand, if you want to edit an existing page, like the homepage or blog page, then you can go to Pages » All Pages. Hover your cursor over the page you want to edit, and then click ‘Edit.’

Clicking the Edit button to edit an existing WordPress page

Alternatively, there is also the Quick Edit feature.

This allows you to modify the page’s title, URL slug, and last modified date.

Clicking the Quick Edit button in the WordPress Pages page

You can do various things with the Quick Edit feature.

Examples include setting a password for the page, making it private, assigning it as a parent page, changing the page template, allowing/disallowing comments, and changing the page status.

The Quick Edit feature for WordPress pages

To create a new post, simply head to Posts » Add New Post to make a new blank post and edit it using the block editor.

Like before, you can edit an existing WordPress blog post by hovering your cursor over the selected post and clicking ‘Edit.’

The WordPress Posts interface in the WordPress admin area

The Quick Edit feature for posts is similar but with some minor differences.

Here, you can also add tags, allow/disallow pings, and make the post sticky (featured on your website).

The Quick Edit feature for WordPress blog posts

Once you have opened up a WordPress page or post, there are many things you can do in the block editor.

Typically, you will start by clicking the ‘+’ add block button in the top left corner.

This is where you will find all the available blocks from WordPress and the plugins you use.

Opening the block inserter library in WordPress

You can then drag and drop a block to the main editing area.

After that, you can use the block’s toolbar and settings sidebar to configure the block’s style, dimensions, spacing, and more.

The block settings sidebar in WordPress

If you have installed a WordPress plugin, then you may also see some settings below the editing interface.

For instance, the All in One SEO plugin will show you a section where you can optimize the page or post’s meta title and description for search engines.

The AIOSEO settings in the WordPress block editor

We have plenty of guides for you to learn more about editing posts and pages, so be sure to check them out:

How to Edit a WordPress Page or Post With Classic Editor

If you want to use the Classic Editor, then you will need to enable it. You can read our article on how to disable Gutenberg and activate the Classic Editor to do this.

After that, just create a new post or page by going to Posts » Add New Post or Pages » Add New Page, and the Classic Editor will show up on your screen.

The WordPress classic editor

Unlike the block editor, you won’t add blocks to insert content into your page or post. Instead, you can only type text, format it using the controls at the top of the editing panel, and add media files to your content by clicking on the ‘Add Media’ button.

At the bottom and the sides of the editing interface, there are settings to publish the page/post, set the page or post’s categories/tags, upload a featured image, and so on.

You can also switch between the visual and text editing modes. With the second editor, you can modify the post or page’s HTML code.

The text editing mode in the WordPress classic editor

How to Edit a WordPress Page With a Page Builder

If you already use a page builder like SeedProd to edit your theme, then you can use it to edit a page as well. This way, you can maintain your design’s consistency throughout all of your pages.

You will need to create a new page and open the block editor. If SeedProd is active, then you will see a button at the top that says, ‘Edit with SeedProd.’ Go ahead and click on it.

You can also do this with an existing page. However, do note that the content will not be transferred over, and you will have to create the page from scratch.

Clicking the Edit with SeedProd button in the WordPress block editor

In the page builder, you will see that the SeedProd theme’s header and footer have been added. All you need to do is start building the page.

First, choose one of the 8 layouts to use on the page.

Choosing a layout for the section in a SeedProd theme template

On the left-hand side, you will find all the blocks and sections that you can drag and drop onto the right-hand side, which is the template preview.

You can use these to insert content into the page.

SeedProd's block library

Whenever you click a block or a section, the left-hand side will show the available settings to customize the element.

In the screenshot below, you can see that clicking on the Text block will make the block settings appear. You can customize the text, insert dynamic content, edit the HTML, change the alignment, and so on.

Customizing SeedProd's text block settings

Once you are done editing the page, don’t forget to click ‘Save’ to make the changes live.

For more details, just see our guide on how to create a custom page in WordPress.

If you want to create a custom landing page from scratch, then you can also do that with SeedProd. All you need to do is go to SeedProd » Landing Pages. Then, click the ‘+ Add New Landing Page’ button.

Create a new landing page in SeedProd

For more information, check out our tutorial on how to create a custom landing page.

Alternative: Thrive Architect is another great page builder option for designing attractive and conversion-focused landing pages.

You may also want to edit the WordPress header, footer, sidebar, and other parts of your theme template.

These are sections on your site that are not part of the main page or post content. However, they are essential for giving additional information or helpful navigation.

How you can edit these sections depends on what theme you are using, so let’s go through each option.

How to Edit a Block Theme’s Header, Footer, and Other Template Parts

If you have a block theme, then you can use the Full Site Editor to edit your theme’s header and footer.

In the Full Site Editor, a header and footer are considered template parts. These are also known as WordPress patterns (a set of reusable blocks) that appear throughout your website.

Other examples of a template part include the comment section and the post meta.

For the sake of example, we will show you how to edit your WordPress header, but you can repeat these steps with other template parts.

First, go to Appearance » Editor. Once you are in the Full Site Editor, just click ‘Patterns.’

Clicking the Patterns menu in the Full Site Editor

You will now see a list of patterns provided by your WordPress theme.

Go ahead and scroll down to the Template Parts section. Then, select ‘Header’ and click on the Header template part.

Opening the header template part in the WordPress Full Site Editor

Now, you need to click the pencil button next to the Header text.

This will open the block editor.

Clicking the pencil button to edit the header using the Full Site Editor

The block editor works the same way with template parts as it does with pages and posts. You can add various blocks to the header, configure the block, and update the changes when you are done.

Headers usually include a Site Logo (or the favicon), so feel free to add that here, too.

Adding the Site Logo block to the header in the Full Site Editor

If you want to completely change how the header looks but don’t know where to start, click the ‘+’ add block button in the top left corner.

Then, navigate to the ‘Patterns’ tab and click ‘Headers.’ You will find many ready-to-use header layouts there.

Finding WordPress header patterns in the Full Site Editor

For more information, see our guide on how to customize your WordPress header.

Once you are done changing the header, click ‘Save.’ Since the header is a synced template part, all the changes you make here will apply across all pages that use the header.

Now, if you want to create a new header or any other template parts rather than editing the existing ones, you can go back to the ‘Patterns’ page. After that, click the ‘+ Create pattern’ button and select ‘Create template part.’

Creating a new template part in the Full Site Editor

In the popup, give the template part a name and select the type of template part.

Then, click ‘Create.’ You will then be directed to the block editor and you can edit the template part like usual.

The Create template part popup in the WordPress Full Site Editor

For more details, you can see our complete guide to WordPress full site editing.

How to Edit a WordPress Header, Footer, and Other Widget-Ready Areas in a Classic Theme

In a classic theme, a WordPress widget is basically a block that you can add to widget-ready areas, like headers, footers, sidebars, and so on.

Every classic WordPress theme has different widget-ready areas. Some may include a sidebar, and some may not. So be sure to check your theme’s documentation for more information.

To use widgets, you have to go to Appearance » Widgets. Here, you can add, configure, and remove blocks in the available widget-ready areas.

Adding the FlipBox widget to a sidebar or similar section

You can read more information about widgets in our how to add and use widgets in WordPress article.

Also, check out our guide on the difference between widgets and blocks to understand more about this feature.

How to Edit a WordPress Header, Footer, and Other Template Parts With a Page Builder

One of the benefits of using a page builder is you will have more options to customize headers, footers, sidebars, and other parts of your theme.

If you use SeedProd, you can go to SeedProd » Theme Builder. We will assume that you have installed a theme template kit from earlier.

The kit usually includes various theme templates. This may be a built-in page template, like a 404 or single post, or a part of a page, like a header, footer, pricing tables, and so on.

Go ahead and hover over a theme template. Then, click ‘Edit Design.’

Editing the header theme template in SeedProd

Now, you can edit the header the same way as you would with a page.

Let’s say you want to add your social media links here. What you can do is hover over the header until the blue border appears and click the ‘+ Add Row’ button. Then, go ahead and select a row layout.

In our example, we want to add one more column so that the header can fit the image, menu, and social media links. That means we will need three columns in one row.

Choosing a row layout in SeedProd

You can then drag and drop the blocks from the top row to the new row.

After that, just delete the top row so that your new row becomes the new header.

Deleting a previous row in a SeedProd section

Now, just look for the Social Profiles block in the left-side panel.

Drag it into the right column, and you are done.

Adding the Social Profiles block in the header in SeedProd

For more information about editing template parts, you can read these WordPress tutorials:

How to Edit a Navigation Menu in WordPress

A navigation menu makes it easy for visitors to explore all your content without getting lost on your website. That’s why it’s important to design a menu that shows your essential pages and links to other relevant information.

If you use a block WordPress theme, then you can select the ‘Navigation’ menu from the Full Site Editor page.

Selecting Navigation in WordPress Full Site Editing

Our article on adding custom navigation menus in WordPress can walk you through the rest of the steps.

If you use a classic WordPress theme, then you can go to Appearance » Menus. This is a dedicated page for you to add, arrange, and remove pages/posts and links to your menus.

How to add a WordPress navigation menu to your site or blog

For step-by-step instructions, you can check out our beginner’s guide on how to add a navigation menu in WordPress.

If you use a page builder like SeedProd, then your navigation menu (Nav Menu block) may have been embedded in your header theme template.

The Nav Menu block will already include all of your pages, though you can add new items, too.

First, go to SeedProd » Theme Builder from your WordPress dashboard. Then, find the ‘Header’ theme template and click ‘Edit Design.’

Editing the header theme template in SeedProd

Now, hover over the block that looks like a menu. That should be the ‘Nav Menu’ block.

After that, scroll down on the left panel and click ‘+ Add New Item.’

You can then customize the anchor text, enter the URL, have it open in a new window, and set it as nofollow.

Adding new menu items in SeedProd

Toward the bottom, you can change the links’ font size, spacing, divider, and alignment.

Don’t forget to click ‘Save’ to make the changes live.

Configuring the Nav Menu block in SeedProd

How to Edit a WordPress Site With Code

If you are comfortable with code, then you can also use custom code snippets to edit your WordPress website. That said, we only recommend this method if you have the right technical know-how to avoid breaking your website.

One way you can edit a WordPress site with code is by adding CSS, which is a stylesheet that can change how HTML looks on the front end.

Classic theme users can go to Appearance » Customize and find the ‘Additional CSS’ field in the Theme Customizer.

Here, you can insert CSS code to style different HTML elements like colors and fonts.

This may be handy if your theme’s built-in options aren’t enough for your needs.

Adding custom CSS in WordPress

As for block theme users, you cannot add custom CSS within the Full Site Editor.

Instead, you have to go to the URL below to open the Theme Customizer and find the Additional CSS field. Make sure to replace the domain name with your own.

https://example.com/wp-admin/customize.php

For more details, see our guide on how to fix missing Theme Customizer in WordPress.

Another way to add CSS is with CSS Hero. This plugin makes adding custom CSS to WordPress themes easy, even for beginners. If you are interested in using it, then just check out our CSS Hero review.

How to Edit WordPress Theme Files

At times, some tutorials may require you to edit your WordPress theme files to make changes beyond what your built-in theme features allow. In this case, we recommend:

  • Creating a child theme first. This is like a copy of your WordPress theme that you can safely customize with some coding.
  • Backing up your website. It’s a good measure to do so that you can restore your website to a previous version in case of errors.

Editing a WordPress theme file requires going to your WordPress file directory from the backend. To do this, you will need to open your hosting provider’s file manager or connect to your website with an FTP client.

If you use Bluehost, then you can go to your dashboard and open the ‘Websites’ tab. After that, click ‘Settings’ on the website for which you want to open the theme files.

Opening Bluehost's website settings

Now, simply scroll down to the ‘Quick Links’ section.

Then, click ‘File Manager.’ If you’re not sure where your root folder is, you can check the ‘Document Root’ function to see its path.

Opening Bluehost's file manager

Once inside the file manager, you can go to your website’s root folder (usually named public_html).

Then, head to /wp-content/themes and find your current theme folder.

An example of what the WordPress theme files look like in the Bluehost file manager

After that, you will find all of your WordPress theme files, which you can edit using a text editor.

Here are some things you can do by editing WordPress theme files:

How to Safely Insert Custom Code into WordPress

If you want to add new custom code rather than editing the code that is already within your theme files, then we recommend using WPCode. It’s the best WordPress code snippets plugin for easily inserting and managing custom code snippets.

WPCode - Best WordPress Code Snippets Plugin

With this plugin, you won’t have to worry about accidentally breaking your website. WPCode will let you know if there are errors in the code and deactivate it. Plus, you can create PHP shortcodes for inserting custom content into your website.

To see WPCode in action, you can check out our full WPCode review in the WPBeginner Solution Center.

What Is the Best Way to Edit a WordPress Site for Beginners?

For beginners, we always recommend installing a page builder plugin like SeedProd to edit WordPress websites. The reason is that it’s just as easy to use as the block editor yet gives you much more control over your website design.

If you don’t want to use a plugin, then the next best thing is a block theme with the Full Site Editor. This feature is not entirely developed yet because WordPress is constantly working on the Gutenberg project. But as of now, it’s pretty user-friendly.

The Theme Customizer is not as flexible as the Full Site Editor because it lacks drag-and-drop functionality. That’s why we suggest classic theme users install SeedProd to improve their user experience.

As for coding, we only recommend it if you have created a child theme and backups of your site to avoid errors. But with the WPCode plugin, adding custom code to edit your WordPress site is much safer and won’t cause any errors or break your website.

We hope this article helped you learn how to edit a WordPress website. You may also want to check out our in-depth WooCommerce tutorial to create an online store and the ultimate guide to WordPress SEO.

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 Edit a WordPress Website (Ultimate Guide) first appeared on WPBeginner.

Posted on

How to Change Fonts in Your WordPress Theme (5 Easy Ways)

Are you looking to change the font on your WordPress theme to something different?

Your website text font plays an important role in your site’s design and brand identity. It can improve the readability of your content and make your site look modern and professional.

In this article, we’ll show you how to change font in WordPress using 5 different ways, so you can easily change fonts using no-code method, or change WordPress font without using any plugin.

How to change font in WordPress

Why Change Fonts on Your WordPress Website?

Fonts are an essential part of your website design and have a huge impact on how your WordPress site will look and feel.

If your website has a difficult font to read, then it will be hard to retain visitors, and they’ll eventually abandon your site.

A font also shows your brand identity. For instance, you can use specific fonts to make your site look more professional, or casual.

WordPress themes come with a default font, font size, and font color for your website. However, you may want to change the default font to something different.

That said, there are several ways of changing fonts in WordPress. We’ll show you several different methods. You can click the links below to jump ahead to any section.

Changing Fonts in WordPress Theme Customizer

An easy way of changing your site’s font is by going to the WordPress theme customizer. It allows you to change the appearance of your website and shows a real-time preview.

Note: If your customizer menu option is missing, then your theme likely has full site editing enabled and you’ll need to use a different method or switch themes.

For this tutorial, we’ll use the Astra theme. However, the options will change depending on the WordPress theme you use. Depending on your theme, you’ll want to look for ‘font’ or ‘typography’ options in the customizer.

First, you can head over to Appearance » Customize from your WordPress dashboard.

Go to appearance menu

This will launch the WordPress theme customizer.

The Astra theme has a ‘Global’ section with options to change site-wide styles. To change the font on your whole website, you can click the ‘Global’ option from the menu on your left.

Go to Global settings

On the next screen, you’ll see options like typography, colors, container, and buttons.

Go ahead and click the ‘Typography’ option.

Open typography settings

From here, you can choose different fonts under the ‘Presets’ section.

These are default fonts offered by the theme and selecting a preset will change the font on your entire website.

Change font in theme customizer

Besides that, you can also change fonts for individual elements on your theme.

For example, you can use a different font for body and headings. There are even options to use separate fonts for each heading level.

To start, simply choose a font from the ‘Font Family’ dropdown menu for any individual element.

Change font of individual elements

Besides that, there are more options to change the font size, weight, select variants, and more.

When you’re done, don’t forget to click the ‘Publish’ button.

You can now visit your website and see the new font. For instance, we changed the body font to Roboto and the heading font to Helvetica on our demo site.

Font change preview

It’s important to note that not all WordPress themes will offer the same features and customizations that Astra is offering. If your theme doesn’t offer that, then continue reading to the next step.

Changing Fonts in WordPress Full Site Editor

If you’re using a block-based WordPress theme like Twenty Twenty-Two, then you can change your site’s font using the full site editor (FSE).

The full site editor allows you to customize your WordPress theme using blocks, just like when editing posts or pages using the WordPress content editor. However, FSE is currently in beta and only a handful of themes support it.

For the sake of this tutorial, we’ll use the Twenty Twenty-Two theme.

To get started, you can head over to Appearance » Editor from the WordPress admin panel.

Go to full site editor

This will open the full site editor for your WordPress theme.

Next, you can click the Styles icon in the top right corner and then click on the ‘Typography’ option.

Open the style settings

After that, you can select elements like text and links to change their typography.

We’ll select Text as the element and then click on the ‘Font Family’ dropdown menu to change its font.

Change font in FSE

When you’re done, simply click the ‘Save’ button.

You’ve successfully changed the font using the full site editor. You can also add custom fonts to your WordPress site as well and then change them in the full site editor.

Change WordPress Fonts Using a WordPress Plugin

Another way of changing WordPress fonts is by using a WordPress plugin like Easy Google Fonts.

It’s a free WordPress typography plugin that lets you add over 600 Google fonts and different font variants to your website.

First, you’ll need to install and activate the Easy Google Fonts plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, you will see the Easy Google Fonts welcome screen in your WordPress dashboard. You can scroll down and click the ‘Go to Settings → Easy Google Fonts’ button.

Go to easy google fonts settings

On the next screen, you will see different plugin settings.

Go ahead and click the ‘Manage with Live Preview’ button at the top.

Click manage with live preview

This will open the WordPress theme customizer, and you be in the ‘Typography’ tab.

Another way of accessing fonts added by the plugin is by going to Appearance » Customize from your WordPress dashboard and then clicking the ‘Typography’ tab.

Go to the typography tab

On the next screen, you’ll see the ‘Default Typography’ option.

Go ahead and click on it.

Go to default typography

After that, you can change the font of every element on your website.

For example, let’s change the font of Heading 1. Simply click the arrow next to Heading 1 to expand the options. From here, you can click the ‘Font Family’ dropdown menu and select a font.

Select a font using a plugin

You can do the same for other heading levels and paragraphs.

Don’t forget to click the ‘Publish’ button when you’re done.

Change Fonts Using a WordPress Theme Builder

There are many powerful WordPress theme builders that let you create a custom theme without editing code. You can use them to change the font of different elements on your website.

For this tutorial, we’ll use SeedProd. It’s the best landing page and theme builder plugin for WordPress and offers a drag and drop builder to create custom themes without touching a single line of code.

Note that you’ll need the SeedProd Pro version because it includes the theme builder. There is also a SeedProd Lite version that you can use for free.

First, you’ll need to install and activate the SeedProd plugin. For more details, please see our guide on how to install a WordPress plugin.

Upon activation, you’ll see the SeedProd welcome screen. Go ahead and enter your license key and click the ‘Verify key’ button. You can easily find the license key in your SeedProd account area.

SeedProd license key

After that, you can head over to SeedProd » Theme Builder from the WordPress dashboard.

Next, go ahead and click the ‘Themes’ button at the top.

Create your custom theme

From here, the plugin will show you multiple themes to choose from.

Simply hover over a theme you want to use and then click on it. We’ll use the Starter theme for this tutorial.

Choose a starter theme

SeedProd will now generate different theme templates.

You can edit each template and customize your WordPress theme. There’s even an option to manually add a theme template.

Let’s edit the Homepage theme template and change the fonts of different elements. To start, click the ‘Edit Design’ link under Homepage.

Edit homepage design

This will launch the SeedProd’s drag and drop theme builder. You can add new elements from the menu on your left and place them anywhere on the template.

To change the font of any theme section, simply select it. For example, we’ll select the text box under the Starter heading.

Next, go to the ‘Advanced’ tab from the menu on your left and click the ‘Edit’ button in front of Typography.

Select text in theme builder

After that, you’ll see multiple options to edit the typography of your selected section.

You can click on the ‘Font Family’ dropdown menu and choose a font for your text. There are also options to select font weight, adjust the font size, line height, letter spacing, alignment, letter case, and more.

Change font in theme builder

You can now repeat this step and change the font of other elements on your theme.

When you’re done, simply click the ‘Save’ button at the top.

To apply the custom theme and fonts, go to SeedProd » Theme Builder and toggle the switch next to the ‘Enable SeedProd Theme’ option to Yes.

Enable SeedProd theme

If you’re looking to create a WordPress theme from scratch, then see our guide on how to easily create a custom WordPress theme.

Customize Font Appearance in WordPress Content Editor

Using the content editor, you can also change how your fonts appear in specific blog posts and pages.

The downside of this method is that it will only apply the new font to that particular post or page only. You’d have to repeat this step manually for all other posts where you want to apply similar customization.

This can be really handy for post specific customizations, but if you’re looking for a sitewide font change option, then you should consider the other options instead.

With that said, to change the font using WordPress content editor, simply edit a post or add a new one. Once you’re in the WordPress content editor, select the text to change its appearance.

In the settings panel on your right, head to the ‘Typography’ section. Then click the 3 dots in front of Typography and select ‘Appearance’ from the dropdown options.

Open typography settings in content editor

Once you do that, the Appearance settings will be visible under the Typography section.

Simply click the dropdown menu under Appearance and select a style for your font. For example, you can make the font bold, thin, italic, black, bold italic, extra bold, and more.

There are also options to change the font size, choose a letter case, edit the color, enable drop caps, and more.

Choose an appearance style

Don’t forget to update or publish your page when you’re done.

We hope this article helped you learn how to change font in WordPress. You can also see our ultimate WordPress SEO guide for beginners, and check out our expert-pick of the best email marketing services for small businesses.

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 Fonts in Your WordPress Theme (5 Easy Ways) first appeared on WPBeginner.

Posted on

How to Customize Your WordPress Header (Beginner’s Guide)

Do you want to show a custom header for your WordPress website?

Many WordPress themes come with a built-in header that sits at the top of each page. You may need to customize it to add important links, social icons, site search, or other elements to make a good first impression.

In this article, we’ll show you how to customize your WordPress header and even create a fully custom header for your entire site or specific pages.

How to Customize Your WordPress Header (Beginner's Guide)

What Is the Header in WordPress?

Your website header is the top section of every page on your WordPress website, and probably the first thing your visitors will see.

It often displays your website logo and title, navigation menus, and other important elements that you want users to see first.

For example, here’s our header area on WPBeginner that millions of readers see every month.

The WPBeginner Header

By customizing your site’s header, you can give it a unique design and make it more useful for your visitors. You can link to your most popular pages, display social icons or your business phone number, and show call to action buttons for more conversions.

With that being said, let’s take a look at how to easily customize your WordPress header. You can use the following links to jump to the section you want to read.

Customize Header by Using the WordPress Theme Customizer

Many popular WordPress themes let you use the WordPress theme customizer to make changes to the header area of your WordPress layout. This feature is sometimes called a custom header, but not all themes support it.

You should start by navigating to Appearance » Customize in your WordPress admin area.

Note: If you don’t see Appearance » Customize in your WordPress admin menu, but only see Appearance » Editor (Beta), then that means your theme has enabled full-site editing. In that case, you should skip to the next section.

Your theme may add a ‘Header’ section to the customizer, or add header options under the ‘Color’ section, but this varies from theme to theme. Here are a few examples.

Some themes, like Twenty Twenty-One, do not offer header customization options at all. In this case, we recommend you use a drag & drop theme builder plugin like SeedProd that we cover below.

The Twenty Sixteen theme allows you to add a background image to the header, and even add random header images.

The Twenty Sixteen Theme Lets You Add Random Header Images

Some free and premium WordPress themes offer even more theme customization options. For example, you may be able to change your header’s font style, layout, colors, and much more. But you are limited to what the theme developer allows you to do.

For example, you can create a custom header using the theme customizer with the Astra theme.

Astra has a dedicated ‘Header Builder’ option in the panel on your left. Here you’ll find different settings to edit the appearance and style of the header. You can build a custom header by adding blocks, just like when editing a blog post or page in the WordPress content editor.

To start, simply hover over an empty area in the header and click the ‘+’ icon to add a header block.

Click plus icon

Next, you can select any block you’d like to add to your custom header. For example, you can add widget block, account block, search block, and more.

Plus, the header builder also lets you drag and drop the blocks and place them above or below the header.

Add header blocks in theme customizer

You can further customize each block that you add to the header.

For instance, selecting the Site Title & Logo block will give you options to upload a site title and logo, change the logo’s width, display a site tagline, and more.

Customize each header block

Besides that, you can also change the background color of the header or add a background image to appear in the header.

When you’re done editing the custom header, simply click the ‘Publish’ button.

For more details, see our ultimate guide on how to use the WordPress theme customizer.

Customize Header by Using the WordPress Full Site Editor

WordPress added full-site editing to WordPress in version 5.9. If your theme supports the new feature, then it replaces the theme customizer. However, at this time there are only a few themes that work with the full site editor.

When you use a compatible theme, you can customize your header by navigating to Appearance » Editor. This will launch the full site editor, which is just like the block editor you use to write WordPress posts and pages.

When you click the header, you will notice the name of the template at the top of the page changes to ‘Page Header’.

Change the Full Site Editor Template to 'Page Header'

Now when you click the ‘Settings’ icon on the toolbar, you will see options to customize the header’s layout, color, border, and dimensions.

As an example, we’ll change the header’s background color. First, you need to click on the ‘Color’ section to expand it. After that, you should click on the ‘Background’ option.

Changing the Header's Background Color

A popup will appear that allows you to select a solid color or gradient. There will also be a number of colors that you can select. When you click on a color, the background of your header will be changed immediately.

You can find more customization options by clicking the ‘Styles’ icon at the top right of the page. This will let you change the header’s font, colors, and layout.

You'll Find Additional Customization Options by Clicking the ‘Styles’ Icon

To learn more about how the full site editor works, see our beginner’s guide on how to customize your WordPress theme.

Create Custom Header and Page Layouts with SeedProd

If you want to have total control over your headers, footers, and sidebars to give your website a unique design, then we recommend using SeedProd.

SeedProd is the best WordPress theme builder plugin that allows you to easily create a custom WordPress theme without writing any code. This includes creating headers, footers, and everything else needed for an attractive WordPress theme.

You can even create multiple custom header styles for different pages and sections of your website.

SeedProd Offers an Easy to Use Theme Builder

Note: You can use the free version of SeedProd to create custom landing pages including custom headers, but you will need the Pro version to create fully custom themes which include sitewide header layouts.

First, we recommend following our guide on how to easily create a custom WordPress theme without any code. Once you’ve done this, SeedProd makes it simple to customize your header.

All you need to do is click the ‘Edit Design’ link found under the header.

The SeedProd Theme Builder Lets You Edit the Design of Your Header

This will open the header in SeedProd’s drag and drop editor.

From here, you can easily customize your header by adding new blocks.

SeedProd theme builder

There are blocks for template tags like a site logo, any of your WordPress widgets, and advanced blocks such as a countdown timer, navigation menu, or social sharing buttons.

The best part is that you can further customize each block using the theme builder. For instance, you can change the size and alignment of your logo or choose which pages to show in the navigational menu. It even allows you to add an image in the header.

With SeedProd, you can also add a complete section to your theme’s header template.

Sections are a group of blocks, and you can use them for different areas on your website. This includes headers, footers, features, testimonials, call to action, and more.

To use a header section, first switch to the ‘Sections’ tab in the Design panel.

Switch to the sections panel

After that, choose a header section you’d like to use for your website. SeedProd offers multiple section templates that you can use.

Next, go ahead and customize the header section.

Customize your header section

Once you’re happy with your custom header, make sure you click the ‘Save’ button to store your changes.

Now, you’re ready to publish your custom header.

Simply go to SeedProd » Theme Builder page from your WordPress dashboard and click the toggle next to the ‘Enable SeedProd Theme’ option to Yes.

Enable SeedProd theme

Once you enable the option, SeedProd will replace your default WordPress theme with a new custom theme and header.

You can now visit your website to see the new custom header in action.

Custom header preview

Create Different Custom Headers for Each Page

Did you know that using SeedProd, you can create custom headers for different pages?

The theme builder lets you add custom headers for each page on your WordPress website. This way, you can show a customized header for different categories, tags, post types, page types, and more.

To start, you’ll need to go to SeedProd » Theme Builder from your WordPress dashboard and click the ‘Add New Theme Template’ button.

Add a new theme template

A new popup window will appear where you’ll need to enter the theme template details.

Go ahead and enter a name for your theme template. After that, choose ‘Header’ as the template type from the dropdown menu. You can leave the ‘Priority’ field blank.

Next, you’ll need to enter the display conditions for your custom header. For example, we used the conditions where it will show on all posts and pages that are in the tutorials category.

Enter new theme template details

Don’t forget to click the ‘Save’ button when you’re done.

After that, you can go ahead and edit the custom header using the SeedProd drag and drop theme builder.

Customize your custom header per page

When you’ve finished editing the custom header, simply click the ‘Save’ button at the top.

You can see more ideas on how to customize your header using SeedProd in our beginner’s guide on how to easily create a custom WordPress theme using the SeedProd theme builder.

Adding a Custom Header for Each Category

Most websites display the same header on all posts, pages, categories, and archive pages. However, you can display a different header for each WordPress category.

This can be done by adding code to your theme files, but you will have more control by using a theme builder.

We showed you earlier how to customize your header using the SeedProd theme builder plugin. SeedProd also allows you to create multiple custom headers and display them for different categories using conditional logic.

To create a new header, you need to navigate to SeedProd » Theme Builder and click the orange ‘Add New Theme Template’ button. Alternatively, you can duplicate your current header and use it as a starting point.

Add a New SeedProd Theme Template

A popup will be displayed where you can give the theme template a name and select ‘Header’ from the Type drop down menu.

You also need to enter a priority. This is used if more than one header meets the conditions for a certain page, and the header with the largest priority will be displayed. The default header has a priority of 0, so make sure you enter 1 or higher.

Make the Custom Header Visible Only for Certain Categories

After that, you’ll need to set up one or more conditions. This lets SeedProd know when to display a certain header. You simply select the conditions from drop down menus.

On the first two menus, you need to select ‘Include’ and then ‘Has Category’. In the last field, you should type the name of the category where you want the header to be displayed.

You can easily display the same header for multiple categories by clicking the ‘Add Condition’ button and including another category. When you’re finished, make sure you click the ‘Save’ button to save the new header.

Now you can customize the design of each new header using SeedProd’s drag and drop editor as we showed you earlier.

To learn more, including how to do this using code, see our guide on how to add custom header, footer, or sidebar for each category.

Add a Widget Area to Your WordPress Header

If you’re building a custom theme from scratch using code, then you might be looking to add a WordPress widget to your header to capture the attention of your visitors. Widgets allow you to add content blocks to specific sections of your theme easily, but not every theme includes a header widget area.

We mentioned earlier how simple it is to add widgets to your header using the SeedProd theme builder. But what if you wish to add a widget to a normal WordPress theme’s header?

Some themes, like the Astra theme, let you do this using the WordPress theme customizer. For example, Astra adds an option called ‘Header Builder’ that lets you completely customize the header, including adding widgets.

If your WordPress theme doesn’t currently have a WordPress widget area in the header, then you’ll need to add it manually by adding the following code to your functions.php file, in a site-specific plugin, or by using a code snippets plugin.

This is a more advanced option, since you’ll need to know where to place the code and how to style it using CSS.

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

This code registers a new sidebar or a widget ready area for your theme.

If you go to Appearance » Widgets, then you will see a new widget area labeled ‘Custom Header Widget Area’. Now, you can add your widgets to this new area.

Custom header widget area

Finally, you need to add some code to your theme’s header template located in the header.php file of your theme. This will add the widget area you created earlier to your header so that the widgets will be displayed on your website.

You need to copy this code snippet and paste it where you want the widget to display.

<?php
 
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
 
<?php endif; ?>

Depending on your theme, you may also need to add CSS to WordPress to control how the widget area is displayed.

For more details, see our guide on how to add a WordPress widget to your website header.

Add Random Header Images to Your WordPress Blog

Another way you can make your WordPress headers more attractive is by adding random images to the header section.

Showing images that randomly change helps capture your visitors’ attention and make your content more engaging.

To add random header images to your WordPress blog, you can use the theme customizer and upload images to the header section. This option may vary depending on the WordPress theme you’re using.

Next, go ahead and select the ‘Randomize uploaded headers’ option.

Randomize uploaded header images

If you want more control and flexibility in showing random images in the header section, then you can also use a WordPress plugin.

For more details, see our guide on how to add random header images to your WordPress blog.

Add Code to Your Website’s Header (Advanced)

Finally, if you’re wanting to add custom code to your website’s header section, you can do that easily from your WordPress dashboard. This method is recommended for advanced users and not suitable for beginners because it includes editing code and requires technical knowledge.

You can find your theme’s header files by going to Appearance » Theme File Editor from the WordPress admin panel. In the ‘style.css’ theme files, you can scroll down to the site header section and add or remove code.

Add custom code to theme files

Note: We don’t recommend that you directly edit the theme files because the slightest mistake can break your website and mess up the design.

An easier way of adding custom code to edit your site’s header is by using the Insert Headers and Footers plugin.

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

Upon activation, you can go to Settings » Insert Headers and Footers from your WordPress dashboard. Next, enter the custom code in the ‘Scripts in Header’ section.

Insert headers and footers

After entering the code, save your changes.

For more details, you can see our guide on how to add header and footer code in WordPress.

We hope this tutorial helped you learn how to customize your WordPress header. You may also want to learn how to choose the best web design software, or check out our list of must have plugins to grow your site.

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 Customize Your WordPress Header (Beginner’s Guide) first appeared on WPBeginner.

Posted on

How to Easily Change the “Just Another WordPress Site” Text

Does your site have the text “Just another WordPress site” in the header or title bar?

Beginners often don’t know how to change this tagline, but leaving it in place doesn’t look good. Luckily, it’s easy to change this to something else or even remove it altogether.

In this tutorial, we’ll show you how to change the “Just another WordPress site” text, step by step.

Changing just another WordPress site tagline

What is a WordPress Site’s Tagline?

A tagline is a WordPress site’s slogan or description. Many websites use a catchy phrase as their tagline to describe their website and brand.

Until version 6.1, WordPress used “Just another WordPress site” by default for your website’s tagline when you first created a website.

After the update, WordPress leaves the tagline field empty for new installations.

However, users who created their websites before that or by using an earlier version may still have “Just another WordPress site” saved in WordPress settings as their site’s tagline.

Not all WordPress themes display this tagline, but many do.

Even if your theme doesn’t display the site tagline to users, you should definitely change this text from the default. Doing so is on our list of the key things you should do after installing WordPress.

Just another WordPress site example

Here on WPBeginner, we use “Beginner’s Guide for WordPress” as our tagline. You can see it just below our navigation menu.

It’s also in our site’s title tag in your browser.

WPBeginner tagline

It is not necessary to have a tagline for your website. If you cannot think of something appropriate right now, you can skip the tagline.

For instance, your site’s main topic or mission might be clear from its domain name or website title.

However, if your domain name isn’t clearly linked to your blogging niche, adding a catchy tagline can help you explain what your website is about.

Video Tutorial

If you’d prefer written instructions, just keep reading.

Method #1: Changing Your Tagline in WordPress’s Settings

The simplest way to change the “Just another WordPress site” tagline is in your WordPress site’s settings.

First, you’ll need to go to your WordPress dashboard. You can normally do this by adding /wp-admin to the end of your website’s domain name.

For instance, if your site is called example.com, then your WordPress dashboard is at example.com/wp-admin.

WordPress will prompt you to log in if you’re not already logged in.

Once logged in, you need to go to Settings » General in your dashboard, and you’ll see the Tagline field there.

Change tagline in General settings

You can change the tagline or remove it by clearing the box.

Leaving the tagline field empty will remove the tagline text from your website.

Delete tagline text

Note: After you have deleted the text, WordPress may still show ‘Just another WordPress site’ as placeholder text. This text is merely a hint and will not be saved when you click on the Save Changes button.

If you want to use your own tagline, then here are a few tips to come up with something catchy and helpful.

  • Use your website’s main topic in the tagline.
  • Keep it short and simple.
  • Don’t stuff too many keywords or special characters. Search engines may consider it a bad practice and could penalize your website.

Let’s say, you run a travel blog, then a tagline like ‘Travel Tips and Hacks for Solo Travelers’ would work great.

Once you’ve changed that, scroll down to the bottom of the page and click the ‘Save Changes’ button.

Now, you can visit your site and see your new tagline in place:

New tagline preview

Method #2: Changing WordPress Tagline in Site Editor

If you are using a newer block theme, then you can change the tagline in Site Editor as well.

Go to the Appearance » Editor page to launch the Site Editor.

Editing header in Site Editor

If you can immediately see the tagline, then you can go ahead and click on it.

Otherwise, you can browse the templates and template parts to locate the Site Tagline block.

Simply click on the tagline to edit the text inside it.

Edit tagline text

If you don’t want to display the tagline at all, then you can just delete the block.

Simply click on the three-dot menu in the Site Tagline block settings and select ‘Remove Site Tagline’ from the menu.

Remove site tagline block

Once you are finished editing, don’t forget to click on the Save button to store your changes.

Method #3: Changing Your Tagline in WordPress’s Theme Customizer

You can also change your tagline in the WordPress Theme Customizer.

To do so, go to Appearance » Customize in your WordPress dashboard.

Launch theme customizer

The main part of your screen shows a preview of your website.

Down the left-hand side, you have a series of tabs that let you customize different aspects of your website.

First, you’ll need to look for a tab labeled ‘Site Identity.’ This will generally be at or near the top.

Locate site identity tab

You can also click on the Pencil icon next to the tagline to quickly locate the Site Identity panel.

Note: If you can’t see the Site Identity tab, expand other tabs to see if it’s nested under them. For instance, Site Identity is within the Header tab in the Astra theme.

Click on the Site Identity tab to expand it, and you’ll see a box where you can change your tagline.

We are using the Button theme in this example, and you can see in the image below that we also have the option to turn off the display of the site’s title and tagline in this section.

Edit site identity tagline

The theme customizer options are determined by the WordPress theme you’re using, so you may see different options here.

Once you’ve changed the tagline to whatever you want to use, click the ‘Publish’ button at the top of the screen.

Publish your changes

Troubleshooting Your Tagline

Usually, changing your tagline goes smoothly. But what if you changed your tagline and the “Just another WordPress site” text is still showing up?

Wrong Tagline on Your Site

First, check that you saved your changes. Go back to Settings » General and see if your tagline is correct. If necessary, change it again and click ‘Save Changes’ at the bottom of the page.

If the “Just another WordPress site” text still appears on your site itself, try clearing your cache.

You could also try looking at your site on a different device or in a different browser to see if it’s a browser cache issue.

If the problem persists, then you need to reach out to your WordPress hosting support for help.

Wrong Tagline on Google

What if the “Just another WordPress site” text is no longer on your website, but it still shows up in a Google search?

The best way to fix this is to with a Google Search Console account.

Simply type your homepage URL into the search bar at the top. Click the magnifying glass or press Enter on your keyboard to run the search.

You’ll now see details about the URL. Click the ‘Request Indexing’ link.

Request reindexing

Google will then recrawl your page within the next few days, and then it should show the correct tagline, not the “Just Another WordPress Site” text.

Wrong Tagline on Facebook

If the “Just another WordPress site” text is still showing up on your Facebook posts, you may need to clear your Facebook cache. You can do this by going to the Sharing Debugger tool.

Simply enter the URL of your site and click the ‘Debug’ button.

Sharing debugger

You should see a section with the heading ‘When and how we last scraped the URL.’ Click the ‘Scrape Again’ button at the top of this section. This should refresh the information that Facebook stores about your site.

Your website’s tagline should now display correctly when you share posts on Facebook.

We hope this article helped you learn how to change the “Just another WordPress site” text. If you’re just getting started with blogging, we recommend reading our beginner’s guide to the most common WordPress mistakes to avoid, and our expert pick of the must-have WordPress plugins for all 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 How to Easily Change the “Just Another WordPress Site” Text first appeared on WPBeginner.

Posted on

How to View the Mobile Version of WordPress Sites From Desktop

Do you want to preview the mobile version of your WordPress site?

Previewing the mobile layout helps you see how your website looks on mobile devices. When your site is under development or even when it’s live, it’s often easier to view the mobile version on a desktop computer. Then, you can quickly make changes and see their effect.

In this article, we will show you how to view a mobile version of the WordPress site from a desktop.

How to view the mobile version of WordPress sites from desktop

Why You Should Preview Your Mobile Layout

More than 50% of your website visitors will be using their mobile phones to access your site. Around 3% will be using a tablet.

This means that having a site that looks great on mobile is very important.

In fact, mobile is so important that Google is now using a mobile-first index for its website ranking algorithm. This means that Google will use your site’s mobile version for indexing. You can learn more by reading our ultimate guide to WordPress SEO.

Even if you are using a responsive WordPress theme, you still need to check how your site looks on mobile. You might want to create different versions of key landing pages that are optimized for mobile users’ needs.

It’s important to keep in mind that most mobile previews will not be completely perfect because there are so many different mobile screen sizes and browsers. Your final test should always be to look at your site on an actual mobile device.

That said, let’s look at how you can view the mobile version of your WordPress website on a desktop.

We are going to cover two different methods for testing how your site looks on mobile using desktop browsers. You can click the links below to jump to any section:

Video Tutorial

If you’d prefer written instructions, then continue reading.

Method 1: Using WordPress’s Theme Customizer

You can use the WordPress theme customizer to preview the mobile version of your WordPress site.

Simply log in to your WordPress dashboard and go to the Appearance » Customize screen.

Go to theme customizer from WordPress dashboard

This will open up the WordPress theme customizer. For this tutorial, we will be using the Astra theme.

Depending on what theme you are using, you may see slightly different options in the left-hand menu.

View options in theme customizer

At the bottom of the screen, simply click the mobile icon.

You will then see a preview of how your site looks on mobile devices.

View mobile screen preview

This method for previewing the mobile version is particularly useful when you haven’t yet finished creating your blog or when it’s in maintenance mode.

You can now make changes to your website and check how they look before you push them live.

Method 2: Using Google Chrome’s DevTools Device Mode

The Google Chrome browser has a set of developer tools that let you run various checks on any website, including seeing a preview of how it looks on mobile devices.

Simply open the Google Chrome browser on your desktop and visit the page you want to check. This could be the preview of a page on your site, or it could even be your competitor’s website.

Next, you need to right-click on the page and select the ‘Inspect’ option.

Right click to open the inspect option

A new panel will open up on the right-hand side or at the bottom of the screen.

It will look something like this:

View the inspect tool

In the developer view, you will be able to see your site’s HTML source code, CSS, and other details.

Next, you need to click the ‘Toggle Device Toolbar’ button to change to the mobile view.

Click the toggle device toolbar

You will see the preview of your website shrink to the mobile screen size.

Your website’s general appearance will also change in the mobile view. For instance, the menus will collapse, and additional icons will move to the left instead of the right of the menu.

View the mobile version in inspect tool window

When you hover your mouse cursor over the mobile view of your site, it will become a circle. This circle can be moved with your mouse to mimic the touchscreen on a mobile device.

You can also hold down the ‘Shift’ key, then click and move your mouse to simulate pinching the mobile screen to zoom in or out.

Above the mobile view of your site, you will see some additional options.

Change the dimensions for responsiveness

These settings let you do several extra things. You can check how your site would look on different types of smartphones.

For example, you can select a mobile device like an iPhone and see how your site will appear on the device.

You can also simulate your site’s performance on fast or slow 3G connections. You can even rotate the mobile screen using the rotate icon.

Bonus: How to Create Mobile-Specific Content in WordPress

It’s important that your website has a responsive design so that mobile visitors can easily navigate your website.

However, simply having a responsive site may not go far enough. Users on mobile devices are often looking for different things than desktop users.

Many premium themes and plugins let you create elements that display differently on desktop versus mobile. You can also use a page builder plugin like SeedProd to edit your landing pages in mobile view.

Previewing a custom page on mobile

You should consider creating mobile-specific content for your lead generation forms. On mobile devices, these forms should ask for minimal information, ideally just an email address. They should also look good and be easy to close.

For more details, you can see our guide on how to create a landing page in WordPress.

Another great way to create mobile-specific popups and lead-generation forms is with OptinMonster. It is the most powerful WordPress popup plugin and lead-generation tool on the market.

Edit campaign design on mobile

OptinMonster has specific device-targeting display rules that let you show different campaigns to mobile users vs desktop users. You can even combine this with OptinMonster’s geo-targeting feature and other advanced personalization features to get the best conversions.

You can see our guide on how to create mobile popups that convert for more information.

We hope this article helped you learn how to preview the mobile layout of your site. You may also want to see our expert picks for the best plugins to convert a WordPress site into a mobile app and learn how to increase blog traffic.

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 View the Mobile Version of WordPress Sites From Desktop first appeared on WPBeginner.

Posted on

How to Use WordPress Theme Customizer Like a Pro (Ultimate Guide)

Did you know that WordPress comes with a built-in theme customizer that allows you to easily make changes to your website design in real time.

While every theme has some level of support for the default customizer options, many themes include additional tabs and options to the WordPress theme customizer, so you can easily customize your theme without any coding knowledge.

In this article, we’ll walk you through the default panels and show you how to use the WordPress theme customizer like a pro.

How to Use WordPress Theme Customizer Ultimate Guide

How to Access the WordPress Theme Customizer

Theme customizer is a default WordPress feature, and it is part of every WordPress website.

You can access it by logging into your WordPress admin area, and then going to Appearance » Customize from the left sidebar of your WordPress admin panel. This will open the Customizer interface with your current theme.

How to access WordPress Customizer

You can also use the WordPress theme customizer page for any of the installed themes on your website even when they are not active.

This allows you to see a live preview of that theme and make changes before you activate it.

To do that, you need to head over to Appearance » Themes page.

Next, hover your mouse cursor over on any installed theme and click on the Live Preview button to open the WordPress theme customizer page.

WordPress Theme Live Preview Option

How to Use the WordPress Theme Customizer

After opening the WordPress theme customizer, you’ll see all customization settings on the left side of your screen, and the live preview of your website on the right side.

WordPress Theme Customizer

WordPress theme customizer comes with a set of default panels regardless of the theme you’re using.

You need to click on the individual panels to make changes to it. You can also click on any of the blue pencil icons on the right side of your screen to open the settings for that particular item.

Note: advanced WordPress themes will add additional setting panels for extra customization options (more on this later).

Let’s take a look at the default options available in the WordPress theme customizer.

Site Identity Panel: Add Title, Logo, and Favicon

The Site Identity panel in the WordPress theme customizer allows you to add or change the title and tagline of your website.

By default, WordPress adds “Just Another WordPress Site” as the site tagline.

It’s recommended to change it after installing WordPress on your site. You can also keep it as blank if you want.

Site Identity Settings to change Site title, tagline, logo, and favicon

Site Identity panel in the WordPress theme customizer also allows you to add your site logo. Simply, click on the Select logo option to upload the logo of your website.

Want to add a favicon to your site? You can do that by clicking on the Select site icon option. For detailed instructions, you can follow our guide on how to create and add a favicon to your site.

WordPress Theme Customizer: Change Colors on Your Website

The controls on the Colors panel will mostly vary depending on the WordPress theme you’re using.

For example, the Twenty Seventeen theme allows you to choose the header text color and select a color scheme for your entire website.

Change Colors on Your Website

Other WordPress themes may offer different color options for site elements like: headings, links, body text, background of your website, etc.

Adding Navigation Menus in Theme Customizer

The Menus panel allows you to create navigation menus and control their location on your website.

On this tabl, you’ll find all existing WordPress menus that you’ve created previously. You can click on the “View All Locations” button to check the available menu locations that your theme supports.

Menus Panel in Theme Customizer

To create a new menu, you need to click on the Create New Menu button.

After that, you will need to give a name to your menu, so you can easily manage it later. You can also select the menu location and then click on Next to proceed.

Create a new navigation menu

To add items to this menu, you need to click on the Add Items button to open a new panel. You can now add custom links, pages, posts, categories, and tags as menu items.

Add items to navigation menu

To reorder the items, you can click on the Reorder link and then use the arrow icons to adjust the menu items.

Control Widgets on Your Website in Theme Customizer

The Widgets panel allows you to add and manage the widgets on your site.

Clicking on it will show you the different locations where you can add widgets. This will vary depending on the theme you’re using.

For example, the Twenty Seventeen theme offers 3 widget locations, whereas the Twenty Nineteen theme comes with just one location.

Widgets panel

When you click on any one of them, you’ll see the widgets that you’ve previously added to that location.

To add a new widget, you need to click on the “Add a Widget” button. This will open a new panel where you’ll see a list of all available widgets.

Add Widgets to your site

You need to click on the one that want to add. You can also make changes to the newly added widgets and adjust its position by dragging them up or down.

Homepage Settings Panel in Theme Customizer

By default, WordPress displays the latest blog posts on your homepage.

However for business websites users prefer to use a custom homepage. It allows you to have a proper landing page that displays your products and services.

To use a custom home page, you need to select “A static page” radio button on the Homepage Settings panel.

Homepage Settings in theme customizer

This will open up two new dropdown menus that you can use to select a page for your homepage and another for displaying your blog posts.

In case you don’t have the pages on your site, you can create a new one by clicking on the “+ Add New Page” link present below the dropdown menu. This will create a blank page with the name of your choice.

Additional CSS Panel for Adding Custom CSS

Do you want to add custom CSS code to style your website? You can do that in the Additional CSS panel.

Intermediate and advanced WordPress users often customize their site by adding CSS code directly to the style.css file of their theme. This adds additional steps like having FTP access to your WordPress hosting, modifying theme files, etc.

An easier solution for beginners is to add your custom CSS code to the Additional CSS panel in the WordPress theme customizer. This will allow you to make changes to your site and see them live on the right side of your screen.

Add Custom CSS code to Additional CSS pane;

When you start writing some CSS code, WordPress will automatically suggest attributes to you based on the letters you type. It will also display error messages if you have not written a proper CSS statement.

Note: If you want to customize your website without writing any code, keep reading. We will share two beginner friendly options that will allow you to easily customize your theme and even create a custom WordPress theme.

Other Theme Customizer Options

Some free and premium themes offer more theme customizer options.

Depending on the theme you’re using, you may be able to change the font style, add a background image, change the layout, modify colors, add random header images, and much more.

You can also add specific features to your theme customizer with the help of plugins. For example, you can add custom fonts in WordPress using the Easy Google Fonts plugin.

Preview Your Website on Different Screen Resolutions

It’s important for every website owner to make sure that their website is mobile responsive and looks good on all screen sizes.

Thanks to the WordPress theme customizer, you can easily check how your website looks on different screen sizes.

At the bottom of the Theme Customizer panel, you’ll find three icons and the “Hide Controls” link.

Preview website on different screen resolutions

These icons allow you to test your site on different screen resolutions like desktop, tablet, and mobile devices.

The Hide Controls link is useful for hiding the WordPress Customizer panel so that you can view your site properly on the desktop mode.

Publish, Save, or Schedule Your Customizer Settings

Once you have made the necessary changes, you need to apply them to your site. Otherwise, all your hard work will be lost.

Go ahead and click on the Publish button to apply the changes. Once done, you can click on the close button, present at the top-left corner of your screen, to exit the theme customizer.

Publish WordPress Customizer settings

What if you need more time to finalize your new design? In that case, you can save it as a draft and even share your new design with someone without giving them access to your admin area.

To do that, you need to click on the gear icon right next to the Publish button. This will open up the Action panel.

WordPress Customizer Save Draft option

Here you’ll find three options: Publish, Save Draft, and Schedule.

You need to select the Save Draft radio button on the Action panel and then click on the Save Draft button to store your changes.

You can now copy the preview link and share it with others to get feedback.

On the other hand, the Schedule option allows you to publish your changes on a specific date and time. You can use this option for scheduling your theme changes to go live at the time when you receive the least traffic.

Schedule Customizer settings on a specific date

Lastly, if you want to reset the unpublished changes, then you can click on the Discard changes link on the Action panel.

Preview Different Themes Without Going Live

There are times when you want to check how a new theme would look on your site. However, you don’t want to activate them on your live website.

In that case, you can open the WordPress Customizer to test new themes without going live.

On the Customizer panel, you’ll find the name of your active theme and the Change button.

Change WordPress Theme from Customizer

If you click on that button, then WordPress will display all your installed themes on the right side of the page.

To check a particular theme, you need to click on the Live Preview button.

Preview Installed themes on Theme Customizer

You can also preview themes from the WordPress Themes Repository. To do that, you need to select “WordPress.org themes” checkbox on the left panel.

This will show themes from the WordPress.org directory. You can click on the “Install & Preview” button to check the theme you like.

WordPress themes directory

You can also filter the themes by clicking on the Filter Themes button present at the top-right corner of your screen.

Note: we recommend using a WordPress staging website to test out new themes instead of using the customizer on a live site.

Import or Export Theme Customizer Settings

Did you know that you can import and export your theme customizer settings?

This is extremely helpful when you are making changes to your theme on your local server or a staging site. Instead of copying the settings manually to your live website, you can simply export the theme customizer settings to save your time.

For detailed instructions, you can follow our guide on how to import and export theme customizer settings in WordPress.

WordPress Theme Customizer Alternatives

Although WordPress Customizer allows you to make changes to your site, the number of controls will vary depending on the theme you’re using.

What if you like your theme, but wish that it had extra customization options?

In that case, the best solution is to use one of the two customization plugins that works alongside the WordPress theme customizer.

CSS Hero

CSS Hero plugin

CSS Hero is a WordPress plugin that allows you to customize your site without writing a single line of code. You have the freedom to style every element of your site without any hassle.

Do you want to customize the login page of your WordPress site? CSS Hero allows you to do that within a few minutes.

You can also edit and preview the changes in the frontend to make sure that your design looks perfect on every device.

Beaver Builder

Beaver Builder plugin

Beaver Builder is one of the best WordPress page builder plugins in the market. It allows you to build stunning pages for your site using a drag and drop interface.

The best part is that Beaver Builder works with almost every WordPress theme. This allows you to use it with your current theme.

Beaver Builder supports the use of shortcodes and widgets. It also offers different types of modules that you can use to easily style your website. See our guide on how to create custom layouts in WordPress for detailed instructions.

You can also use Beaver Builder to create a completely custom WordPress theme without writing any code.

We hope this guide helped you to learn how to use the WordPress Theme Customizer like a pro. You may also want to see our guide on the best WordPress plugins and tools for your website.

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

The post How to Use WordPress Theme Customizer Like a Pro (Ultimate Guide) appeared first on WPBeginner.