Blog

How To Add Facebook Videos To WordPress Posts

Learn to easily embed Facebook videos into WordPress posts and drive more traffic to your website in this step-by-step tutorial …

How To Add Facebook Videos In WordPress

How To Add Facebook Videos In WordPressIn other tutorials, we explain how to add videos in WordPress from video-sharing sites like YouTube.

While YouTube is the world’s largest video-sharing platform, millions of online users post videos on Facebook.

Sharing other people’s Facebook videos is great, but it doesn’t help drive traffic back to your WordPress site.

In this step-by-step tutorial you will learn to easily embed Facebook videos into WordPress posts and drive more traffic to your website.

Why Embed Facebook Videos In WordPress?

Let’s say that you’re on Facebook browsing other users’ content and you come across a great video that someone else has created and uploaded to their page.

This could be something relevant to your business, educational, entertaining, or even someone giving your business a plug and you want to share the video with your own visitors, prospects, or customers.

Most online users typically share content on Facebook using the Facebook Share feature …

Most online users share content on Facebook using the Facebook Share feature

(Most online users share content on Facebook using the Share feature)

While this great feature makes sharing Facebook content with other online users convenient, it mostly keeps the content circulating only inside Facebook …

Sharing Facebook videos keeps the content mostly inside Facebook

(Sharing Facebook videos keeps the content mostly inside Facebook)

If you want videos posted on Facebook to help drive more traffic to your own website, you shoulfd embed the video on your site and promote your site on Facebook instead of sharing the video directly …

Embedding Facebook videos in WordPress can drive more traffic to your site

(Embedding Facebook videos in WordPress can drive more traffic to your site)

Let’s show you how to embed a Facebook video into your WordPress posts or pages.

How To Embed Facebook Videos In WordPress

To embed a Facebook video in WordPress, locate the Facebook post with the video, then hover your mouse over the date link and copy the link address to your clipboard …

Copy Facebook video URL to clipboard

(Copy Facebook video URL to clipboard)

With the video link copied to your clipboard, open a new web browser and go here:

Paste the Facebook video URL from your clipboard into the ‘URL of video’ field in the Embedded Video Player Configurator section (if you want to include the post content with the video, tick the ‘Include full post’ check box) …

Paste Facebook video URL from clipboard

(Paste Facebook video URL from clipboard)

This should display the video (and post content if selected). Scroll down below the video and click the ‘Get Code’ button …

Click the 'Get Code' button

(Click the ‘Get Code’ button)

This will bring up a box with code …

Facebook video embed code

(Facebook video embed code)

There are two sections of code. The first section needs to be added to the header section of your theme’s template …

This code needs to be added to your WordPress theme template

(This code needs to be added to your WordPress theme template)

Instead of messing around with code and editing templates, you can easily add this code to the header section of your template using a free plugin like Insert Headers and Footers

Insert Headers and Footers

(Insert Headers and Footers)

After the plugin has been installed and activated, go to Settings > Insert Headers and Footers

Settings > Insert Headers and Footers

(Settings > Insert Headers and Footers)

Paste the code into the Scripts in Footer section and click the ‘Save’ button …

Paste code into Scripts in Footer section

(Paste code into Scripts in Footer section)

The above step only needs to be done once.

The next section of code should be pasted wherever you want to display the video in your post or page content …

Embed this code into your content to display the video

(Embed this code into your content to display the video)

Once again, instead of messing with code and templates, we can use a plugin to insert code into WordPress content

(Insert code into WordPress content using a plugin)

To learn more about adding code to WordPress content using plugins, see this tutorial:

Adding code to content in WordPress using a plugin allows you to use the same code in different locations.

To create a code snippet, simply paste the code into the plugin’s code field and save …

Create a code snippet

(Create a code snippet)

Next, copy the shortcode of your code snippet to your clipboard …

Snippet Shortcode

(Snippet Shortcode)

Paste the shortcode into your content, wherever you want the Facebook video to display …

Paste the shortcode into your content

(Paste the shortcode into your content)

Publish or update your post/page and preview …

Preview your post or page

(Preview your post or page)

Your Facebook video will be embedded into your content and display on your site to your visitors …

Facebook video embedded in your WordPress post or page

Source: TruckersToyStore.com.au

(Facebook video embedded in WordPress post or page.)

The next step is to add your WordPress post to your Facebook page.

Practical Tip

If you have configured your WordPress site following our FREE WordPress Traffic Automation Blueprint tutorial series, your post should automatically be published to your Facebook page …

Post automatically from WordPress to Facebook

(Post automatically from WordPress to Facebook)

Visit your Facebook page to see the post containing the embedded video …

WordPress post containing embedded video posted on Facebook

(WordPress post containing embedded video posted on Facebook)

Visitors will now come to your WordPress site to watch the embedded Facebook video and share your post on Facebook, driving more traffic to your website and your business …

Embedding Facebook videos in WordPress can grow your web traffic

(Embedding Facebook videos in WordPress can grow your web traffic)

Congratulations! Now you know how to add videos from Facebook to your WordPress posts and pages.

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group

Disclaimer: WordPress and its related trademarks are registered trademarks of Automattic, Inc. This site is not affiliated with nor sponsored by Automattic, Inc. or the WordPress Open Source project. This site and the products and services offered on this site are not associated, affiliated, sponsored, or endorsed by WordPress, nor have they been reviewed, tested, or certified by WordPress. The owner, contributors and/or advertisers may derive financial benefit from sales of items advertised, reviewed, or linked from this site.

***

Did you find this post useful? If so, please consider sharing this article with others who could benefit from learning about WordPress using the share buttons below.

How To Reduce Image File Size In Your WordPress Database

Learn how to reduce the file size of your images to prevent WordPress database issues and improve your site’s performance.

How To Reduce Image File Size In Your WordPress Database

How To Reduce Image File Size In Your WordPress DatabaseSome applications (e.g. WooCommerce) require images to be uploaded to the WordPress Media Library and stored in your WordPress database.

If you run an e-commerce site using an application like WooCommerce, for example, your site may have to store hundreds or even thousands of product images.

Uploading large product images can make your website’s database become excessively large, which can lead to problems with data and file back-ups, slow down your website’s performance, and cause other issues.

In this tutorial, we’ll show you ways to reduce the size of your image files and improve WordPress database performance.

Using Large Images On Your Website

If you plan to use large image files on your website, we recommend not uploading and storing these in your WordPress database, but using a cloud storage service like Amazon S3, Dropbox, etc. instead and adding the image via the Add Media ‘Insert from URL’ tool …

Use an external storage service for adding large images to WordPress!

(Use an external storage service for adding large images to WordPress!)

To learn how to use the Add Media ‘Insert from URL’ tool, see this tutorial:

Depending on the applications you have installed on your website, you may have no other option but to upload and store images in your Media Library and WordPress database.

In this case, you have to make sure that you are not uploading images that are way larger than necessary …

These images are way too large!

(These images are way too large!)

Let’s see why this is a problem …

Media File Management

Images, videos and other media uploaded to your website are normally managed through the WordPress Media Library …

WordPress Media Library

(WordPress Media Library)

Your media settings are configured in your Media Settings section. Here you can specify whether to store media uploads into month and year-based folders or not …

Media Settings

(Media Settings)

Once media files are added to the Media Library, they are then uploaded to your server and stored in your wp-content > uploads folder, which you can access using applications like FTP or via your cPanel’s File Manager

Media files like images are stored in your server

(Media files like images are stored in your server)

And all of this data is stored inside your WordPress database …

WordPress stores all of your website data in a database

(WordPress stores all website data in a database)

Uploading loads of large images (and other media types) to your Media Library, then, will cause your website’s database to also swell up in size …

Storing large media files in your server can cause loads of problems!

(Storing large media files in your server can cause loads of problems!)

Storing large media files in your server and WordPress database can slow down your website’s performance and lead to problems like backing up files, loading web pages, etc.

Important Info

To avoid problems, large media files should be uploaded to the Amazon S3 account or an external service like YouTube (videos) and links to these files then embedded into web content using the WordPress Add Media tool.

Before we look at ways to reduce image file size, let’s go over some image file basics.

Image Specifications & Guidelines

You can avoid problems by setting out specifications and guidelines for using images in your website for your organization.

These include:

  • Understanding image size vs image resolution.
  • Understanding different image formats and when to use these.
  • Specifications for digital and print images and understanding the difference between these.

Let’s briefly go through each of the above:

Image Size vs Image Resolution

Image size refers to the dimensions of an image and is usually expressed in terms of pixels or points.

Image resolution refers to the number of pixels that can fit inside a specific area of a screen or printed surface and is normally expressed in terms of pixels per inch (ppi) or dots per inch (dpi).

For example, the dimensions of the image below are 680 pixels wide x 400 pixels tall …

Image Dimensions

(Image Dimensions)

Using an image editing tool like Photoshop, we can see that the resolution of this image is 72 pixels per inch …

Image Resolution(Image resolution) 

Images for printed publications (e.g. magazines, brochures, etc.) need to be high resolution (e.g. 300 dpi), but most computer screens work really well with low resolution images (72-96 dpi). This includes images like photos, screenshots, logos, etc.

Errors using images occur when confusing image size with image resolution. You can have a very large image with a low resolution (which will not work for print – images will become pixelated), or upload high-resolution images to your website, which will significantly and unnecessarily increase the size of your server’s database.

Image Format

Common formats used for saving images for use in websites include .jpg, .png, and .gif.

For practical purposes and simplicity’s sake, here’s a good commercial rule of thumb when deciding on which image format to use:

  • Save most images as .jpg unless your images need to have a transparent background.
  • If you want your image to have a transparent background, save it as a .png.
  • Animated images (e.g. advertising banners) are normally saved as a .gif.

You can learn more about different image formats here.

Digital Image Specs

If working with a large number of images that must be uploaded to your Media Library and stored in your WordPress database (e.g. product images in WooCommerce), then following the specs below will ensure that your database won’t become excessively large and difficult to manage:

  • Image File Size: Aim for image file sizes no larger than around 500 kb.
  • Image Resolution: 72-96 ppi.
  • Image Dimensions: Try keeping your maximum image width to 900 – 1280 pixels. Typically, a width of 600-800 pixels is sufficient for many product images and screenshots.
  • Image Format: .jpg (maximum quality), unless image requires a transparent background. If image requires a transparent background, then save as .png with transparency turned on.
  • Image Mode: RGB

Print & Display Advertising Image Specs

High-quality printing or display advertising (e.g. magazines) typically require high resolution images (e.g. 300 dpi) saved in CMYK image mode.

Practical Tip

  • If creating images for logos or company artwork, create these as high resolution images in large sizes (e.g. 5,000 pixels wide) as these images will probably be used in print, but make sure to reformat these to digital image specs when using these in digital artwork or uploading to your website.
  • Always work from larger to smaller dimensions and from higher to lower resolutions. Reducing image sizes and resolutions will retain image quality but not the other way round (going from smaller to larger size or resolution will make image appear blurred or pixelated).
  • When creating images from scratch, set the dimensions and resolution before you start.

You can set image size and resolution in Photoshop using the Image > Image Size dialog box …

Photoshop > Image Size

(Photoshop > Image Size)

How To Reduce Image File Size

Before making any changes to images that have already been uploaded to your website and are currently being used in your content, do the following:

  • Back up your website.
  • Download folders containing images to your hard drive. If working in Cpanel File Manager, compress and download a copy of the image folders to your hard drive.
  • Extract and make a copy of these image folders. We’ll edit images in these copied folders to make sure that nothing happens to the original files.
  • Create a folder inside your working images folder where you will edit and save images to (call the folder something like “reduce these”).
  • Select all large images above a certain file size (e.g. 500 kb) and copy these to your working folder.
  • Begin systematically opening and editing these images in an image editing application like Photoshop.
  • Save the edited image in your image editing folder.
  • Replace large file-sized images on your website with the smaller file-sized images you have just created.
  • After replacing all images on your website, review all pages to make sure that all images have been replaced correctly.
  • Delete large images from your server.
  • Go back to your website and check pages and content to make sure that no images are missing in your content.
  • Your files and database should now be significantly reduced in size.

If you can’t see image file sizes in your hard drive’s image folder, do the following:

Open up the folder in your hard drive containing your images, then right-click in your folder and select View > Details

Select View > Details

(Select View > Details)

Now you can see all image file sizes listed …

List of images displaying image file sizes

(List of images displaying image file sizes)

The next step is to start reducing each image to a smaller file size …

Convert .png images to .jpg to reduce file size

(Reduce each file to a smaller size)

Let’s take a look now at ways to reduce image file sizes.

Save Files As .Jpg

Images saved in .jpg format normally result in smaller file sizes than the same image saved in .png format …

For example, if we save our example image as a .png

Image saved as .png

(Image saved as .png)

And then save the same image as a .jpg (maximum quality) …

Image saved as .jpg

(Image saved as .jpg)

You can see that the .png file has a larger file size than the .jpg image…

The .png image is larger than the same image saved a .jpg

(The .png image is larger than the same image saved a .jpg)

Keeping this in mind, here’s something you can do if you have unnecessarily saved lots of image files on your website as .png instead of .jpg.

Convert .png Images To .jpg

Locate and open a large .png file from your working images folder using your image editor (e.g. Photoshop) …

Open a large .png file

(Open a large .png file)

For this example, we have selected an image that is over 3 Mb in size (3,160 kb). If we apply the image specifications from our earlier section to this image, we can see that:

  1. The file doesn’t need to have a transparent background. It can be resaved as a .jpg image.
  2. The image dimensions are larger than necessary.

We can reduce this image file size

(We can reduce this image file size)

Let’s save this file as a .jpg image first and see how much we can reduce the image file size by …

Save the file as a .jpg

(Save the file as a .jpg)

By changing the file format from .png to .jpg, we have significantly reduced the image file size (from 3,160 kb to 900 kb) …

Same image, different file image sizes

(Same image, different file image sizes)

This reduced image, however, is still almost twice as large as the file size specifications we have set for our images (no larger than 500 kb).

Now we have two options. We can reduce image file size by:

  • Reducing file size dimensions
  • Reducing image quality

Reduce File Size Dimensions

Let’s repeat the above process, but this time, we’ll reduce file size dimensions before saving the image as a .jpg.

First, select the image and open the  ‘Image Size’ dialog box (Image > Image Size in Photoshop) …

Image > Image Size

(Image > Image Size)

Change the image dimensions to reduce the image size and make it fit within your specifications …

Reduce image dimensions

(Reduce image dimensions)

Now resave the image as a .jpg and look at the resulting file size …

Same image has been significantly reduced in size

(Same image has been significantly reduced in size)

We have reduced the image file size significantly.

Useful Information

Resizing image dimensions in your web pages will not reduce the file size of the original image in your server. To reduce image file size, change the dimensions of the original image, then replace the original image in your server with your edited image …

Resizing images on your page does not reduce image file size

(Resizing images on your page does not reduce image file size)

Reduce Image Quality

Depending on what you plan to use your images for, reducing image quality by a level or two won’t make that much difference to the final result …

.jpg Image Quality Settings

(JPEG Image Quality Settings)

For example, here is a .jpg image saved using maximum quality image optimization settings (100%) …

JPEG Settings - Maximum Quality 100%

(JPEG Settings – Maximum Quality 100%)

Here’s the same .jpg image saved using the next level down (Very High) …

JPEG Settings - Very High Quality 80%

(JPEG Settings – Very High Quality 80%)

Here’s the same .jpg image saved using the next level down (High) …

JPEG Settings - High Quality 60%

(JPEG Settings – High Quality 60%)

Here’s the same .jpg image saved using the next level down (Medium) …

JPEG Settings - Medium Quality 30%

(JPEG Settings – High Quality 60%)

Here’s the same .jpg image saved using the next level down (Low) …

JPEG Settings - Low Quality 10%

(JPEG Settings – Low Quality 10%)

Although there’s not that much difference in the images, the difference in file sizes can be significant …

Same image different JPEG quality settings

(Same image different JPEG quality settings)

In addition to the above, you can also use the methods below to reduce image size file:

Crop Unnecessary Image Areas

If the are excess  areas around an image that are not required or essential, consider cropping the image to reduce image file size …

Crop excess areas around images to reduce file size

(Crop excess areas around images to reduce file size)

Check Image Resolution

Check to see if any large images uploaded to your website have been saved using a high image resolution and change the settings to reduce image file size …

Images for use in web content don't need very high resolutions

(Images for use in web content don’t need very high resolutions)

Using some or all of the above methods can significantly reduce the file size of your stored images …

Image file sizes can be significantly reduced to improve your website

(Image file sizes can be significantly reduced to improve your website)

Image Compression Plugins

In addition to using the methods described above to reduce image file size, if you have loads of images uploaded to your WordPress media library, we also recommend looking at image compression and optimization plugins.

WP Smush

Smush Image Compression and Optimization Plugin

(WP Smush Image Compression and Optimization Plugin)

WP Smush scans images that you upload (or have already added) to your site and automatically resizes, optimizes, and compresses these, removing unnecessary data before adding it to your media library.

This plugin strips hidden bulky information from your images and reduces file size without losing image quality.

WP Smush automatically optimizes images uploaded to WordPress

(WP Smush automatically optimizes images uploaded to WordPress)

For more information or to download the plugin, go here: Smush

We hope that you have found this information on resizing image file sizes useful. For more help on using images in WordPress, see the tutorials below:

How To Reduce Image File Size In Your WordPress Database

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

Disclaimer: WordPress and its related trademarks are registered trademarks of Automattic, Inc. This site is not affiliated with nor sponsored by Automattic, Inc. or the WordPress Open Source project. This site and the products and services offered on this site are not affiliated, associated, endorsed, or sponsored by WordPress, nor have they been reviewed, tested, or certified by WordPress. The owner, contributors and/or advertisers may derive financial benefit from sales of items linked to, reviewed, or advertised on this site.

***

Did you find this article useful? If so, please share this article with others who could benefit from learning about WordPress using the social links below.

How To Edit Your WordPress Theme Using The WordPress Theme Customizer

Learn how to customize the appearance of your WordPress theme using the WordPress Theme Customizer and WordPress Live Preview feature.

Get Thrive Leads for WordPress

How To Edit Your WordPress Theme Using The WordPress Theme CustomizerWordPress themes provide non-techie website owners not only with an incredible choice of professional web design options and layouts but also great versatility and the ability to further customize the theme and create a unique look and feel for their sites.

In this step-by-step guide for non-techies, we’ll look at how to edit your WordPress theme using the WordPress Theme customizer and explore the options and settings of the WordPress Theme customizer menu.

How To Edit Your WordPress Theme Using The WordPress Theme Customizer

To access the WordPress Theme customizer, log into WordPress, then go to the main menu and select Appearance > Customize

WordPress menu: Appearance > Customize

(WordPress menu: Appearance > Customize)

This brings up the WordPress Theme Customizer screen …

WordPress Theme Customizer screen

(WordPress Theme Customizer screen)

The WordPress Theme Customizer section allows you to edit and configure your theme settings and preview changes live before committing these to your site …

WordPress Theme Customizer: Theme options menu and live preview screen

(WordPress Theme Customizer: Theme options menu and live preview screen)

WordPress Theme Customizer – Live Preview Feature

The Live Preview section contains clickable edit buttons …

Click to edit WordPress theme elements

(Click to edit WordPress theme elements)

Clicking on the edit buttons brings up relevant sections of the Customizer menu and allows you to edit theme elements on the fly …

Edit WordPress theme elements in live preview mode

(Edit WordPress theme elements in live preview mode)

As you make changes to options, fields, or settings, WordPress displays these in the Live Preview section …

View live WordPress Theme edits in the Customizer

(View live WordPress Theme edits in the Customizer)

Once you are happy with the changes you have made to your theme, click the ‘Publish’ button to save these and update your theme settings …

Publish your theme changes

(Publish your theme changes)

In version 4.9, WordPress introduced a number of changes to improve Theme Customizer workflow, such as the ability to save your theme changes in ‘draft’ mode, schedule your theme changes for publishing at a later date, collaborate on theme design improvements with others by sharing design preview links, locking your design to protect it from being changed by other users, and more.

To access these additional publishing settings, click on the gear icon next to the ‘Publish’ button …

Click the gear icon to access additional theme publishing settings

(Click the gear icon to access additional theme publishing settings)

This brings up additional Theme Customizer options …

Additional Theme Customizer options

(Additional Theme Customizer options)

Select one of the publishing options from the ‘Action’ section to save your changes …

Publish your theme changes live, as a draft, or schedule for later

(Publish your theme changes live, as a draft, or schedule for later)

To exit the WordPress Theme Customizer feature, click on the ‘X’ button …

Exit WordPress Theme Customizer

(Exit WordPress Theme Customizer)

Note: If you exit the WordPress Theme Customizer feature without saving your changes, you will be prompted to cancel and save/publish your edits, or navigate away from the page and lose your changes …

WordPress Theme Customizer 'exit without saving' prompt

(WordPress Theme Customizer ‘exit without saving’ prompt)

Sometimes, when exiting the Theme Customizer screen, you may also see a warning from the WordPress Autosave feature asking you to restore your most recent changes …

WordPress Autosave notice

(WordPress Autosave notice)

WordPress Theme Customizer Menu

WordPress Theme Customizer Menu

(WordPress Theme Customizer Menu)

The WordPress Theme Customizer menu provides a number of configurable options and settings. The items you will see on the menu depend on the WordPress theme you have installed on your site and can include the following:

  • Default theme configuration options and settings
  • Custom theme options and settings specific to the active WordPress theme you are currently using
  • Options and settings from active WordPress plugins that you have installed on your site, which affect you current theme.

Let’s go through these menu items …

WordPress Theme Customizer Menu – Active Theme

To change your current WordPress theme, click the ‘Change’ button in the ‘Active theme’ section of the WordPress Theme Customizer menu …

WordPress Theme Customizer menu - Active theme section

(WordPress Theme Customizer menu – Active theme section)

From the ‘Themes’ section, you can select a different theme from the themes you have currently installed on your site …

Select a new theme from your installed WordPress themes

(Select a new theme from your installed WordPress themes)

Or search for new themes from the WordPress theme repository …

Search & Preview WordPress Themes From The Theme Customizer

(Search & Preview WordPress Themes From The Theme Customizer)

You can search, browse, and preview thousands on WordPress themes from from your Theme Customizer screen before deploying changes to your site and speed up the search for new themes with filters for subject, features, and layout.

Changing WordPress Themes – Installed Themes

To change your existing theme to a new theme that you have already installed on your site, click on ‘Live Preview’ …

Installed themes - Live Preview

(Installed themes – Live Preview)

WordPress will display a live preview of the new theme in your Customizer screen. Click on ‘Activate & Publish’ to activate and switch themes …

Click 'Activate & Publish' to change your active WordPress theme

(Click ‘Activate & Publish’ to change your active WordPress theme)

Changing WordPress Themes – WordPress.org Themes

If you can’t find a new theme from the themes you have currently installed on your site, you can browse the WordPress.org free theme repository from the Theme Customizer’s ‘Active theme > WordPress.org themes’ section.

After finding a new theme, click on ‘Install & Preview’ …

Install & Preview new WordPress themes

(Install & Preview new WordPress themes)

The new theme will be installed and display in the Theme Customizer’s ‘Live Preview’ screen …

WordPress Theme switching - live preview

(WordPress Theme switching – live preview)

Click on ‘Activate & Publish’ to activate and switch themes …

Click 'Activate & Publish' to change themes

(Click ‘Activate & Publish’ to change themes)

Useful Information

As mentioned earlier, installing new themes can add new items to the WordPress Theme Customizer menu …

New WordPress themes can add new custom settings to the Customizer menu

(New WordPress themes can add new items to the Customizer menu)

New Theme Customizer menu items often add new configurable theme options and settings to the feature …

WordPress Theme Customizer menu items add new theme options and settings

(WordPress Theme Customizer menu items add new theme options and settings)

To exit the ‘Themes’ section (or any Customizer menu section), click on the arrow to the left of the menu item …

Click on the arrow to exit a Customizer section

(Click on the arrow to exit a Customizer section)

Tip

WordPress themes cannot be deleted or uninstalled from the Customizer section. To delete or uninstall a WordPress theme, go to the Themes section (‘Appearance > Themes’).

To learn more about managing and editing WordPress themes, see the tutorial below:

WordPress Theme Customizer Menu – Site Identity

Click on ‘Site Identity’ in the WordPress Theme Customizer menu …

WordPress Theme Customizer - Site Identity

(WordPress Theme Customizer – Site Identity)

This section lets you customize elements of your site like the logo, site title, tagline, and site icon …

WordPress site identity options

(WordPress site identity options)

To learn more about configuring settings in this section, see the following tutorials:

WordPress Theme Customizer Menu – Colors

Depending on the WordPress theme installed on your site, you can have a choice of options (or a single option, or no options) for customizing your site’s colors …

WordPress Theme Customizer - Colors

(WordPress Theme Customizer – Colors)

WordPress Theme Customizer Menu – Header And Background Image

Once again, depending on the WordPress theme installed on your site, you may see options for customizing your site’s Header and Background image …

Customize WordPress Header and Background images

(Customize WordPress Header and Background images)

To learn more about using logos and images in this section, see the tutorials below:

WordPress Theme Customizer Menu – Menus

To edit your WordPress theme menus in the Theme Customizer, click on the ‘Menus’ section …

WordPress Theme Customizer - Menus

(WordPress Theme Customizer – Menus)

The menus you will see displayed in this section depend on your currently active theme …

Customize your WordPress menus

(Customize your WordPress menus in the Theme Customizer)

To learn more about using menus in WordPress, see the tutorial below:

WordPress Theme Customizer Menu – Widgets

To edit your WordPress theme widgets in the Theme Customizer, click on the ‘Widgets’ menu item …

WordPress Theme Customizer - Widgets

(WordPress Theme Customizer – Widgets)

The widgets displayed in this section will depend on your currently active theme …

Customize your WordPress widgets

(Customize your WordPress widgets)

You can also access the widget section by clicking on the edit buttons in the Live Preview screen …

Edit your theme widget settings in the WordPress Live Preview screen

(Edit your theme widget settings in the WordPress Live Preview screen)

To learn more about using widgets, see the tutorials below:

WordPress Theme Customizer Menu – HomePage Settings

You can configure your WordPress home page settings from the ‘Homepage Settings’ menu item …

WordPress Theme Customizer - Homepage Settings

(WordPress Theme Customizer – Homepage Settings)

To learn more about WordPress home page settings, see the tutorial below:

WordPress Theme Customizer Menu – Additional CSS

You can view and edit some of your WordPress theme’s CSS code by clicking on the ‘Additional CSS’ menu section …

WordPress Theme Customizer - Additional CSS

(WordPress Theme Customizer – Additional CSS)

This brings up the ‘Additional CSS’ section …

Edit your WordPress Theme CSS

(Edit your WordPress Theme CSS)

In WordPress 4.9, several coding enhancements were introduced, such as Syntax Highlighting and Error Checking, which allows users to scan, pinpoint, and fix CSS editing and coding errors quickly and easily from the WordPress Theme Customizer …

Coding Enhancements

(Scan and fix CSS errors easily in your WordPress theme coding)

Useful Tip

Even if you are a non-technical WordPress user, this feature can help you pinpoint issues and alert theme developers about problems with your existing theme.

WordPress Theme Customizer Menu – Plugin Settings

Adding certain plugins to your website can affect your WordPress theme. Depending on the plugins you have installed (e.g. Yoast SEO), you may find new options and settings added to your Theme Customizer menu …

WordPress Theme Customizer - Plugin Settings

(WordPress Theme Customizer – Plugin Settings)

To learn more about using plugins in WordPress, see the tutorials below:

WordPress Theme Customizer Menu – Live Preview Display Options

Most WordPress themes are fully responsive. The WordPress Live Preview feature in the WordPress Theme Customizer lets you see how your site will display in different devices and viewing platforms …

Live Preview Display Options Menu

(Live Preview Display Options Menu)

By default, live previews display your site as seen on a full resolution screen (e.g. a desktop or laptop computer) …

Live Preview - Full Screen Display

(Live Preview – Full Screen Display)

You can also see how your site will display on a tablet screen …

Live Preview - Tablet Screen Display

(Live Preview – Tablet Screen Display)

And on a mobile device screen …

Live Preview - Mobile Screen Display

(Live Preview – Mobile Screen Display)

Click on the ‘Hide Controls’ button to hide the WordPress Theme Customizer menu …

How To Edit Your WordPress Theme Using The WordPress Theme Customizer

(WordPress Theme Customizer – Hide Controls)

This lets you preview your theme without being distracted by the Customizer menu …

Live Preview With Theme Customizer Hidden

(Live Preview With Theme Customizer Hidden)

Congratulations! Now you know how to edit your WordPress theme using the WordPress theme Customizer feature.

How To Edit Your WordPress Theme Using The WordPress Theme Customizer

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

Disclaimer: We are not associated with WordPress or any of the WordPress-related products mentioned on this site. We may receive an affiliate commission from the purchase of third-party products advertised, mentioned or linked from our website. All product images are the copyright of their respective owners, comply with all license terms and agreements of use are used solely for training and illustrative purposes.

***

Did you enjoy this article? Please feel free to share this page with other website owners using the links below.