ADMIN.TRADING

Tag: tutorials

  • How to Connect Microsoft Outlook to WordPress (Step by Step)

    Are you looking for a way to connect Microsoft Outlook to WordPress and send emails from your WordPress site?

    Connecting Microsoft Outlook with WordPress helps improve email deliverability by making sure that your emails reach your subscribers’ inboxes, even if you are sending a lot of them.

    In this article, we will show you how to connect Microsoft Outlook to WordPress, step by step.

    Connect Microsoft Outlook to WordPress

    Why Use Microsoft Outlook to Send WordPress Emails?

    Microsoft Outlook is a great option for business owners who regularly use Office 365.

    You can use your existing Microsoft Outlook account to send emails to your subscribers from your WordPress website.

    The best thing about using Outlook is that it allows you to send a lot of emails at once. You can send up to 10,000 emails per day, which is a much higher limit than other mailing services.

    If you have a busy online store, this will help you send receipts, tracking info, and abandoned cart emails to all your customers.

    Another benefit that Microsoft Outlook provides is that you don’t have to use the default WordPress PHP mail() function to send emails.

    There are many issues with the default mailing method. Plus, many WordPress hosting services don’t have PHP mail properly configured, which leads to email deliverability problems.

    Your emails can end up in the spam folder because email service providers like Gmail can’t detect the email sender.

    However, you can easily overcome this issue using an SMTP service provider to send emails in WordPress through your Outlook account.

    What Is SMTP?

    SMTP, or Simple Mail Transfer Protocol, is an industry-standard technology for sending emails.

    It uses proper authentication, ensuring that your emails reach your users’ inboxes and don’t end up in the spam folder.

    To send your emails, you can connect popular services like SendLayer, SMTP.com, Brevo (Previously Sendinblue), Office 365 / Outlook, Gmail, Amazon SES, and more.

    That being said, let’s see how you can connect your Microsoft Outlook account to WordPress.

    Video Tutorial

    If you prefer written instructions, just keep reading.

    How to Connect Outlook to Your WordPress Site

    The easiest way to add Microsoft Outlook to WordPress is by using the WP Mail SMTP plugin. It lets you securely use the Microsoft API to authenticate your site’s emails.

    WP Mail SMTP

    We will use the WP Mail SMTP Pro version for this tutorial because it includes an Office 365 / Outlook.com integration.

    There is also a free version of WP Mail SMTP with multiple integrations, but it doesn’t let you connect your Outlook account with WordPress.

    Set Up WP Mail SMTP

    First, you will need to install and activate the WP Mail SMTP plugin on your WordPress website. You can refer to our step-by-step guide on how to install a WordPress plugin.

    Note: It’s important to remember that the Outlook mailer will only work if you have an SSL certificate on your website. You can check out our guide on how to set up SSL on a WordPress site.

    Upon activation, you can connect your Outlook account by going to WP Mail SMTP » Settings from your WordPress admin area.

    On the settings page, you will see the ‘From Email’ and ‘From Name’ settings. You can skip these settings because your Outlook account’s settings will override them.

    From Email and Name in WP Mail SMTP settings

    Below that, you will see different options next to the Mailer settings.

    Go ahead and select ‘Outlook’ as your Mailer option.

    Select the Outlook Mailer Option

    Next, WP Mail SMTP will show a new section with settings for your Outlook account.

    It will look like this.

    Outlook Settings in WP Mail SMTP

    To find the Application ID, Application Password, and Redirect URI, you must create a web application within a Microsoft Azure account. Don’t worry; we will walk you through how to do this step by step.

    We recommend keeping the WP Mail SMTP Outlook settings open in a separate tab or window, as you will need to return to this page to enter the information.

    You can use your existing Microsoft email account (Live, Outlook, Hotmail, Office 365, etc.) to log in to Microsoft Azure. Keep in mind that if you do so, then all your WordPress emails will be sent from that email address.

    If you don’t have a Microsoft Outlook account or prefer to send messages from a different email address, you can go to the Microsoft Azure website and create your account. Just make sure that the account you create includes the permissions to send emails.

    The account is free to create, and you don’t need any paid services to set up the mailer. However, Microsoft will ask you to enter your credit card information to reduce spam signups.

    After that, you can log in to the Microsoft Azure Portal using the email address you want to use.

    Create an Application ID

    Once you have opened the Azure Portal, go ahead and click the ‘All services’ option from the sidebar on your left.

    Click All Services option in Azure Portal

    On the next screen, you will see different services offered by Microsoft Azure.

    You can scroll down to the ‘Identity’ section and click on the ‘App registrations’ option.

    Select App Registrations

    After that, you will need to click the ‘+ New Registration’ button.

    This will create your application.

    Create a new registration

    Now, you need to enter a name for your application. This is for your own use, so you can change the name whenever you want.

    For example, you can name it something like ‘WP Mail SMTP: yourdomain.com.’

    As for the ‘Supported account types’ section below, it is a best practice to select the ‘Accounts in any organizational directory (Any Azure AD directory – Multitenant) and personal Microsoft accounts (for example, Skype, Xbox)’ option.

    However, if you don’t see this option in your account types, then you can also select the ‘Accounts in any organizational directory (Any Azure AD directory – Multitenant)’ option.

    Enter a name and select supported account types

    After that, scroll down to the Redirect URI settings.

    You can leave the dropdown settings to ‘Web’ for the first field in the form.

    Keep Redirect Settings to Web

    For the second field, you will need to enter the redirect URI address given in the WP Mail SMTP Outlook settings.

    To find the Redirect URI, simply return to the WP Mail SMTP settings tab or window from your browser. Then copy the web address that is given in the ‘Redirect URI’ field.

    Copy the Redirect URI

    You must paste the URL into the Microsoft Azure app registration form.

    Next, just click the ‘Register’ button.

    Redirect URI Settings

    Microsoft Azure will now take you to another screen where you will see the Application (client) ID.

    Simply click the ‘copy’ icon to copy your application ID.

    Copy the Application ID

    After that, you can enter the application ID into the WP Mail SMTP settings.

    To do that, you need to head over to your WP Mail SMTP settings window and paste the value into the ‘Application ID’ field.

    Paste the copied Application ID in WP Mail SMTP settings

    Create an Application Password

    Once you have entered the application ID, the next thing you need to do is create an application password.

    You can start by clicking the ‘Certificates & secrets’ option in the sidebar on your left.

    Click the Certificates and Secrets option

    On the next screen, you can skip the Certificates section and scroll down to the Client Secrets section.

    Then, just click the ‘+ New client secret’ option to add a client secret.

    Select the New client secret option

    You will now see a new overlay window slide in from the right. In this window, you can enter a description and select a time period for the app password to expire.

    Microsoft Azure lets you select a preset expiry time (3 months, 6 months (recommended), 12 months, 18 months, and so on), or you can set a custom timeframe.

    We recommend selecting one of the preset settings when you are first starting out. You can always change the password expiry time to custom settings in the future.

    Enter a description and set password expiry time

    When you are happy with the settings, just click the ‘Add’ button.

    Then, Microsoft Azure will generate an application password. You can click the ‘Copy to clipboard’ trigger to copy the password under the Value column.

    Copy the application password under the Value column

    Next, you will need to enter this password in your WP Mail SMTP settings.

    To do that, return to the WP Mail SMTP settings and then paste the password into the ‘Application Password’ field.

    Paste the value in the Application Password field

    Set Up API Permissions

    After setting up the Application ID and Application Password in WP Mail SMTP, the next step is to add API permissions.

    To get started, you can click on the ‘API permissions’ option from the menu on your left.

    Click the Api Permissions option

    Next, go ahead and click the ‘Add a permission’ button.

    You will find it in the top-left corner.

    Select the Add a permission option

    When you click the button, a new window will slide in from the right to request API permissions.

    You will have to select the ‘Microsoft Graph’ option to set up API permissions.

    Select the Microsoft Graph option

    On the next screen, Microsoft Azure will ask what type of permissions your application requires.

    You can select the ‘Delegated permissions’ option.

    Select delegate permissions

    Next, you will see multiple options to select permissions.

    However, an easier way to find the right settings is by entering the term ‘send’ in the search bar under the ‘Select permissions’ heading.

    After that, you will have to select the ‘Mail’ tab from the options that appear and then click the checkbox for ‘Mail.Send.Shared’.

    Search send in the search bar and go to the Mail tab

    When you are ready, simply click the ‘Add permissions’ button at the bottom.

    You will have to repeat the API permission steps by clicking on the ‘+ Add a permission’ button and selecting ‘Microsoft Graph’. However, this time, you need to select the ‘Application permissions’ option.

    Select application permissions

    Now, you can enter the same search term, ‘send’, in the ‘Select permissions’ search bar.

    When you see the Mail tab, click on it and then select the checkbox for ‘Mail.Send’.

    Search for send and select mail send option

    Next, go ahead and click the ‘Add permissions’ button.

    After setting up the API permissions, you will have to go back to the WP Mail SMTP settings and click on the ‘Save Settings’ button to finish the Outlook mailer configuration.

    Save settings in WP Mail SMTP

    When you save the settings, you will have to scroll down to the Authorization section in the WP Mail SMTP settings.

    Then, click the ‘Allow plugin to send emails using your Microsoft account’ button.

    Allow the plugin to send emails using your Microsoft account

    As soon as you click on the button, you will be redirected to the Microsoft permissions form.

    All you have to do is click the ‘Yes’ button at the bottom. This will allow WP Mail SMTP to connect to your Microsoft account.

    Give permission to connect to your Microsoft account

    After that, you will be redirected back to the WP Mail SMTP settings page.

    A notice will appear at the top showing that you are ready to send emails through Outlook.

    Notice for successfully adding Microsoft API

    You can now send a test email to check if everything works properly.

    To send a test email, simply go to WP Mail SMTP » Settings and then click on the ‘Email Test’ tab at the top.

    When you are happy with the settings, just click the ‘Send Email’ button at the bottom.

    Go to the Email Test tab

    After sending the email, you must go to your inbox.

    Here, you can check whether you received the test email.

    Test email from WP Mail SMTP

    We hope this article helped you learn how to connect Microsoft Outlook to WordPress. You may also want to check out our comparison of the best email marketing services for small businesses and our complete guide on how to add web push notifications in WordPress.

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

    The post How to Connect Microsoft Outlook to WordPress (Step by Step) first appeared on WPBeginner.

    Go to source

  • How to Create a Custom WordPress Block (Easy Way)

    Do you want to create a custom WordPress block for your website?

    While WordPress comes with a lot of basic blocks for creating content, you might need something more specific for your website.

    In this article, we will show you two ways to create custom Gutenberg blocks for your WordPress site.

    How to create a custom Gutenberg block in WordPress

    Why Create a Custom WordPress Block?

    WordPress comes with an intuitive block editor that allows you to easily build your posts and pages by adding content and layout elements as blocks.

    By default, WordPress ships with several commonly-used blocks. WordPress plugins may also add their own blocks that you can use.

    However, sometimes you may want to create your own custom block to do something specific on your WordPress website because you can’t find a blocks plugin that works for you.

    With custom blocks, you can add unique features and functionality to your website that may not be available in pre-built blocks. This can help automate processes or make content creation for your WordPress blog more efficient.

    For example, you could create a custom block to display testimonials and then easily insert and manage that block without any coding knowledge.

    Having said that, let’s see how to easily create a completely custom block in WordPress.

    For this tutorial, we will be showing you two methods to create a custom block. You can use the quick links below to jump to the method of your choice:

    If you are a beginner and inexperienced with coding, then this method is for you.

    WPCode is the best WordPress code snippets plugin on the market that makes it super easy and safe to add custom code to your website.

    It comes with the block snippets feature that allows you to easily create custom blocks for your WordPress site without writing any code.

    First, you need to install and activate the WPCode plugin. For detailed instructions, you may want to see our beginner’s guide on how to install a WordPress plugin.

    Note: WPCode also offers a free version that you can use to add custom code to your website. However, you will need the Pro version of the plugin to unlock the custom block snippets feature.

    Upon activation, you need to head over to the Code Snippets » + Add Snippet page from the WordPress admin sidebar.

    Once you are there, click the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

    Add new snippet

    This will take you to the ‘Create Custom Snippet’ page, where you can start by typing a name for the custom block that you are about to create.

    Once you have done that, just select the ‘Blocks Snippet’ option from the ‘Code Type’ dropdown menu in the right corner of the screen.

    This will display the ‘Edit with Block Editor’ button in the ‘Code Preview’ box.

    Choose the Block Snippets option and click the Edit with block editor button

    Simply click on this button to launch the block editor.

    Now, a prompt will appear on your screen asking you to save the code snippet to load it in the block editor. Just click on the ‘Yes’ button to move ahead.

    Choose the Yes option in the Save Snippet prompt

    Now that you are in the block editor, you can easily create a custom block using the pre-made blocks available in the block menu.

    For this tutorial, we will be creating a custom block for adding testimonials on your site.

    First, you need to click the ‘+’ button in the top left corner of the screen to open up the block menu.

    From here, drag and drop the Heading block into the block editor interface and name it ‘Testimonials’.

    Add heading block for the testimonials block

    Next, you can use the paragraph, pull-quote, or quote blocks to add testimonials from different clients on your website.

    You can even use the image, site logo, social icons, or site tagline blocks to further customize your Testimonials block.

    Add testimonial quote in the custom block

    You can also customize the size, text color, or background color of your testimonials from the block panel on the right side of the screen.

    Once you are done, don’t forget to click the ‘Update’ button at the top to store your custom block settings.

    Next, just click on the ‘Return to WPCode Snippet’ button at the top to be redirected to the ‘Edit Snippet’ page.

    Click Return to WPCode snippet button at the top

    Once you are there, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ mode.

    Upon activation of the code snippet, your custom block will be automatically added to where you choose to insert it on your website.

    Choose an insertion method

    Next, you have to configure the location of the custom block you created.

    To do this, simply click the ‘Location’ dropdown menu in the ‘Insertion’ section and switch to the ‘Page-Specific’ tab. From here, you can now choose the ‘Insert After Post’ option if you want to show your Testimonials block after the post ends.

    Once you do that, you can also configure the number of posts after which the testimonial block should appear. For example, if you type in the number 3, then the Testimonials block will appear in every third post.

    You can also display the block in between different paragraphs, after post excerpts, and more.

    Choose a block location

    However, if you don’t find the block location that you are looking for, then you can also create your own conditional logic rule to add the custom block to your preferred place.

    To do this, scroll down to the ‘Smart Conditional Logic’ section and toggle on the ‘Enable Logic’ switch.

    Next, you must click the ‘Add New Group’ button to start creating a conditional logic rule.

    Enable the conditional logic option

    For example, if you only want to show the custom block you created on a specific page or post, then you will have to select the ‘Page URL’ option from the dropdown menu on the right.

    After that, you can leave the dropdown menu in the middle as it is and then add the URL of the WordPress page/post of your choice into the field on the left.

    You can also configure your conditional logic rule to only display the custom block on a specific page, logged-in users, on WooCommerce store pages, Easy Digital Downloads pages, specific dates, and more.

    Add conditional logic rule

    Once you are done, scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active’. Then, click the ‘Update’ button to store your settings.

    Your custom block will now be automatically added to all the locations that you selected for the block snippet.

    Activate custom block

    Keep in mind that the custom block you created won’t be displayed as an option in the block menu of the Gutenberg editor.

    You will have to configure the block settings by visiting the Code Snippets page from the WordPress dashboard and clicking the ‘Edit’ link under the block snippet.

    This will open the ‘Edit Snippet’ page, where you can customize the block or change its location and conditional logic rules easily.

    Edit block snippet

    Now visit your website to view the custom block that you created in action.

    Here is our custom Testimonials block on our demo website.

    Testimonials block preview

    Method 2: Create Custom Blocks for WordPress Using Genesis Custom Code Plugin (Free)

    If you are an intermediate user and looking for a free solution, then this method is for you. Keep in mind that you will need to be familiar with HTML and CSS to follow the instructions in this method.

    First, you need to install and activate the Genesis Custom Blocks plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

    Made by the people behind WP Engine hosting, this plugin provides developers with easy tools to quickly create custom blocks for their projects.

    For the sake of this tutorial, we will build a Testimonials block.

    Step 1: Create a Custom Block for WordPress

    First, you need to head over to Custom Blocks » Add New page from the left sidebar of your admin panel.

    Creating a new custom block

    This will bring you to the Block Editor page, where you will be creating a custom block for your WordPress site.

    From here, you can start by giving a name to your block.

    Block name

    Now on the right side of the page, you will find the block properties that you can configure.

    Here you can choose an icon for your block, add a category, and add keywords.

    Configure block settings

    The slug will be auto-filled based on your block’s name, so you don’t have to change it. However, you may write up to 3 keywords in the ‘Keywords’ text field so that your block can be easily found.

    Now, it’s time for you to add some fields to your block. You can add different types of fields like text, numbers, email addresses, URLs, colors, images, checkboxes, radio buttons, and more.

    We will add 3 fields to our custom Testimonials block: an image field for the photo of the reviewer, a textbox for the reviewer name, and a text area field for the testimonial text.

    Just click on the ‘+’ button to insert the first field.

    Add block field

    This will open up some options for the field in the right column. Let’s take a look at each of them.

    • Field Label: You can use any name of your choice for the field label. Let’s name our first field ‘Reviewer Image’.
    • Field Name: The field name will be generated automatically based on the field label. We will use this field name in the next step, so make sure it’s unique for every field.
    • Field Type: Here, you can select the type of field. We want our first field to be an image, so we will pick ‘Image’ from the dropdown menu.
    • Field Location: You can decide whether you want to add the field to the editor or the inspector.
    • Help Text: You can add some text to describe the field. This is not required if you are creating this block for your personal use but may be helpful for multi-author blogs.

    You may also see some additional options based on the field type you choose. For example, if you select a text field, then you will get extra options like placeholder text and character limit.

    Following the above process, let’s add 2 other fields for our Testimonials block by clicking the ‘+’ button.

    In case you want to reorder the fields, then you can do that by dragging them using the handle on the left side of each field label. To edit or delete a particular field, you need to click the field label and edit the options in the right column.

    Publish block

    Once you are done, just click on the ‘Publish’ button on the right side of the page to save your custom Gutenberg block.

    Step 2: Create a Custom Block Template

    Although you created the custom WordPress block in the last step, it won’t work until you create a block template.

    The block template determines exactly how the information entered into the block is displayed on your website. You get to decide how it looks by using HTML and CSS, or even PHP code if you need to run functions or do other advanced things with the data.

    There are two ways to create a block template. If your block output is in HTML/CSS, then you can use the built-in template editor.

    On the other hand, if your block output requires some PHP to run in the background, then you will need to manually create a block template file and upload it to your theme folder.

    Method 1: Using Built-in Template Editor

    On the custom block edit screen, simply switch to the ‘Template Editor’ tab and enter your HTML under the markup tab.

    Block template editor

    You can write your HTML and use double curly brackets to insert block field values.

    For instance, we used the following HTML for the sample block we created above:

    <div class="testimonial-item">
<img src="{{reviewer-image}}" class="reviewer-image">
<h4 class="reviewer-name">{{reviewer-name}}</h4>
<div class="testimonial-text">{{testimonial-text}}</div>
</div>
    Hosted with ❤️ by WPCode
    1-click Use in WordPress

    After that, just switch to the ‘CSS’ tab to style your block output markup.

    Enter your block template CSS

    Here is the sample CSS we used for our custom block:

    .reviewer-name { 
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

.reviewer-image {
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;
}

.testimonial-text {
    font-size:14px;
}

.testimonial-item { 
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;
}
    Hosted with ❤️ by WPCode
    1-click Use in WordPress

    Method 2: Manually Uploading Custom Block Templates

    This method is recommended if you need to use PHP to interact with your custom block fields. You will basically need to upload the editor template directly to your theme.

    First, you need to create a folder on your computer and name it using your custom block name slug.

    For instance, our demo block is called Testimonials, so we will create a testimonials folder.

    Block template folder

    Next, you need to create a file called block.php using a plain text editor. This is where you will put the HTML / PHP part of your block template.

    Here is the sample template we used for our example:

    <div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>
    Hosted with ❤️ by WPCode
    1-click Use in WordPress

    Now you may have noticed how we used the block_field() function to fetch data from a block field.

    We have wrapped our block fields in the HTML we want to use to display the block. We have also added CSS classes so that we can style the block properly.

    Don’t forget to save the file inside the folder you created earlier.

    Next, you need to create another file using the plain text editor on your computer and save it as block.css inside the folder you created.

    We will use this file to add CSS needed to style our block display. Here is the sample CSS we used for this example:

    .reviewer-name { 
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

.reviewer-image {
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;
}

.testimonial-text {
    font-size:14px;
}

.testimonial-item { 
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;
}
    Hosted with ❤️ by WPCode
    1-click Use in WordPress

    Don’t forget to save your changes.

    Your block template folder will now have two template files inside it.

    block template files

    After that, you need to upload your block folder to your website using an FTP client or the File Manager app inside your WordPress hosting account’s control panel.

    Once connected, navigate to the /wp-content/themes/your-current-theme/ folder.

    Create blocks folder inside your WordPress theme folder

    If your theme folder doesn’t have a folder named ‘blocks’, then go ahead and create a new directory and call it blocks.

    Next, you have to upload the folder you created on your computer to the blocks folder.

    Uploaad block template files

    That’s all! You have successfully created manual template files for your custom block.

    Step 3: Preview Your Custom Block

    Before you can preview your HTML/CSS, you will need to provide some test data that can be used to display a sample output.

    Inside the WordPress admin area, edit your block and switch to the ‘Editor Preview’ tab. Here, you need to enter some dummy data.

    Editor preview

    This data won’t be a part of your custom block and will only be used for previewing the changes you made using HTML and CSS.

    Once you have added the data, don’t forget to click on the ‘Update’ button to save your changes.

    Save your template changes

    If you don’t click the ‘Update’ button, then you won’t be able to see the preview of your custom block.

    You can now switch to the ‘Front-end Preview’ tab to see how your block will look on the front end of your WordPress website.

    Front-end preview of your website

    If everything looks good to you, then you can update your block again to save any unsaved changes.

    Step 4: Using Your Custom Block in WordPress

    You can now use your custom block in WordPress like you would any other block.

    Simply edit any post or page where you want to use this block. Then, click the ‘+’ button in the top left corner to open up the block menu.

    Inseting custom block in posts and pages

    From here, find your block by typing in its name or keywords and then add it to the page/post.

    After you insert the custom block into the content area, you will see the block fields you created earlier.

    Block fields preview

    You can fill out the block fields as needed.

    As you move away from the custom WordPress block to another one, the editor will automatically show a live preview of your block.

    Block preview inside the block editor

    You can now save your post and page and preview it to see your custom block in action on your website.

    Here’s how the Testimonials block looks on our test site.

    Custom block live preview

    We hope this article helped you learn how to easily create custom Gutenberg blocks for your WordPress website. You may also want to see our guide on how to create a custom WordPress theme from scratch or see our expert picks for the best block themes for full site editing.

    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 Create a Custom WordPress Block (Easy Way) first appeared on WPBeginner.

    Go to source

  • How to Make a Website Banner (3 Easy Ways)

    Are you looking for an easy way to make a banner for your WordPress website?

    A banner can highlight the products, services, or news updates offered by your website. It can increase user engagement, boost your click-through rate, and encourage visitors to take action.

    In this article, we will show you how to easily make a banner for your WordPress website.

    Make a website banner in WordPress

    What Is a Website Banner?

    A banner is a graphical display that stretches over the top, bottom, or side of a WordPress website. It often includes a brand name and logo, along with other visual elements, to promote a specific product, service, or event.

    For example, if an online store has just announced a sale, then it can show a banner at the top of its pages to tell new visitors about the promotion and encourage them to make a purchase.

    Shop sale preview

    A well-designed banner can make a strong impression and invite visitors to explore the rest of your site. Plus, banners can also be used to promote affiliate products, increase brand awareness, build an email list by encouraging visitors to sign up for your newsletter, and drive traffic to other pages on your site.

    You can also use banners to promote your social media accounts and encourage visitors to follow or like your pages.

    What Is the Best Website Banner Size?

    The ideal website banner size depends on the layout and specific marketing goals of your WordPress blog.

    For example, if you want to display a rectangular and thin banner at the top of the screen, then you can use the Large Leaderboard size, which is 970 x 90.

    Some of the other popular and most-used banner sizes include:

    • Medium Banner: 300 x 250
    • Leaderboard: 728 x 90
    • Wide Skyscraper: 160 x 600
    • Half-Page: 300 x 600
    • Large Leaderboard: 970 x 90
    • Billboard: 970 x 250
    • Large Rectangle: 326 x 280
    • Vertical Banner: 120 x 240
    • Full Banner: 468 x 60
    • Half Banner: 234 x 60
    Banner sizes

    If you want to show a banner for an event in the sidebar, then you can use the Wide Skyscraper or Half-Page banner sizes. Similarly, you can also use the Medium banner size to display a square-shaped banner on your page.

    If you are looking to display ad banners, then you may want to see our beginner’s guide on the highest-performing Google AdSense banner sizes and formats for WordPress.

    Having said that, let’s see how you can easily make a banner on your WordPress website. For this tutorial, we will cover three methods to make a banner, and you can use the links below to jump to the method of your choice:

    Method 1: Make a Website Banner Using OptinMonster (Recommended)

    OptinMonster is the best WordPress banner plugin on the market that allows you to easily create floating bar and popup banners for your website.

    It is the best conversion optimization and lead generation tool that helps you turn website visitors into subscribers and customers.

    Plus, many of OptinMonster’s banner templates have optin fields that allow you to collect the names, email addresses, and phone numbers of your website visitors.

    Step 1: Install OptinMonster on Your Website

    First, you will need to sign up for an OptinMonster account. To do this, simply visit the OptinMonster website and click on the ‘Get OptinMonster Now’ button to set up an account.

    The OptinMonster lead generation tool

    After that, you have to install and activate the free OptinMonster plugin on your WordPress website. For detailed instructions, you may want to see our beginner’s guide on how to install a WordPress plugin.

    Upon activation, the OptinMonster setup wizard will open in your WordPress admin panel.

    From here, you must click the ‘Connect Your Existing Account’ button to connect your WordPress site to your OptinMonster account.

    Connect your existing account

    This will open up a new window on your computer screen.

    From here, you have to click the ‘Connect to WordPress’ button to move ahead.

    Connect OptinMonster to WordPress

    Step 2: Create and Customize Your Banner

    Now that you have connected your WordPress account with OptinMonster, head over to the OptinMonster » Campaigns page from the WordPress admin sidebar.

    From here, you need to click on the ‘Create Your First Campaign’ button to start creating your website banner design.

    Create first OptinMonster campaign

    This will direct you to the ‘Templates’ page, where you can start by choosing a campaign type.

    For example, if you want to show your banner as a bar at the top of the screen, then you can pick the ‘Floating bar’ campaign. Similarly, you can select the ‘Popup’ campaign type to display your banner as a popup.

    After that, you will also need to select a template for the campaign you chose.

    Select the floating bar template

    For this tutorial, we will be choosing a template for the ‘Floating bar’ campaign type.

    Next, you will be asked to give a name for the campaign that you are creating.

    Simply type a name of your choice and click the ‘Start Building’ button to move forward.

    Click the Start Building button

    This will launch the OptinMonster drag-and-drop interface on your screen, where you can start customizing your banner. From here, you can drag and drop fields of your choice from the sidebar on the left onto the banner.

    For example, if you want to add social media icons to your banner to increase your followers, then you can drag and drop the Social Media block from the left sidebar.

    Add blocks to the banner

    After that, just click on the block to open its settings in the left column.

    From here, you can change the button title, add your social media URL, and even change your social media platform from the dropdown menu.

    You can also add other blocks to display videos, images, text, or CTAs in your website banner design.

    Configure block settings from the left column

    After that, you need to select the position of your banner.

    By default, the OptinMonster floating bar is displayed at the bottom of your website screen once you start scrolling.

    However, you can easily change this setting by clicking on the ‘Settings’ icon at the bottom of the sidebar on the left.

    This will open up settings in the left column, where you must expand the ‘Floating Bar Settings’ tab. From here, simply toggle the ‘Load Floating Bar at the top of the page?’ switch to display the banner at the top.

    Toggle the switch to display the banner at the top

    Step 3: Add Triggers for Your Banner

    Once you have designed your banner, switch to the ‘Display Rules’ tab at the top. From here, you can add rules for your banner display.

    Remember that you only need to switch to this tab if you want to add a specific display trigger for your banner. Otherwise, you can skip to the next step.

    For example, if you would like to show your banner when the user is about to leave your site, then you need to choose the ‘Exit Intent’ option.

    Choose Exit Intent option from the dropdown menu on the left

    Once you have done that, just select the ‘On all devices’ option from the dropdown menu in the middle. If you wish to use this display rule for mobile devices only, then you can also choose that option.

    After that, pick the Exit Intent Sensitivity according to your liking and click the ‘Next Step’ button.

    Choose exit intent technology sensitivity

    This will take you to a new screen. Here, you need to make sure that the ‘Optin’ option is selected for the ‘Show the campaign view’ dropdown menu.

    Once you have done that, simply click the ‘Next Step’ button.

    Select the Optin option from the Then dropdown menu

    Your display rule for the banner will now be shown on the screen.

    If you want to change something here, then you can click the ‘Edit’ button to fix it.

    Summary for display rules

    Step 4: Publish Your Banner

    You can now switch to the ‘Publish’ tab at the top and click the ‘Save’ button in the top right corner of the screen.

    After that, simply click on the ‘Publish’ button to display the banner on your website.

    Save and publish the banner

    Now visit your website to see the banner at the top of your screen.

    This is what it looked like on our demo site.

    Optinmonster banner preview

    Method 2: Make a Website Banner Using Canva (Free)

    If you want to make a website banner for free, then this method is for you.

    Canva is a popular web-based tool that allows you to create all kinds of graphics, including banners, logos, posters, book covers, and more. It also offers a free version that you can use to create a website banner design.

    Step 1: Create a Canva Account

    First, you will need to visit the Canva website and click on the ‘Sign Up’ button to create an account.

    If you already have a Canva account, then you can simply log in.

    Create a Canva account

    Upon account creation, you will be taken to your Canva account home page.

    From here, you need to switch to the ‘Templates’ tab from the left column and then search for banner templates using the search box at the top.

    This will display all the banner templates available in Canva. However, some of these templates may be locked because they are paid features.

    Choose a Canva template

    Step 2: Design Your Website Banner

    Once you select a template, Canva’s design interface will be launched on the screen.

    From here, you can customize your banner template according to your liking. You can change the existing content in the template by clicking on the blocks and adding your own text.

    Customize the Canva banner

    You can even add different graphical elements like stickers, photos, and videos by switching to the ‘Elements’ tab in the left column.

    Upon adding an element, you can further change its animation, position, and transparency from the menu at the top.

    You can also upload media files from your own computer by switching to the ‘Uploads’ tab from the left column.

    Add elements from the left column

    To add some text to your banner, simply switch to the ‘Textbox’ tab from the column on the left.

    Once there, you can use default text styles or different font combinations to add some content to your banner.

    You can even add a call to action with a link by selecting the text using your mouse. This will display a link icon at the top of the text.

    Click on the Link icon

    Simply click on that icon and copy and paste the link you want to add.

    After that, click the ‘Done’ button to save it.

    Add link

    Step 3: Get an Embed Code for the Banner

    Once you are happy with your banner customization, just click the ‘Share’ button in the top right corner of the screen.

    This will open up a prompt menu where you must select the ‘More’ option at the bottom.

    Click the More option in the Share prompt

    This will take you to the ‘All Options’ menu, where you have to select the ‘Embed’ option.

    Once you do that, a new prompt will open up on the screen. From here, simply click the ‘Embed’ button.

    Click the Embed button

    Canva will now create an HTML embed code for you.

    Once it’s displayed on the screen, click the ‘Copy’ button under the ‘HTML embed code’ option.

    Copy the HTML embed code

    Step 4: Add the HTML Embed Code in WordPress

    You can now display your banner on your WordPress page, post, or sidebar according to your liking. For this tutorial, we will be showing our banner on a WordPress page.

    First, you need to open the page or post where you want to add the banner.

    Once there, click the ‘+’ button in the top left corner of the screen to find and add the Custom HTML block to the page.

    Once you have done that, simply paste the embed code you copied into the block.

    Add code into the block editor

    Finally, click the ‘Update’ or ‘Publish’ button to save your changes.

    Now visit your website to see the WordPress banner in action.

    Canva banner preview

    Method 3: Make a Website Banner Using Thrive Leads

    You can also create a website banner using Thrive Leads. It’s a popular WordPress popup plugin used by over 114,000+ websites.

    With Thrive Leads, you can design banners that will help you capture leads on your WordPress site and grow your email list.

    Step 1: Install Thrive Leads on Your WordPress Website

    First, you will need to visit the Thrive Themes website and sign up for an account. Once you have done that, head over to your member dashboard.

    From here, go ahead and click the ‘Download and install the Thrive Product Manager plugin’ link.

    Install the Thrive Product Manager plugin

    Next, you need to visit your WordPress website to install and activate the Thrive Product Manager plugin. For detailed instructions, you may want to see our step-by-step guide on how to install a WordPress plugin.

    Upon activation, head over to the Product Manager tab from the WordPress admin dashboard and click the â€˜Log into my account’ button.

    Log into the Thrive Product Manager dashboard

    After entering your login credentials, you will be able to see your Thrive Product Manager dashboard.

    From here, you can select the products that you want to install and use on your site. Simply choose the ‘Thrive Leads’ plugin and click the ‘Install selected products’ button.

    Install the Thrive Leads plugin

    Step 2: Create a Website Banner

    After the plugin installation, you need to visit the Thrive dashboard » Thrive Leads page from the WordPress admin sidebar.

    Once you are there, just click the ‘Add New’ button next to the ‘Lead Groups’ option.

    Create new lead group by clicking the Add New button

    This will display the ‘Add New Lead Group’ popup on your screen, where you need to type a name for the lead group you are creating.

    Make sure to name the lead group in a way that will help you identify it.

    For instance, if you are creating a banner to build your email list, then you can name your lead group ‘Email List Campaign’.

    Type lead group name

    After that, the lead group you created will be added to the screen. From here, you have to click the ‘Add New Type Of Opt-In Form’ button.

    This will open a new prompt where you must choose the type of banner you would like to create.

    Click the Add new Opt-in form button

    You can create a slide-in, ribbon, widget, in-content, lightbox, or scroll mat banner according to your liking.

    These banners will be like a form as they will collect data from your users, including email addresses, phone numbers, and more.

    For this tutorial, we will be creating a ribbon banner for our site.

    Choose an Opt-In form type

    Upon choosing a website banner design type, the prompt will automatically disappear from the screen.

    Now, to open your lead group dashboard, you must click the ‘Add’ button in the right corner of your Lead Groups tab.

    Click the Add button for a form

    This will take you to your Lead Groups dashboard, where all the forms and lead reports for the group will be displayed after your campaign goes live.

    For example, if you want to create a banner to capture email addresses, then all the user information you collect through the banner will be displayed here.

    Click the Create a form button

    For now, you just have to click the ‘Create Form’ button to start building your banner.

    This will open up a new prompt where you must provide a name for the form and click the ‘Create Form’ button.

    Provide a form name

    Once your form has been created, it will be displayed in your Lead Groups dashboard.

    From here, you have to click the ‘Edit Design’ button in the right corner to start building your banner.

    Click the Edit Design button

    Step 3: Customize Your Website Banner

    The Thrive visual editor will now be launched in a new tab on your screen.

    From here, you can start by selecting a template for your banner from the ‘Thrive Leads Library’ prompt.

    You can then use one of the pre-made template as it is or further customize it with the visual editor. Upon making your choice, simply click the ‘Choose Template’ button to move forward.

    Choose banner template

    After adding a template for a ribbon banner, you can easily customize the elements in it by clicking on each one. This will open up the element’s settings in the sidebar on the left.

    For example, if you want to change the button color in your template, then you simply need to click on it to open its settings in the sidebar.

    Choose an element and configure its settings

    If you want to add a completely new element to your banner, then you can also do that by clicking the ‘+’ icon in the right corner of the screen.

    This will open the ‘Add Elements’ sidebar on the right, where you can drag and drop elements of your choice onto the banner.

    For instance, if you want to add social media account buttons to your banner, then you will have to drag and drop the Social Follow element from the right sidebar.

    Add elements to the banner

    Once you are happy with your banner, click the ‘Save Work’ button in the bottom left corner to store your changes.

    After that, you need to return to your Lead Groups dashboard.

    Click the Save Work button

    Step 4: Configure Banner Settings

    Once you are back in your dashboard, you can change the position of your banner by clicking on the ‘Position’ option in the form row.

    This will open the ‘Position Settings’ prompt, where you can choose your preferred banner position from the dropdown menu.

    After that, click the ‘Save’ button.

    Configure banner position

    Next, to configure the display frequency of the banner, click the ‘Display Frequency’ option in the form row.

    This will open the ‘Display Settings’ prompt, where you can use the slider to determine the number of times the banner should be displayed on the screen.

    If you keep the number 0, then the banner will be displayed at all times. Upon making your choice, click the ‘Save’ button to store your settings.

    Configure banner display settings

    If you want to add a specific trigger for your banner display, then you need to click the ‘Trigger’ option in the form row.

    This will display the ‘Trigger Settings’ prompt, where you can choose a trigger for your banner from the dropdown menu, such as after a certain period of time or when a user reaches the bottom of the page.

    Once you are done, click the ‘Save’ button to save your settings.

    Add a trigger for banner display

    Step 5: Publish Your Banner

    After you have configured the banner settings, you need to exit your Lead Groups dashboard and head back to the Thrive Leads dashboard by clicking on the link at the top.

    Once you are there, expand your Lead Groups tab and toggle the ‘Display On Desktop’ switch to ‘On’. If you also want to display your banner on mobile devices, then you can toggle the ‘Display On Mobile’ switch to ‘On’.

    Toggle the Display on desktop switch

    After that, click the gear icon in the top right corner of the Lead Groups tab to open up the display settings.

    Here, you can select the website pages that you want the banner to be displayed on. For instance, if you want the banner to show at the top of all the pages and posts, then you can check the box next to these options.

    Finally, click the ‘Save and Close’ button to save your changes.

    Choose where you want to display the banner

    Now, you can visit your website to check out the banner displayed at the top of the page.

    This is what it looked like on our demo website.

    Preview of banner

    We hope this article helped you learn how to easily make a website banner for WordPress. You may also want to see our beginner’s guide on how to customize colors on your WordPress website and our top picks for the best web design software.

    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 Make a Website Banner (3 Easy Ways) first appeared on WPBeginner.

    Go to source

  • 5 Text-to-Speech Plugins For A Sound WordPress Website

    Adding text-to-speech (TTS) to your WordPress website can make your site more accessible to people with disabilities and enhance the experience of users that prefer listening to content over reading. Here are some of the best TTS plugins you can use to convert text into audio.

    Accessibility and user experience play a crucial role in the success of your website. Text-to-speech brings a whole new dimension to content consumption and provide a convenient and engaging experience for your visitors by converting written text into natural-sounding speech.

    In this post, we provide a basic guide for beginners on text-to-speech (TTS), and take a look at some of the best WordPress text-to-speech plugins, including both free and premium options. We’ll also discuss some of the factors you should consider when choosing a TTS plugin for your website.

    We’ll cover the following areas:

    What is Text-to-Speech?

    Text-to-Speech (TTS) is a technology that converts written text into spoken words. It is a valuable tool that allows computers and digital devices to communicate information audibly, enabling users to listen to written content instead of reading it.

    TTS systems employ various algorithms and linguistic techniques to analyze and transform text into synthesized speech. This technology has gained popularity due to its ability to make digital content more accessible, inclusive, and convenient for a wide range of users.

    How Does Text-to-Speech Work?

    Text-to-Speech technology utilizes a combination of text analysis, linguistic processing, and voice synthesis to convert written text into audible speech. The process typically involves the following steps:

    1.  Text Analysis: The TTS system analyzes the input text, breaking it down into smaller linguistic units, such as words, phrases, and sentences. This step involves identifying punctuation, capitalization, and special symbols to understand the structure and meaning of the text.
    2. Linguistic Processing: The system then applies linguistic rules and algorithms to interpret the text’s syntax, grammar, and context. This includes handling word pronunciation, sentence intonation, and language-specific rules. TTS systems often employ language models and phonetic databases to ensure accurate and natural-sounding speech.
    3. Voice Synthesis: Once the text is analyzed and processed, the TTS system generates speech by transforming the processed text into audio signals. The system uses pre-recorded human speech segments or synthetic voices to create the spoken output. The synthesized speech is then played back through speakers or headphones, allowing users to listen to the converted text.

    It’s important to note that with the recent explosion and proliferation of new AI technologies, TTS voice generation has undergone a remarkable transformation, progressing rapidly from its earlier robotic and expressionless state to becoming ultra-realistic and remarkably human-like. This evolution has been driven by several advancements in machine learning and artificial intelligence techniques.

    By leveraging deep neural networks and sophisticated algorithms, researchers have been able to enhance the quality, naturalness, and expressiveness of synthesized voices.

    One crucial factor behind this progress is the availability of vast amounts of high-quality speech data for training purposes. With the advent of large-scale voice datasets, TTS models can now learn from diverse and extensive samples of human speech, capturing the nuances of pronunciation, intonation, and pacing.

    This abundance of data enables the models to grasp the intricacies of human vocal expression, resulting in more lifelike and engaging synthesized voices.

    Furthermore, researchers have focused on refining the underlying architecture of TTS systems. Waveform synthesis methods, such as WaveNet and Tacotron, have significantly contributed to the improved realism of generated voices. These models employ complex neural networks to directly generate raw audio waveforms, capturing the subtleties of human speech at a granular level.

    By modeling speech patterns and acoustic features with higher fidelity, these systems can produce more natural and human-like voices.

    Voice cloning technologies have also played a prominent role in advancing TTS realism. Through voice cloning, it is now possible to create a synthesized voice that closely resembles a specific individual, including celebrities or historical figures. This process involves training the TTS models with a significant amount of voice recordings from the target speaker.

    By capturing the unique timbre, cadence, and vocal characteristics of the person, voice cloning allows for the creation of personalized and highly authentic synthetic voices.

    Leading providers of realistic AI Text-to-Speech voices include Google Wavenet, Amazon Polly, Microsoft Azure, and IBM Watson.

    Why Use Text-to-Speech?

    Here are several compelling reasons for using Text-to-Speech technology on your website:

    Accessibility

    TTS enhances accessibility and inclusivity and promotes equal access to digital content to a wider audience. It does this by providing an alternative means for users with visual impairments such as blindness or low vision to consume your content and engage with your information just as easily as those without such disabilities.

    TTS plugins also benefit users with diverse abilities. For instance, individuals with reading difficulties, or learning disabilities, such as dyslexia, can rely on TTS to overcome reading challenges. TTS technology can read the text aloud, helping users to comprehend the content more easily and improve their overall browsing experience.

    User Experience Enhancement

    One of the main benefits of using TTS in WordPress is the improvement of the user experience. TTS makes content more engaging, immersive, and interactive, providing an audio option for consuming content, and catering to different users’ learning styles and preferences.

    Some users may prefer listening to the text rather than reading, especially when multitasking or on the go. Adding an audio element to your content through TTS can create a more immersive experience for users, leading to better retention and comprehension and improve SEO metrics such as page on time.

    So, if your site offers educational articles or blog posts, a TTS plugin allows visitors to listen to the content instead of reading it and engage with the material in a more interactive, immersive, and dynamic way, which can lead to increased engagement and greater user satisfaction.

    Additionally, you can expand your audience by enabling users to listen to your articles as podcasts and submit these to various podcasting platforms like iTunes, Spotify, and Google Podcasts.

    Language Learning and Pronunciation

    TTS systems can assist language learners in enhancing their pronunciation skills and understanding of spoken language and be valuable tools for individuals facing language barriers. By listening to the synthesized speech, learners can compare their own pronunciation and practice correct intonation and accents, leading to more accurate and natural-sounding spoken communication.

    Converting text into spoken words in the user’s native or preferred language, breaks down communication barriers and fosters inclusivity. By providing a means to listen to content in their native language, individuals with different linguistic backgrounds can access and comprehend your written information more effectively.

    Various WordPress TTS plugins offer multilingual support, enabling you to reach a global audience effectively.

    Multitasking and Convenience

    TTS enables users to listen to content while engaged in other tasks or situations where reading may not be feasible. People can consume your information while driving, exercising, or performing other activities (e.g. while cooking dinner), making it a convenient ‘hands-free’ option for busy individuals who want to stay productive and informed.

    The flexibility and customization options provided by TTS plugins further enhance user experience by offering a range of customization features, including the ability to choose from different voices, accents, and reading styles. You can select the most suitable voice that aligns with your brand’s tone and style and website design, creating a consistent and personalized experience for your users.

    Productivity and Efficiency

    TTS enables users to listen, process, and absorb information more quickly than traditional reading methods. By converting large amounts of text into spoken words, TTS technology facilitates faster information consumption, leading to improved productivity and time-saving advantages.

    This is useful for users who need to skim through information quickly or who have limited time available. By adjusting the speech rate to their preferred speed, users can efficiently consume a larger volume of content in a shorter period. This time-saving aspect of TTS technology can benefit professionals, researchers, students, or anyone seeking to optimize their workflow and productivity.

    Choosing The Right Text-to-Speech Plugin For Your Site

    Here are some important things to consider when choosing a text-to-speech (TTS) plugin to ensure the best fit for your site’s accessibility needs, customization preferences, and specific technical requirements:

    Compatibility and Integration

    Check if the TTS plugin is compatible with the WordPress version and other plugins or themes used on the site. This will ensure smooth integration without conflicts or compatibility issues.

    Accessibility and Compliance

    Verify that the TTS plugin complies with accessibility standards, such as WCAG (Web Content Accessibility Guidelines). It should provide proper support for screen readers and assistive technologies, ensuring that individuals with disabilities can access the content effectively.

    Voice Options

    Assess the available voice options provided by the TTS plugin. Look for a wide range of voices, accents, and languages to cater to the diverse user base. Ensure that the plugin offers high-quality and natural-sounding voices to enhance the user experience.

    Customization Options

    Evaluate the level of customization the TTS plugin offers. Check if you can adjust the speech rate, volume, pitch, or emphasize certain words or phrases. The ability to customize the TTS settings allows you to align the audio output with the website’s branding and user preferences.

    Multilingual Support

    If your website caters to an international audience, consider TTS plugins that support multiple languages. Ensure that the plugin can accurately pronounce words and phrases in different languages to provide an inclusive experience for non-native speakers.

    Responsive Design

    Confirm that the TTS plugin is compatible with responsive design principles. It should work seamlessly across various devices and screen sizes, adapting to different layouts without compromising the audio quality or user experience.

    Performance and Speed

    Evaluate the performance of the TTS plugin. It should generate audio quickly and efficiently to minimize any delays or loading issues. Ensure that the plugin does not significantly impact the overall website performance or increase page load times.

    Ease of Use

    Consider the usability and user-friendliness of the TTS plugin. It should have a straightforward setup process, intuitive interface, and easy-to-use controls. Look for plugins that provide clear documentation, tutorials, or support resources to assist with installation and configuration.

    Analytics

    Some plugins offer detailed audio analytics that let you track important metrics to understand how your audience interacts with your audio content and gain valuabe insights into the listening behavior of your users.

    Support and Updates

    Check the developer’s track record for providing regular updates and support for the TTS plugin. Ensure that the plugin is actively maintained and compatible with the latest WordPress versions. Look for a responsive support team or community forums where you can seek assistance if needed.

    Pricing and Licensing

    Evaluate the pricing model and licensing terms of the TTS plugin. Determine whether it aligns with your (or your client’s) budget and requirements. Some plugins offer free versions with limited features, while others may have premium plans or subscription-based pricing.

    Now that we have looked at all of the above, let’s look at some actual plugins that will add text-to-speech capabilities to WordPress.

    Text-to-Speech Plugins For WordPress

    Here are some text-to-speech plugins that offer a range of features to amplify the impact of your content, boost user engagement, and create a more inclusive online environment:

    Play.ht

    Play.ht
    Play.ht makes converting articles into spoken words easy.

    Play.ht converts your articles, blog posts, courses, and more into spoken word audio using cutting-edge Text-to-Speech technology and SEO-friendly embedded audio players.

    The WordPress plugin integrates with Play.ht’s SaaS platform and lets you choose from a vast selection of over 800 high-quality and realistic AI Text-to-Speech voices in more than 140 languages, and create RSS podcast feeds that can be submitted to various podcasting platforms.

    It also supports various post types, offers detailed audio analytics, and three types of fully customizable and white-labeled embedded audio players, so you can match the look and feel of your website.

    PlayHT analytics dashboard.
    PlayHT’s analytics dashboard lets you gain useful insights about your audience’s listening behavior. (Source: WordPress.org)

    Key Features of Play.ht Text-to-Speech Plugin for WordPress:

    • Access to 800+ high-quality Text-to-Speech AI voices, improving content accessibility and user engagement.
    • Share your articles as audio on popular social media platforms like Twitter and Facebook.
    • Publish articles and blog posts as podcasts on iTunes, Spotify, and Google Podcasts, expanding your content’s reach.
    • Detailed audio analytics provide a comprehensive view of your audio performance.
    • Use a state-of-the-art Text-to-Voice editor to fine-tune the audio of your articles.

    Play.ht offers a free trial with 100 free words to test the conversion process. A paid account lets you white-label and brand the audio player as your own and access a range of other features.

    More info: Play.ht

    BeyondWords

    BeyondWords
    BeyondWords

    BeyondWords offers a seamless solution to automatically create lifelike audio versions of your WordPress posts and pages with customizable players and advanced text-to-speech algorithms.

    To use the plugin, you will need to create a BeyondWords account (you can start with a free account). Then, copy the project ID and API key from your dashboard, and download and set up the WordPress plugin.

    BeyondWords offers access to a wide range of neural voices from top providers like Google Cloud, Amazon Web Services, and Microsoft Azure. You can also explore premium neural voices exclusive to BeyondWords, including voice clones of professional voice actors. They also offer a voice cloning service that lets you develop a bespoke custom voice for your brand.

    With BeyondWords, you can easily embed audio players on your WordPress site, share your audio manually or via a URL, and download audios as mp3 files.

    BeyondWords example post.
    An example post integrating BeyondWords TTS functionality. (Source: WordPress.org)

    Key Features of BeyondWords Text-to-Speech Plugin for WordPress:

    • Effortless Conversion: Choose which pages and posts you want to convert into audio and BeyondWords automatically creates audio versions and embeds them via a customizable player.
    • Lifelike AI Voices: The platform uses AI voices enhanced by customizable and advanced natural language processing (NLP) algorithms that ensure optimal pronunciation of elements like names, numbers, and dates, while filtering out unnecessary elements.
    • Text-to-Speech Editor: Create or edit audio directly in the intuitive Text-to-Speech Editor. You can customize the audio to suit your preferences and refine the spoken-word experience.
    • Curate Playlists and Podcast Feeds: Create custom playlists that can be embedded, shared via URL, or distributed through podcast feeds to platforms like Apple Podcasts and Spotify.
    • Analytics and Monetization: Access valuable insights with project-level analytics. Track listener engagement and leverage the data to optimize your content strategy, monetize your audio content with self-serve audio advertising, or connect programmatic advertising platforms using VAST integration.

    More info: BeyondWords

    ResponsiveVoice Text To Speech

    ResponsiveVoice Text To Speech
    ResponsiveVoice Text To Speech

    ResponsiveVoice Text To Speech plugin for WordPress provides access to an HTML5-based Text-To-Speech library designed to add voice features across all your devices, making your content accessible and engaging for all users, regardless of their device.

    ResponsiveVoice example post.
    An example post with ResponsiveVoice TTS plugin enabled. (Source: WordPress.org)

    Key Features:

    • Tap the button and listen to any post or page instantly.
    • Place Listen buttons anywhere on your posts or pages using shortcodes.
    • Support for 51 languages and 168 voices, giving you a wide range of options.
    • Unlimited text to speech capabilities.
    • Complies with Web Accessibility Compliance Group 2.0, ADA, and BS 8878:2010 guidelines.
    • Free API Key unlocks access to all available voices.
    • Customize the Listen button appearance using shortcodes, including voice parameters, button text, pitch, volume, and rate adjustments.
    • Read a whole page or specific sections of text by enclosing them in tags.
    • No installation of cURL or any other requirements necessary.
    • Remove the ResponsiveVoice branding with the commercial license option.
    • Experience similar voices in case the selected voice is unavailable on certain platforms, ensuring consistent performance.

    ResponsiveVoice is officially supported by most browsers.

    More info: ResponsiveVoice

    Text to Speech TTS

    Text to Speech TTS
    Text to Speech TTS

    Text to Audio plugin for WordPress is a free plugin that lets you add text-to-speech functionality to your site, so users can read your content aloud in over 20 languages.

    Text To Audio example post with Listen button.
    Customize the listen button and add it anywhere in your content using a shortcode.

    Key Features:

    • Easily add a play button to any post or page, enabling visitors to listen to your content with a single click.
    • Unlimited text to speech capabilities, ensuring that you can convert as much text as needed into high-quality audio.
    • Customize the play button’s color, width, and text based on your site’s language through a convenient filter.
    • Get a live preview of the play button during the customization process, to ensure a seamless blend with your site’s design.
    • Complete control over button appearance and styling using custom CSS.
    • Change the listening language to any language supported by the plugin.
    • Over 20 voices available.
    • Ability to customize the play button directly in the block editor.
    • Add the play button anywhere in your content using a shortcode.

    The plugin is built on the browser speechSynthesis API , so the availability of languages and voices may vary depending on the device and browser used to access your content. Also, the voices sound robotic, but if you are looking to add basic TTS functionality with simple customization options, this is a free plugin you may want to consider.

    More info: Text to Audio

    GSpeech

    GSpeech
    GSpeech text-to-speech plugin for WordPress

    GSpeech uses Google’s advanced speech synthesis technology to add automatic text-to-speech functionality to your website.

    While the voices sound robotic, the plugin does have some nice features, such as the ability to listen to any section of text by highlighting it on your page.

    GSpeech highlight text
    Highlight any section of text to hear it spoken.

    Additionally, the free version offers different speaker styles and customizable settings.

    GSpeech settings
    GSpeech settings screen

    Key Features:

    • Listen to any text on your site: GSpeech allows your visitors to listen to any text content on your website, from articles and blog posts to product descriptions and menus.
    • Select and listen: Users can simply select a portion of text, and the speaker will automatically appear, turning the selected text into speech and providing a seamless and intuitive way for visitors to engage with your content.
    • Flexible Auto-Play: Set auto-play for content to ensure your audio starts at a specific moment and configure the auto-play timeout.
    • Greeting audio: Create a greeting audio for your visitors.
    • Speaking menus: Users can listen to menus by hovering over them, for more accessible and user-friendly navigation.
    • Multi-Language Support: 58 languages supported by Google’s speech synthesis technology.
    • Customizable and Versatile: GSpeech offers a wide range of customization options. Choose from 40 speaker types, customize TTS block styles, tooltip styles, and even set custom events.
    • Unlimited text to speech: Convert unlimited text to speech.
    • Easy administration: The plugin provides a user-friendly administration panel with live previews that lets you fine-tune settings and see the changes in real-time.

    The Pro version of the plugin gives you access to unlimited TTS blocks, more features and professional support.

    Note: The plugin requires the curl library to be enabled on your hosting to function correctly.

    More info: GSpeech

    Take Your Site To The Next Level and Convert Text Into Audio

    AI-powered text-to-speech technologies offer many benefits to businesses and their users, such as accessibility, convenience, enhanced user experience, language learning support, improved productivity, multilingual capabilities, even entertainment experiences.

    The rapid evolution of TTS voice generation from its robotic and expressionless origins to its current state of ultra-realism and human-like quality has been driven by advancements in machine learning, large-scale speech datasets, waveform synthesis methods, and voice cloning technologies. As these technologies continue to improve, we can expect synthesized voices to become even more indistinguishable from human speech and have a profound impact on various applications.

    Incorporating TTS plugins into your WordPress site opens up new possibilities for engaging with users and will help you reach a broader audience. Depending on your needs and budget, WordPress TTS plugins range anywhere from free plugins with basic options and robotic voices, to next-level AI-powered solutions with advanced integration features and ultra-realistic human-like voices (even clone your own).

    Hopefully, this article has given you something to think about — maybe even have an AI-voice think it aloud and narrate it for you 🙂

    If you plan to add text-to-speech to your WordPress site, consider using WPMU DEV hosting. Our hosting is ideal for storing and delivering high-quality audio to your audience and meets all the requirements for ensuring trouble-free TTS plugin installations (e.g. curl library).

    Go to source

  • 5 Text-to-Speech Plugins For A Sound WordPress Website

    Adding text-to-speech (TTS) to your WordPress website can make your site more accessible to people with disabilities and enhance the experience of users that prefer listening to content over reading. Here are some of the best TTS plugins you can use to convert text into audio.

    Accessibility and user experience play a crucial role in the success of your website. Text-to-speech brings a whole new dimension to content consumption and provide a convenient and engaging experience for your visitors by converting written text into natural-sounding speech.

    In this post, we provide a basic guide for beginners on text-to-speech (TTS), and take a look at some of the best WordPress text-to-speech plugins, including both free and premium options. We’ll also discuss some of the factors you should consider when choosing a TTS plugin for your website.

    We’ll cover the following areas:

    What is Text-to-Speech?

    Text-to-Speech (TTS) is a technology that converts written text into spoken words. It is a valuable tool that allows computers and digital devices to communicate information audibly, enabling users to listen to written content instead of reading it.

    TTS systems employ various algorithms and linguistic techniques to analyze and transform text into synthesized speech. This technology has gained popularity due to its ability to make digital content more accessible, inclusive, and convenient for a wide range of users.

    How Does Text-to-Speech Work?

    Text-to-Speech technology utilizes a combination of text analysis, linguistic processing, and voice synthesis to convert written text into audible speech. The process typically involves the following steps:

    1.  Text Analysis: The TTS system analyzes the input text, breaking it down into smaller linguistic units, such as words, phrases, and sentences. This step involves identifying punctuation, capitalization, and special symbols to understand the structure and meaning of the text.
    2. Linguistic Processing: The system then applies linguistic rules and algorithms to interpret the text’s syntax, grammar, and context. This includes handling word pronunciation, sentence intonation, and language-specific rules. TTS systems often employ language models and phonetic databases to ensure accurate and natural-sounding speech.
    3. Voice Synthesis: Once the text is analyzed and processed, the TTS system generates speech by transforming the processed text into audio signals. The system uses pre-recorded human speech segments or synthetic voices to create the spoken output. The synthesized speech is then played back through speakers or headphones, allowing users to listen to the converted text.

    It’s important to note that with the recent explosion and proliferation of new AI technologies, TTS voice generation has undergone a remarkable transformation, progressing rapidly from its earlier robotic and expressionless state to becoming ultra-realistic and remarkably human-like. This evolution has been driven by several advancements in machine learning and artificial intelligence techniques.

    By leveraging deep neural networks and sophisticated algorithms, researchers have been able to enhance the quality, naturalness, and expressiveness of synthesized voices.

    One crucial factor behind this progress is the availability of vast amounts of high-quality speech data for training purposes. With the advent of large-scale voice datasets, TTS models can now learn from diverse and extensive samples of human speech, capturing the nuances of pronunciation, intonation, and pacing.

    This abundance of data enables the models to grasp the intricacies of human vocal expression, resulting in more lifelike and engaging synthesized voices.

    Furthermore, researchers have focused on refining the underlying architecture of TTS systems. Waveform synthesis methods, such as WaveNet and Tacotron, have significantly contributed to the improved realism of generated voices. These models employ complex neural networks to directly generate raw audio waveforms, capturing the subtleties of human speech at a granular level.

    By modeling speech patterns and acoustic features with higher fidelity, these systems can produce more natural and human-like voices.

    Voice cloning technologies have also played a prominent role in advancing TTS realism. Through voice cloning, it is now possible to create a synthesized voice that closely resembles a specific individual, including celebrities or historical figures. This process involves training the TTS models with a significant amount of voice recordings from the target speaker.

    By capturing the unique timbre, cadence, and vocal characteristics of the person, voice cloning allows for the creation of personalized and highly authentic synthetic voices.

    Leading providers of realistic AI Text-to-Speech voices include Google Wavenet, Amazon Polly, Microsoft Azure, and IBM Watson.

    Why Use Text-to-Speech?

    Here are several compelling reasons for using Text-to-Speech technology on your website:

    Accessibility

    TTS enhances accessibility and inclusivity and promotes equal access to digital content to a wider audience. It does this by providing an alternative means for users with visual impairments such as blindness or low vision to consume your content and engage with your information just as easily as those without such disabilities.

    TTS plugins also benefit users with diverse abilities. For instance, individuals with reading difficulties, or learning disabilities, such as dyslexia, can rely on TTS to overcome reading challenges. TTS technology can read the text aloud, helping users to comprehend the content more easily and improve their overall browsing experience.

    User Experience Enhancement

    One of the main benefits of using TTS in WordPress is the improvement of the user experience. TTS makes content more engaging, immersive, and interactive, providing an audio option for consuming content, and catering to different users’ learning styles and preferences.

    Some users may prefer listening to the text rather than reading, especially when multitasking or on the go. Adding an audio element to your content through TTS can create a more immersive experience for users, leading to better retention and comprehension and improve SEO metrics such as page on time.

    So, if your site offers educational articles or blog posts, a TTS plugin allows visitors to listen to the content instead of reading it and engage with the material in a more interactive, immersive, and dynamic way, which can lead to increased engagement and greater user satisfaction.

    Additionally, you can expand your audience by enabling users to listen to your articles as podcasts and submit these to various podcasting platforms like iTunes, Spotify, and Google Podcasts.

    Language Learning and Pronunciation

    TTS systems can assist language learners in enhancing their pronunciation skills and understanding of spoken language and be valuable tools for individuals facing language barriers. By listening to the synthesized speech, learners can compare their own pronunciation and practice correct intonation and accents, leading to more accurate and natural-sounding spoken communication.

    Converting text into spoken words in the user’s native or preferred language, breaks down communication barriers and fosters inclusivity. By providing a means to listen to content in their native language, individuals with different linguistic backgrounds can access and comprehend your written information more effectively.

    Various WordPress TTS plugins offer multilingual support, enabling you to reach a global audience effectively.

    Multitasking and Convenience

    TTS enables users to listen to content while engaged in other tasks or situations where reading may not be feasible. People can consume your information while driving, exercising, or performing other activities (e.g. while cooking dinner), making it a convenient ‘hands-free’ option for busy individuals who want to stay productive and informed.

    The flexibility and customization options provided by TTS plugins further enhance user experience by offering a range of customization features, including the ability to choose from different voices, accents, and reading styles. You can select the most suitable voice that aligns with your brand’s tone and style and website design, creating a consistent and personalized experience for your users.

    Productivity and Efficiency

    TTS enables users to listen, process, and absorb information more quickly than traditional reading methods. By converting large amounts of text into spoken words, TTS technology facilitates faster information consumption, leading to improved productivity and time-saving advantages.

    This is useful for users who need to skim through information quickly or who have limited time available. By adjusting the speech rate to their preferred speed, users can efficiently consume a larger volume of content in a shorter period. This time-saving aspect of TTS technology can benefit professionals, researchers, students, or anyone seeking to optimize their workflow and productivity.

    Choosing The Right Text-to-Speech Plugin For Your Site

    Here are some important things to consider when choosing a text-to-speech (TTS) plugin to ensure the best fit for your site’s accessibility needs, customization preferences, and specific technical requirements:

    Compatibility and Integration

    Check if the TTS plugin is compatible with the WordPress version and other plugins or themes used on the site. This will ensure smooth integration without conflicts or compatibility issues.

    Accessibility and Compliance

    Verify that the TTS plugin complies with accessibility standards, such as WCAG (Web Content Accessibility Guidelines). It should provide proper support for screen readers and assistive technologies, ensuring that individuals with disabilities can access the content effectively.

    Voice Options

    Assess the available voice options provided by the TTS plugin. Look for a wide range of voices, accents, and languages to cater to the diverse user base. Ensure that the plugin offers high-quality and natural-sounding voices to enhance the user experience.

    Customization Options

    Evaluate the level of customization the TTS plugin offers. Check if you can adjust the speech rate, volume, pitch, or emphasize certain words or phrases. The ability to customize the TTS settings allows you to align the audio output with the website’s branding and user preferences.

    Multilingual Support

    If your website caters to an international audience, consider TTS plugins that support multiple languages. Ensure that the plugin can accurately pronounce words and phrases in different languages to provide an inclusive experience for non-native speakers.

    Responsive Design

    Confirm that the TTS plugin is compatible with responsive design principles. It should work seamlessly across various devices and screen sizes, adapting to different layouts without compromising the audio quality or user experience.

    Performance and Speed

    Evaluate the performance of the TTS plugin. It should generate audio quickly and efficiently to minimize any delays or loading issues. Ensure that the plugin does not significantly impact the overall website performance or increase page load times.

    Ease of Use

    Consider the usability and user-friendliness of the TTS plugin. It should have a straightforward setup process, intuitive interface, and easy-to-use controls. Look for plugins that provide clear documentation, tutorials, or support resources to assist with installation and configuration.

    Analytics

    Some plugins offer detailed audio analytics that let you track important metrics to understand how your audience interacts with your audio content and gain valuabe insights into the listening behavior of your users.

    Support and Updates

    Check the developer’s track record for providing regular updates and support for the TTS plugin. Ensure that the plugin is actively maintained and compatible with the latest WordPress versions. Look for a responsive support team or community forums where you can seek assistance if needed.

    Pricing and Licensing

    Evaluate the pricing model and licensing terms of the TTS plugin. Determine whether it aligns with your (or your client’s) budget and requirements. Some plugins offer free versions with limited features, while others may have premium plans or subscription-based pricing.

    Now that we have looked at all of the above, let’s look at some actual plugins that will add text-to-speech capabilities to WordPress.

    Text-to-Speech Plugins For WordPress

    Here are some text-to-speech plugins that offer a range of features to amplify the impact of your content, boost user engagement, and create a more inclusive online environment:

    Play.ht

    Play.ht
    Play.ht makes converting articles into spoken words easy.

    Play.ht converts your articles, blog posts, courses, and more into spoken word audio using cutting-edge Text-to-Speech technology and SEO-friendly embedded audio players.

    The WordPress plugin integrates with Play.ht’s SaaS platform and lets you choose from a vast selection of over 800 high-quality and realistic AI Text-to-Speech voices in more than 140 languages, and create RSS podcast feeds that can be submitted to various podcasting platforms.

    It also supports various post types, offers detailed audio analytics, and three types of fully customizable and white-labeled embedded audio players, so you can match the look and feel of your website.

    PlayHT analytics dashboard.
    PlayHT’s analytics dashboard lets you gain useful insights about your audience’s listening behavior. (Source: WordPress.org)

    Key Features of Play.ht Text-to-Speech Plugin for WordPress:

    • Access to 800+ high-quality Text-to-Speech AI voices, improving content accessibility and user engagement.
    • Share your articles as audio on popular social media platforms like Twitter and Facebook.
    • Publish articles and blog posts as podcasts on iTunes, Spotify, and Google Podcasts, expanding your content’s reach.
    • Detailed audio analytics provide a comprehensive view of your audio performance.
    • Use a state-of-the-art Text-to-Voice editor to fine-tune the audio of your articles.

    Play.ht offers a free trial with 100 free words to test the conversion process. A paid account lets you white-label and brand the audio player as your own and access a range of other features.

    More info: Play.ht

    BeyondWords

    BeyondWords
    BeyondWords

    BeyondWords offers a seamless solution to automatically create lifelike audio versions of your WordPress posts and pages with customizable players and advanced text-to-speech algorithms.

    To use the plugin, you will need to create a BeyondWords account (you can start with a free account). Then, copy the project ID and API key from your dashboard, and download and set up the WordPress plugin.

    BeyondWords offers access to a wide range of neural voices from top providers like Google Cloud, Amazon Web Services, and Microsoft Azure. You can also explore premium neural voices exclusive to BeyondWords, including voice clones of professional voice actors. They also offer a voice cloning service that lets you develop a bespoke custom voice for your brand.

    With BeyondWords, you can easily embed audio players on your WordPress site, share your audio manually or via a URL, and download audios as mp3 files.

    BeyondWords example post.
    An example post integrating BeyondWords TTS functionality. (Source: WordPress.org)

    Key Features of BeyondWords Text-to-Speech Plugin for WordPress:

    • Effortless Conversion: Choose which pages and posts you want to convert into audio and BeyondWords automatically creates audio versions and embeds them via a customizable player.
    • Lifelike AI Voices: The platform uses AI voices enhanced by customizable and advanced natural language processing (NLP) algorithms that ensure optimal pronunciation of elements like names, numbers, and dates, while filtering out unnecessary elements.
    • Text-to-Speech Editor: Create or edit audio directly in the intuitive Text-to-Speech Editor. You can customize the audio to suit your preferences and refine the spoken-word experience.
    • Curate Playlists and Podcast Feeds: Create custom playlists that can be embedded, shared via URL, or distributed through podcast feeds to platforms like Apple Podcasts and Spotify.
    • Analytics and Monetization: Access valuable insights with project-level analytics. Track listener engagement and leverage the data to optimize your content strategy, monetize your audio content with self-serve audio advertising, or connect programmatic advertising platforms using VAST integration.

    More info: BeyondWords

    ResponsiveVoice Text To Speech

    ResponsiveVoice Text To Speech
    ResponsiveVoice Text To Speech

    ResponsiveVoice Text To Speech plugin for WordPress provides access to an HTML5-based Text-To-Speech library designed to add voice features across all your devices, making your content accessible and engaging for all users, regardless of their device.

    ResponsiveVoice example post.
    An example post with ResponsiveVoice TTS plugin enabled. (Source: WordPress.org)

    Key Features:

    • Tap the button and listen to any post or page instantly.
    • Place Listen buttons anywhere on your posts or pages using shortcodes.
    • Support for 51 languages and 168 voices, giving you a wide range of options.
    • Unlimited text to speech capabilities.
    • Complies with Web Accessibility Compliance Group 2.0, ADA, and BS 8878:2010 guidelines.
    • Free API Key unlocks access to all available voices.
    • Customize the Listen button appearance using shortcodes, including voice parameters, button text, pitch, volume, and rate adjustments.
    • Read a whole page or specific sections of text by enclosing them in tags.
    • No installation of cURL or any other requirements necessary.
    • Remove the ResponsiveVoice branding with the commercial license option.
    • Experience similar voices in case the selected voice is unavailable on certain platforms, ensuring consistent performance.

    ResponsiveVoice is officially supported by most browsers.

    More info: ResponsiveVoice

    Text to Speech TTS

    Text to Speech TTS
    Text to Speech TTS

    Text to Audio plugin for WordPress is a free plugin that lets you add text-to-speech functionality to your site, so users can read your content aloud in over 20 languages.

    Text To Audio example post with Listen button.
    Customize the listen button and add it anywhere in your content using a shortcode.

    Key Features:

    • Easily add a play button to any post or page, enabling visitors to listen to your content with a single click.
    • Unlimited text to speech capabilities, ensuring that you can convert as much text as needed into high-quality audio.
    • Customize the play button’s color, width, and text based on your site’s language through a convenient filter.
    • Get a live preview of the play button during the customization process, to ensure a seamless blend with your site’s design.
    • Complete control over button appearance and styling using custom CSS.
    • Change the listening language to any language supported by the plugin.
    • Over 20 voices available.
    • Ability to customize the play button directly in the block editor.
    • Add the play button anywhere in your content using a shortcode.

    The plugin is built on the browser speechSynthesis API , so the availability of languages and voices may vary depending on the device and browser used to access your content. Also, the voices sound robotic, but if you are looking to add basic TTS functionality with simple customization options, this is a free plugin you may want to consider.

    More info: Text to Audio

    GSpeech

    GSpeech
    GSpeech text-to-speech plugin for WordPress

    GSpeech uses Google’s advanced speech synthesis technology to add automatic text-to-speech functionality to your website.

    While the voices sound robotic, the plugin does have some nice features, such as the ability to listen to any section of text by highlighting it on your page.

    GSpeech highlight text
    Highlight any section of text to hear it spoken.

    Additionally, the free version offers different speaker styles and customizable settings.

    GSpeech settings
    GSpeech settings screen

    Key Features:

    • Listen to any text on your site: GSpeech allows your visitors to listen to any text content on your website, from articles and blog posts to product descriptions and menus.
    • Select and listen: Users can simply select a portion of text, and the speaker will automatically appear, turning the selected text into speech and providing a seamless and intuitive way for visitors to engage with your content.
    • Flexible Auto-Play: Set auto-play for content to ensure your audio starts at a specific moment and configure the auto-play timeout.
    • Greeting audio: Create a greeting audio for your visitors.
    • Speaking menus: Users can listen to menus by hovering over them, for more accessible and user-friendly navigation.
    • Multi-Language Support: 58 languages supported by Google’s speech synthesis technology.
    • Customizable and Versatile: GSpeech offers a wide range of customization options. Choose from 40 speaker types, customize TTS block styles, tooltip styles, and even set custom events.
    • Unlimited text to speech: Convert unlimited text to speech.
    • Easy administration: The plugin provides a user-friendly administration panel with live previews that lets you fine-tune settings and see the changes in real-time.

    The Pro version of the plugin gives you access to unlimited TTS blocks, more features and professional support.

    Note: The plugin requires the cURL library to be enabled on your hosting to function correctly.

    More info: GSpeech

    Take Your Site To The Next Level and Convert Text Into Audio

    AI-powered text-to-speech technologies offer many benefits to businesses and their users, such as accessibility, convenience, enhanced user experience, language learning support, improved productivity, multilingual capabilities, even entertainment experiences.

    The rapid evolution of TTS voice generation from its robotic and expressionless origins to its current state of ultra-realism and human-like quality has been driven by advancements in machine learning, large-scale speech datasets, waveform synthesis methods, and voice cloning technologies. As these technologies continue to improve, we can expect synthesized voices to become even more indistinguishable from human speech and have a profound impact on various applications.

    Incorporating TTS plugins into your WordPress site opens up new possibilities for engaging with users and will help you reach a broader audience. Depending on your needs and budget, WordPress TTS plugins range anywhere from free plugins with basic options and robotic voices, to next-level AI-powered solutions with advanced integration features and ultra-realistic human-like voices (even clone your own).

    Hopefully, this article has given you something to think about — maybe even have an AI-voice think it aloud and narrate it for you 🙂

    If you plan to add text-to-speech to your WordPress site, consider using WPMU DEV hosting. Our hosting is ideal for storing and delivering high-quality audio to your audience and meets all the requirements for ensuring trouble-free TTS plugin installations (e.g. cURL library).

    Go to source

  • How to Add FAQ Schema in WordPress (2 Methods)

    Do you want to add FAQ schema in WordPress?

    Adding FAQ schema can help boost your SEO rankings and organic click-through rate by making your frequently asked questions appear directly in Google’s search results.

    In this article, we will show you how to add FAQ schema in WordPress and improve your rankings, step by step.

    How to Add FAQ Schema in WordPress (2 Methods)

    What Is FAQ Schema?

    FAQ schema is a smart markup code, also known as structured data, that you can add to your website pages to help Google identify an FAQ section.

    If you add FAQ schema, then Google may choose to reward you with an enhanced search result listing that also shows FAQs directly below the name of your WordPress website.

    Here’s an example of an FAQ result. Google shows the questions, and you can click the down arrows to see the answers.

    Example of FAQ rich result

    This increased visibility on Google means more traffic to your website. It also makes your blog look like an authority on the subject.

    Plus, FAQ schema makes your content more helpful to users who prefer the question-and-answer approach.

    With FAQ schema, you have control over the questions and answers. You can customize the content however you like. You can even add emojis to boost your organic click-through rate (CTR).

    Your FAQs can also appear in Google’s ‘People also ask’ boxes, which is another potential visibility boost.

    These boxes appear for many search queries and offer a list of additional questions, each linked to a website for more information.

    FAQ schema can appear in the People Also Ask box

    It’s important to note, though, that adding FAQ schema in WordPress will not guarantee that your FAQs appear on Google. However, it will improve your chances of being seen.

    FAQ Schema Guidelines

    Before adding FAQ schema to your pages and posts, it’s important to understand Google’s content guidelines.

    FAQ schema content guidelines

    You should only use FAQ schema if your page has a list of questions with answers. If your page only asks one question, then you should use the QA schema instead.

    You should not use FAQ schema for advertising purposes or for questions and answers that contain violent, obscene, hateful, dangerous, or illegal language.

    If the same question and answer appear multiple times on your page, then it’s important to only add FAQ schema in one instance.

    The questions and answers in your FAQs must also appear in the content on your page.

    Finally, make sure each question includes the entire text of the question and each answer includes the entire text of the answer.

    How to Add FAQ Schema in WordPress

    The easiest way to add FAQ schema in WordPress is to install a plugin that handles it for you, but you can also do it without a plugin.

    We will cover both options and you can use the quick links below to jump to the method you want to use:

    1. Adding FAQ Schema in WordPress With All in One SEO
    2. Adding FAQ Schema in WordPress Without a Plugin
    3. Testing Your WordPress FAQ Schema

    Method 1: Adding FAQ Schema in WordPress With All in One SEO

    The best way to add FAQ schema in WordPress is with the All in One SEO Pro plugin. It’s the best SEO plugin for WordPress, used by over 3 million sites.

    The first thing you need to do is install and activate the plugin. For more details, see our guide on how to install a plugin in WordPress.

    Note: There is a free version of All in One SEO available, but you need the premium version to add FAQ schema in WordPress.

    Upon activation, the plugin will run a setup wizard. You can follow the on-screen instructions to set it up. If you need more help, then please take a look at our guide on how to properly set up All in One SEO for WordPress.

    All in One SEO setup

    Once you are done with the setup, you will return to the WordPress dashboard.

    You can see a new ‘All in One SEO’ menu item in the admin sidebar.

    All in One SEO menu item

    If you had the free version of All in One SEO installed, then all of your settings will automatically transfer to the Pro version. The free version will be automatically deactivated.

    Now that All in One SEO is installed and activated, you need to navigate to the page or post where you would like to add FAQ schema.

    Simply scroll down to the bottom of the content editor, where you will see the AIOSEO Settings.

    When you click on the ‘Schema’ tab, you can see that the schema settings are automatically enabled by default. Then, you can click on the ‘Generate Schema’ button to customize it.

    All in One SEO Schema Settings

    This will bring up the Schema Catalog, where you can select the type of schema you want to implement.

    Next, you need to find the FAQ option and click the ‘Add Schema’ button next to it.

    Choose FAQ from the Schema Catalog in AIOSEO

    Now, you can start entering your FAQ information.

    Start by adding a name and description for your page or post. You can even use AIOSEO’s easy emoji picker to add emojis to these fields.

    Add name and description for FAQ

    After that, you should scroll down to start adding the Question and Answer fields for your first FAQ question.

    You can also click the ‘Add Another Question’ link to add more questions.

    Add FAQs to All in One SEO

    Once you are done, don’t forget to click the ‘Add Schema’ button.

    If you want to test whether your FAQ schema markup is correctly added, then scroll down to our section on how to test your WordPress FAQ schema.

    Method 2: Adding FAQ Schema in WordPress Without a Plugin

    If you want to add FAQ schema in WordPress without a plugin, then you can do it by using our manual code method.

    First, you will need to generate the FAQ schema code. You can do this by using the FAQPage JSON-LD Schema Generator.

    FAQ schema generator

    Start by adding your questions and answers on the left side of the tool. You can click ‘Add Another FAQ’ to add as many questions as needed.

    As you type, the schema markup will update on the right.

    Add questions to schema generator

    Your next step is to paste the code you just created into WordPress. Simply click ‘Copy FAQ Schema’ to copy the code.

    After that, navigate to the page or post where you want to add the FAQ schema.

    If you are using the block editor, then you need to add a Custom HTML block and paste the FAQ schema markup inside that.

    Add FAQ schema in the block editor

    If you are still using the old classic editor, then you need to toggle to the text editor.

    After that, you can paste the schema markup at the bottom of your post.

    Add FAQ schema in the classic editor

    When you are finished, just click the ‘Update’ or ‘Publish’ button to save your changes.

    Testing Your WordPress FAQ Schema

    Since your FAQ schema code is specifically for Google, you can’t tell whether it’s working just by looking at your page.

    To test whether your FAQ schema markup is correct, you can use Google’s Rich Results Test page. Simply enter the URL of the page with FAQ schema and click ‘Test URL’.

    Google's Rich Results Test

    Google will analyze your page for all kinds of schema markup, not just FAQ schema. You may see multiple results if your page uses other kinds of schema.

    Once the text is complete, expand the results under the “FAQ” heading.

    Rich results FAQ schema section

    You should see the actual question-and-answer pairs that you added to your FAQ section. If these are correct, then you are all set.

    If they aren’t correct, then you will need to go back and double-check that you set up your FAQ schema properly.

    FAQ schema test results

    If the correct items still aren’t showing, then we recommend clearing your WordPress cache because caching plugins may show an outdated version of your content to Google.

    We hope this article helped you learn how to easily add FAQ schema in WordPress. You may also want to see our ultimate WordPress SEO guide to boost your rankings and our expert picks for the best social media plugins for WordPress.

    The post How to Add FAQ Schema in WordPress (2 Methods) first appeared on WPBeginner.

    Go to source

  • How to Sell Car Parts Online With WordPress (Step by Step)

    Are you looking for a way to sell car parts online on your WordPress website?

    If you have an automotive business, then a website is a great way to reach new customers. It can also improve the customer experience by allowing car owners to look through your entire catalog and order auto parts online.

    In this article, we will show you how to sell car parts online with WordPress.

    How to sell car parts online with WordPress

    Which Is the Best Website Builder to Sell Car Parts Online?

    There are many website builders that you can use to sell car parts online, but we recommend using WordPress.

    According to our blogging research statistics, WordPress is the most popular website platform in the world. It powers nearly 43% of all websites, including many of the top eCommerce websites.

    WordPress is also open-source and free, so you will have bigger profit margins. For more on this topic, see our article on why WordPress is free.

    However, just be aware there are two types of WordPress software. First, there is WordPress.com, which is a blog hosting platform. Then, there is WordPress.org, which is also known as self-hosted WordPress.

    For a detailed comparison, please see our guide on the difference between WordPress.com and WordPress.org.

    For an eCommerce site, we recommend using WordPress.org because it gives you complete ownership of your website and online store. You can also install third-party plugins, including the popular WooCommerce eCommerce plugin.

    According to our WordPress market share report, WooCommerce is used by 8.8% of all websites, which makes it more popular than Shopify for online stores and eCommerce sites.

    To learn more about why we recommend WordPress to all our readers, please see our complete WordPress review.

    We will now show you how to sell car parts online with WordPress. You can use the quick links below to jump to the different parts of the article:

    Step 1: Set Up Your Auto Parts Website

    To start selling car parts online, you will need a domain name and web hosting.

    A domain name is your store’s address on the internet. This is what customers will type into their browsers to reach your website, such as www.carparts.com or www.buyautoparts.com.

    Web hosting is where your site lives online. To help you find the right hosting for your business, we have created a complete list of the best WordPress hosting that you can buy.

    Although the WordPress software is free, hosting and domain names are where the costs can really start to add up.

    A domain name typically costs $14.99/year, and hosting costs start from $7.99/month. This can make it difficult if you are a new business or have a limited budget.

    Thankfully, Bluehost is offering our readers 60% off web hosting, plus a free domain name. Bluehost is one of the largest hosting companies in the world and an official WordPress-recommended hosting partner.

    They are also offering our users a free SSL certificate. If you want to sell car parts online, then an SSL certificate is essential for keeping customer credit and debit card information safe.

    You can click the button below to get started for as little as $2.75 per month.

    → Click Here to Claim This Exclusive Bluehost Offer ←

    Once on the Bluehost website, click the green ‘Get Started Now’ button.

    The Bluehost web hosting website

    This will bring you to the Bluehost pricing page, where you can choose a hosting plan for your auto part business.

    We recommend choosing a Basic or Plus plan, as they are the most popular web hosting plans among our readers.

    Bluehost's pricing plans

    After selecting a plan, click on ‘Continue.’

    On the next screen, you will need to choose a domain name.

    Choosing a domain name for an automotive store

    Ideally, your domain name will be easy to pronounce, spell, remember, and relate to your business. The name of your auto parts business is a great place to start, but sometimes that domain may already be taken by another business website.

    In that case, you can try extending the domain name by adding your location, what makes your auto parts business unique, or some extra keywords. If you need some inspiration, then check out our guide on how to choose the best domain name.

    After choosing a name, click on the ‘Next’ button to continue.

    Now you will need to provide your account information, such as your name and business email address. After that, you will also see optional extras that you can buy.

    We generally don’t recommend buying these extras straight away, as you can always add them later if your business needs them.

    Bluehost package extras

    After that, type in your payment information to complete the purchase.

    After a few moments, you will get an email with instructions on how to log in to your web hosting control panel. This is your hosting account dashboard, where you can manage your car parts website, including setting up email notifications and asking for WordPress support.

    It’s also where you will install the WordPress software, so let’s do that now.

    Step 2: Create a New WordPress Website

    If you sign up with Bluehost using our link, then Bluehost installs WordPress on your domain name automatically.

    If you want to create a different WordPress website, then go ahead and click on the ‘My Sites’ tab in the Bluehost dashboard.

    After that, you need to click on the ‘Add Site’ button and select ‘Create New Site.’

    Creating a new WordPress website with Bluehost

    The Bluehost wizard will now walk you through the setup process.

    First, you will need to type in a site title and an optional tagline.

    Adding a site title and tagline to WordPress

    When you are ready, just click on the ‘Next’ button to continue.

    After that, Bluehost will ask you to choose a domain name and path for your car parts website. If you already own a domain name, then go ahead and select it from the dropdown menu.

    Selecting a domain name for an automotive parts website

    If you don’t have a domain name, then you can buy one by visiting the ‘Domains’ page inside the Bluehost dashboard.

    After choosing a domain name, you can leave the directory path blank and let Bluehost fill it in for you.

    The installer will also show a few plugins that you may want to install on your car parts website, including WPForms. Many of these are must-have WordPress plugins that can help you grow your business and get more sales, so we recommend installing them.

    When you are ready, click on the ‘Next’ button, and the installer will set up your car parts website. Once it’s finished, you will see a ‘WordPress installed successfully’ message with information about your new website.

    You can now go ahead and click on the ‘Log into WordPress’ button, which takes you to your site’s admin dashboard.

    How to create a car parts website with WordPress

    You can also log in to the WordPress dashboard by going to yoursite.com/wp-admin/ in your web browser.

    If you are using a different WordPress website host, such as SiteGround, Hostinger, HostGator, or WP Engine, then you can see our complete guide on how to install WordPress for all the top hosting providers.

    Now that you have successfully set up WordPress, you are ready to start building your automotive parts website.

    Step 3: Choose a WordPress Theme

    WordPress themes are professionally-designed templates that change how your automotive website looks and acts.

    By default, each WordPress site comes with a basic theme. If you visit your website now, then you will see something like the following image.

    An example of a default WordPress theme

    If you want to make a great first impression with customers and get more sales, then it’s a good idea to replace the default WordPress theme.

    There are lots of different premium and free WordPress business themes to choose from. You can generally categorize these as niche industry themes or multipurpose WordPress themes.

    Your typical automotive website needs special features, like the ability to show listings, support for popular eCommerce plugins, and a VIN decoder tool.

    With that in mind, it makes sense to look for a theme that’s designed for the car industry. To help you out, we have collected the best WordPress themes for car dealerships and the best themes for auto repair.

    You can also use a website and landing page builder plugin like SeedProd.

    The SeedProd page builder plugin

    SeedProd is the best drag and drop WordPress page builder and comes with built-in templates that you can use to create a professionally-designed car parts website.

    It even has a template that’s designed specifically for the car industry.

    How to sell car parts online with SeedProd

    Once you have chosen a theme, check out our step-by-step guide on how to install a WordPress theme. After installing your theme, you can customize it by going to Appearance » Customize in the WordPress dashboard.

    This will open the theme customizer, where you can fine-tune the theme settings and see your changes instantly, thanks to the live preview.

    The WordPress theme customizer

    If you are using one of the newer full site editing themes, then you can customize your theme by going to Appearance Â» Editor. This launches the full site editor, which uses blocks similar to the content editor.

    Pro Tip: No matter which theme you are using, you can’t edit it by default using advanced drag and drop. For that reason, we recommend using a page builder like SeedProd instead.

    Step 4: Create a Custom Home Page

    WordPress has two default content types called posts and pages.

    You will typically use posts to create articles and blogs. By default, the home page will show these posts in reverse chronological order, so the newest content appears at the top of the home page.

    An example of a car parts blog

    Blogging can help you build a stronger relationship with your customers, improve your WordPress SEO, and get more traffic to your automotive website.

    For example, you might share tips on how to diagnose common car problems or blog about the latest industry trends.

    However, even if you plan to blog, you typically don’t want to show those posts on your automotive website’s home page. Instead, we recommend creating a custom home page that introduces your car parts business to potential new customers.

    For step-by-step instructions on how to create an attention-grabbing auto parts home page, please see our guide on how to create a custom home page in WordPress.

    Once you are happy with how the page looks, it’s time to set it as your home page. To do this, head over to Settings » Reading in the WordPress dashboard.

    The WordPress reading settings

    On this screen, you need to scroll to ‘Your homepage settings’ and select ‘A static page.’

    With that done, just open the ‘Homepage’ dropdown and choose the page you want to use.

    The WordPress homepage settings

    After that, scroll to the bottom of the screen and click on ‘Save Changes.’ Now, if you visit your auto parts website, then you will see the new home page in action.

    If you are going to write blogs, then you should also make sure to create a separate blog page to show your posts.

    Step 5: Set Up an eCommerce Plugin

    WordPress doesn’t have eCommerce features by default, so you will need a plugin to sell car parts online. The easiest way to sell physical products is by using WooCommerce.

    WooCommerce is the most popular eCommerce plugin in the world and has everything you need to sell car parts online.

    First, you will need to install and activate the WooCommerce plugin. If you need help, then please see our guide on how to install a WordPress plugin.

    Upon activation, you will see the WooCommerce setup wizard. The first thing you will need to do is type in your store’s location.

    The WooCommerce setup wizard

    After that, click on the ‘Continue’ button.

    On the next screen, you can select your industry. Since you are going to sell car parts online, you will typically want to check the box next to ‘Other.’

    After that, type your industry into the ‘Description’ field.

    How to sell car parts online with WooCommerce

    With that done, click on ‘Continue.’

    You can use WooCommerce to sell all kinds of products, including digital downloads, bookings, and WooCommerce subscriptions.

    However, since you are selling automotive parts, make sure to check the ‘Physical products’ box.

    The WooCommerce setup wizard

    When you are happy with the information you have entered, click on ‘Continue.’

    With that done, you can choose how many products you plan to sell and whether you are currently selling anywhere else.

    How to create an online store with WooCommerce

    After entering this information, just click on the ‘Continue’ button.

    The setup wizard will now recommend some business features that you can add to your online store. These features are free, so we recommend selecting the following checkbox ‘Add recommended business features to my site.’

    Adding recommended features to an online store

    When you are happy with the information you have entered, simply click on ‘Continue’ to set up your online store.

    Step 6: Set Up Shipping for Your Car Parts

    Next, you can add shipping options by going to WooCommerce » Settings.

    The WooCommerce settings screen

    Here, you need to click on the ‘Shipping’ tab.

    With that done, select ‘Add shipping zone.’

    How to add shipping to an online store

    On the next screen, type in a name for the zone and select one or more regions from the dropdown menu.

    Once you have done that, simply click on the ‘Add shipping method’ button.

    How to set up WooCommerce shipping

    Now, you will see different shipping methods in the dropdown menu. You can choose between a flat rate, free shipping, or even offer local pickup.

    Select your preferred shipping method and click ‘Add shipping method.’

    Adding shipping methods to an online automotive store

    WooCommerce will now add your chosen shipping method to the shipping zone.

    To configure the shipping method, simply hover over it and then click the ‘Edit’ button.

    Editing shipping methods to a WooCommerce automotive store

    You will see a popup with more settings you can use. 

    The settings will vary depending on the shipping method you choose. For example, if you select ‘Flat rate’, then you can change the method title, add a tax status, and enter the total shipping cost.

    How to set up flat rate shipping in WooCommerce

    After entering this information, go ahead and click on ‘Save changes.’

    You can create as many shipping zones as you want by repeating these steps.

    Step 7: Set Up Payments for Your Car Parts Business

    Next, you need to add payment options so that customers can buy your car parts online. To get started, head over to WooCommerce » Settings and select the ‘Payments’ tab.

    Adding payment methods to an auto parts website

    This opens a screen with all the different payment methods and WooCommerce payment gateways that you can use.

    Simply find the method you want to enable and click on its ‘Finish set up’ button.

    How to sell car parts online in WordPress

    You can now set up this payment method by following the onscreen instructions.

    When you are finished, don’t forget to click on the ‘Save changes’ button.

    How to accept credit card payments in WordPress

    To make the payment method live on your site, click on the ‘Payments’ tab.

    Then, simply click on the method’s toggle so it turns from grey (disabled) to purple (enabled).

    Enabling WooCommerce payments

    To get more sales in your online store, you may want to offer multiple payment methods. For example, you might accept credit card payments on your WordPress site, plus cash on delivery.

    To add more payment methods, simply follow the same process described above.

    Step 8: Create Product Attributes and Attribute Terms

    By default, WooCommerce creates each product as a ‘Simple Product.’ However, you will probably want to offer the same car part for multiple models or brands.

    The easiest way to do this is by creating a variable product. This allows customers to visit a single product listing and then choose the right product variation for their car, as you can see in the following image.

    How to sell car parts online with WordPress

    To create variable products, you will first need to set up attributes and attribute terms.

    For example, if you are selling tires, then you might make a ‘Season’ attribute and then add ‘Winter’ and ‘Summer’ as the attribute terms.

    This will allow customers to choose between winter tires and summer tires.

    An example of a car part, created using WordPress and WooCommerce

    You might also create a ‘Model’ attribute and then add each car model as an attribute term.

    By adding attributes and attribute terms to your online store in advance, you will find it easier to create variable products later.

    With that being said, head over to Products » Attributes. You can now type a title for the attribute into the ‘Title’ field. This will appear on your product pages, so make sure you use something descriptive.

    Adding product attributes to an online store

    For more on this topic, see our guide on how to add product attributes to WooCommerce.

    When you are happy with the information you have entered, click on ‘Add attribute.’

    Adding car parts as a variable product

    This attribute will now appear towards the right of the screen.

    Next, go ahead and click on the ‘Configure terms’ link.

    Configuring terms for a variable product

    This brings up a screen similar to the main attribute screen, where you can start adding attribute terms.

    To start, type the term’s title into the ‘Name’ field.

    Adding terms to an eCommerce store

    When you are happy with the information you have typed in, just click on the ‘Add new…’ button.

    Simply repeat the above steps to create more attribute terms. You can also create as many product attributes as you want and then add unique terms to those attributes.

    Examples of product attributes, created using a WordPress eCommerce plugin

    Step 9: Add Your Car Part Products

    After creating some product attributes and terms, you are ready to start adding car parts to your online store. You can add each product manually or import WooCommerce products from a template, CSV file, or another service.

    In this guide, we will show you how to add car parts to your store manually, so start by going to Products » Add New.

    On this screen, start by typing in the product name. This will appear at the top of the product page, so visitors will be able to see it.

    Adding a car part to an online store

    After that, type in a description and add a product image.

    If you want to show multiple images, then you can click on ‘Add product gallery images.’ You can even add interactive 360-degree images in WordPress.

    Adding car part product images

    After that, it’s a good idea to add categories and tags to the product. These will help customers find the right products on your car parts site, like categories and tags for WordPress pages.

    Simply click on the ‘Add new category’ link and then create a new category for the car part you are adding.

    Adding car part product categories to an online store

    After that, you can type each tag into the ‘Product tags’ box and click on ‘Add.’

    To add multiple product categories and tags, simply repeat the same steps described above.

    Adding product tags to a car part product

    After that, scroll to the ‘Product Data’ box.

    To create a variable product, simply click on the dropdown that shows ‘Simple product’ by default. Then, select ‘Variable product.’

    Adding variable products to an automotive website

    You can now select the product type, add pricing, shipping costs, grouped products, and other information.

    After entering all this information, you are ready to create variations by selecting the ‘Attributes’ tab. Here, open the ‘Add existing’ dropdown menu.

    Adding existing attributes to a variable product

    You can now go ahead and select the product attribute you want to use.

    In the ‘Value(s)’ field, type in each term you want to use. When the right term appears, click to add it to the product.

    Adding values to a product variable

    With that done, click on the ‘Save attributes’ button.

    To add more product attributes and terms, simply repeat the above steps.

    WooCommerce's product data settings

    With that done, click on the ‘Variations’ tab.

    On this screen, go ahead and click on ‘Generate variations.’

    Generating variations for a car part website

    WooCommerce will now create variations using all the attributes you added to the product.

    To set up each variation, click on its ‘Edit’ link.

    Editing a variable car part product

    You can now add the variation’s price, upload an image, set the shipping options, and more using the settings in this section.

    Simply repeat this process to configure each product variation.

    Configuring a vehicle part product

    There are lots more settings you can use to fine-tune the variable product. However, this is all you need to add a car part to your online store.

    When you are ready to make the product live, go ahead and click on the ‘Publish’ button.

    Publishing a car part product to a WordPress website

    If you visit your online store, you will see the variable product live.

    To add more car parts to your online store, simply repeat these steps.

    Step 10: Add a Contact Us Form

    Customers might sometimes need to talk to you directly. For example, they may want to find out when a particular part will be back in stock or get some advice on a mechanical problem.

    While visitors could call your business phone number, it’s still a good idea to add a contact form to your website.

    An example of a contact form, on a car parts website

    Most of the best contact form plugins come with built-in spam protection, so you won’t get any contact form spam. A form will also collect consistent information, so you will have all the data you need to write a helpful reply.

    The easiest way to create a contact form is by using the free WPForms plugin. This plugin has a built-in Simply Contact Form template that you can quickly customize using the drag and drop editor.

    A contact form, created using WPForms

    After that, just add the form to any page, post, or widget-ready area using the ready-made WPForms block.

    For detailed instructions, see our guide on how to create a contact form in WordPress.

    Step 11: Add a Navigation Menu

    After adding some content to your car parts website, you will want to help visitors find their way around those pages and posts by adding a navigation menu.

    An example of a WordPress navigation menu

    No matter which theme you are using, it’s easy to add menus and sub-menus to your automotive website.

    For a complete guide, please see our post on how to add a navigation menu.

    Adding a menu to your car parts website

    WooCommerce has a built-in search feature, but it’s not very good at finding products. It doesn’t look for matches in product attributes, reviews, custom fields, or product descriptions.

    By replacing the default search with a smarter and faster search, you can help customers find the exact car parts they need. This will improve the customer experience and help you get more sales.

    The easiest way to create a smart WooCommerce product search is by using SearchWP. SearchWP is the best WordPress search plugin on the market and puts you in complete control of the WordPress search algorithm.

    The SearchWP search plugin for WordPress

    By default, SearchWP will look at the product title, content (description), slug, and excerpt (short description) for matches. 

    Plus, you can customize the SearchWP settings to look for matches in custom fields, taxonomies, customer reviews, product tags, and more.

    A smart WooCommerce product search, created using SearchWP

    For more information, please check out our guide on how to make a smart WooCommerce product search.

    Step 12: Display Customer Reviews

    Reviews are some of the best ways to earn customer trust and convince visitors to buy car parts from your website. After all, we are more likely to buy things that we see other people buying, using, or recommending.

    If you already have reviews on platforms like Facebook, Yelp, and Google, then it’s easy to display them on your WordPress site using Smash Balloon Reviews Feed Pro.

    Car part reviews, displayed using Smash Balloon

    Reviews Feed Pro is one of the best customer review plugins for WordPress that you can use.

    It will collect reviews automatically and then organize them into a nice layout on your automotive website. You can also completely customize the review feed so that it perfectly fits with your site.

    The Reviews Pro WordPress plugin, by Smash Balloon

    For more details, please see our guide on how to show Google, Facebook, and Yelp reviews.

    We hope this tutorial helped you learn how to sell car parts online with WordPress. You may also want to learn how to create a WooCommerce popup to increase sales or check out our list of the best WooCommerce plugins for your store.

    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 Sell Car Parts Online With WordPress (Step by Step) first appeared on WPBeginner.

    Go to source

  • How To Send SMS Notifications from Contact Forms

    How To Send SMS Notifications from Contact FormsDid you know you can receive an SMS notification each time a form is submitted on your WordPress site, eliminating the need for constant email or active website monitoring? If you’ve been searching for a practical method to stay updated on new inquiries from your site visitors, implementing SMS notifications from your contact form is […]

    The post How To Send SMS Notifications from Contact Forms appeared first on WPExplorer.

    Go to source

  • How to Easily Create Post Purchase Surveys in WooCommerce

    Are you looking for the best way to gather useful feedback about your WooCommerce store from your active customers?

    User surveys can help you get valuable information so you can use it to make data-driven decisions. For example, they can help you find out how to improve your sales funnel or why your customers bought a particular product.

    In this article, we will show you how to easily create post purchase surveys in WooCommerce.

    How to Easily Create Post Purchase Surveys in WooCommerce

    Why Use Post Purchase Surveys in WooCommerce?

    If you have a WooCommerce store, then you may be wondering what your customers think of your products and online store. There’s no easy way to find out without actually asking them.

    Luckily, you can use a WordPress survey plugin to collect real user feedback quickly and easily. This feedback will help you discover the ‘why’ behind every website visitor’s action. This is something you can’t learn from Google Analytics alone.

    When creating your customer survey, make sure you don’t add any unnecessary questions. The questions you ask should get you the most valuable information and insights.

    Here are some examples of questions you can ask your customers after checkout:

    • How long have you been a customer?
    • How did you discover us?
    • Was our pricing page easy to understand?
    • Which of our products have you used?
    • How satisfied are you with our products?
    • Have you needed to contact customer service?
    • Do you have any additional comments or suggestions?

    By asking for user feedback after each WooCommerce purchase, you will learn ways you can improve your sales funnel to boost user experience and increase sales.

    When you know the why or the intent behind users’ actions, you can easily figure out why your visitors buy or do not buy your products.

    With that being said, let’s take a look at how to easily create post purchase surveys in WooCommerce. We will cover two different methods:

    1. Creating Post Purchase Surveys Using UserFeedback
    2. Creating Post Purchase Surveys Using WPForms

    Method 1: Creating Post Purchase Surveys Using UserFeedback

    UserFeedback is an easy-to-use survey plugin by the MonsterInsights team. It lets you ask your website visitors questions and collect their feedback in real time. It also makes it easy to add the survey to specific WooCommerce pages, such as the order confirmation page.

    UserFeedback includes a Post Purchase Review template to give you a head start in creating your survey. Plus, you can customize how your popup surveys look so that they completely match your brand and site design.

    First, you need to install and activate the UserFeedback plugin. For step-by-step instructions, you can follow our tutorial on how to install a WordPress plugin.

    Note: There is a free version of UserFeedback that you can use to get started. However, you will need the features of the Pro version to create a post purchase survey.

    Setting Up the UserFeedback Plugin

    Once the plugin is activated, the setup wizard will automatically launch. Click the ‘Start’ button to begin the setup.

    UserFeedback Setup Wizard

    Next, you will be prompted to create your first survey to show you what the plugin is capable of.

    We won’t be using this example survey, so you can go ahead and use the default answers.

    Choose question for your first UserFeedback survey

    You can choose from a few pre-written questions or create your own question. You will also be able to change your questions at any time.

    For this tutorial, you should simply click the ‘Next Step’ button to continue.

    Click on Next Step in the UserFeedback setup wizard

    Next, you will see the option to enable specific UserFeedback features, depending on your license level.

    Go ahead and enable the features you want or that your license level allows.

    Enable UserFeedback features

    Once you have done that, you need to click the ‘Next Step’ button at the bottom of the page.

    Now, you can enter the email address where you want the survey responses to be sent.

    Customize notifications for UserFeedback

    Since we won’t be using this survey, you don’t need to make any changes and can simply click the ‘Next Step: Publish’ button.

    In the final step of the setup wizard, the features and addons you enable will be installed.

    UserFeedback features and addons successfully installed

    Then, you can click on the ‘Exit to dashboard’ button at the bottom of the page.

    You will see the sample ‘First Survey’ that you created with the wizard.

    Exit to UserFeedback dashboard

    Now you can unlock the Pro features of the plugin. You need to enter the license key that was emailed to you when you purchased a UserFeedback plan.

    You will need to navigate to UserFeedback » Settings in the WordPress admin area. Once there, simply paste your license key into the field and click the ‘Verify’ button.

    Paste Your UserFeedback License Key

    Make sure you click the ‘Save Settings’ button once you have done this.

    After that, you can enable the Pro features by going to the UserFeedback » Addons page.

    For each addon, you will need to click the ‘Install Addon’ button, followed by the ‘Activate’ button that appears.

    Install the UserFeedback Addons

    This is important since the Additional Templates addon includes a Post Purchase Review template, and the Question Types addon allows you to add star ratings and more. Other addons allow you to further customize your survey form.

    Now that you have successfully installed the UserFeedback plugin and its addons, you are ready to create your post purchase survey.

    Creating a Post Purchase Survey Using UserFeedback

    To create a new survey, you need to return to the UserFeedback » Surveys page and click the ‘Create New’ button.

    Creating a New UserFeedback Survey

    This will show you dozens of survey templates that you can use as a starting point.

    You need to scroll down until you find the Post Purchase Review template and then click it.

    Click the Post Purchase Review Template

    A new survey will be created for you. Some helpful questions have already been added.

    You can change any question’s type and title by simply pointing and clicking.

    Editing a Survey Question in UserFeedback

    Each question has a Settings tab where you can set the question as ‘Required’. The Logic tab lets you show or hide the question based on the customer’s previous answers.

    With UserFeedback, you can ask unlimited questions and receive unlimited responses. You can ask all types of questions, including multiple-choice and free-form questions, and even capture emails and collect star ratings.

    You might like to add some of the questions we listed at the beginning of this article. To add a question to your survey, simply click the ‘Add Question’ button after the last question.

    Adding a New Question in UserFeedback

    When you choose a question type from the dropdown menu, a new question will be added.

    After that, you will be able to add a question title. Depending on the question type, you can then customize the question in other ways, such as labeling checkboxes or radio buttons.

    Customizing a UserFeedback Question

    Tip: The ‘Preview’ link at the top of the page doesn’t just preview the form but also allows you to customize its colors.

    You can also create a custom thank you message and redirect users after their submissions.

    Customizing the UserFeedback Thank You Question

    When you have finished editing your survey questions, just hit the ‘Next Step: Settings’ button. This will open the Settings page, where you can customize your survey even more.

    In the ‘Tracking’ section, you can enable or disable Google Analytics tracking if you have MonsterInsights installed.

    Next, in the ‘Targeting’ section, you can select what types of devices and pages you want your survey to appear on. You can display the survey on all device types or create different surveys that target desktop and mobile users.

    Targeting Device Type in UserFeedback

    Next, you can scroll down to the Pages setting area. This is important because it allows you to choose where the survey will be displayed.

    The default setting is ‘All Pages’. This will display the survey on every page of your online store. However, we only want to survey customers after they have made a purchase.

    In this case, we should display the survey on the order confirmation page that is displayed after checkout. This page is also known as the WooCommerce thank you page.

    To target this page, you will need to select ‘Page url is’ from the dropdown menu. After that, you should type ‘order-received’ in the next field.

    Targeting the WooCommerce Order Confirmation Page in UserFeedback

    This works because the setting matches partial URLs. The full URL will change with each transaction but will always contain the characters ‘order-received’.

    You can also scroll down to the ‘Behavior’ section. Here, you can configure settings like:

    • Display Timing â€“ When the survey will appear on the page.
    • Display Length â€“ How often the survey will appear to website visitors.
    • Survey Run Time â€“ How long the survey will appear on the designated pages.
    UserFeedback Behavior Settings

    In addition, you can enable or disable the ‘Start Survey Minimized’ option.

    This displays a less visible version of your survey instead of automatically opening the first question.

    Enable minimized survey option

    Once you are done changing the settings, you can click the ‘Next Step: Notifications’ button.

    This will take you to the Notifications page, where you can choose to send yourself an email with each new response to the survey. Simply leave the ‘Send Email’ toggle switched on and then enter one or more email addresses.

    UserFeedback Notifications Settings

    You can also enable conditional logic to trigger email notifications when visitors respond to your questions in a certain way.

    For example, you might only want to receive an email if the user checks a box labeled ‘Do you want a callback?’

    For this to work, your survey needs to contain at least one question with a radio, checkbox, NPS, or star rating question.

    After that, click on the ‘Next Step: Publish’ button to continue.

    Publish Your Survey

    Lastly, there’s an option to schedule the survey for a later date and time.

    If you are ready to publish your survey immediately, then go ahead and click the ‘Save and Publish’ button.

    Save and publish the UserFeedback survey

    That’s it! You’ve successfully created a survey form.

    Now when your customers purchase items from your store, your survey will pop up on the order confirmation page.

    UserFeedback Survey Preview

    Tip: You may not see the customer survey when you are logged into WooCommerce. You will need to open your online store in a new incognito window or a different web browser.

    Viewing Your Survey Form Results

    Once you start getting responses, you can analyze them right from your WordPress admin dashboard using easy-to-read reports.

    Simply navigate to UserFeedback » Results to see the total responses, impressions, and more details.

    UserFeedback survey reports

    Method 2: Creating Post Purchase Surveys Using WPForms

    WPForms is the best WordPress contact form plugin on the market. It comes with a powerful surveys and polls addon, which allows you to quickly create highly-engaging survey forms.

    It lets you combine the Surveys and Polls addon with powerful WPForms features like conditional logic, multi-page forms, custom notifications, email integrations, and more.

    Note: You will need the Pro plan because it includes the WPForms Surveys and Polls addon. WPBeginner users can use our WPForms coupon to get 50% OFF on all WPForms licenses.

    Setting Up the WPForms Plugin

    The first thing you need to do is install and activate the WPForms plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

    Once the plugin is activated, you need to go to the WPForms » Settings page and enter your license key. You will find this information in your account on the WPForms website.

    Entering the WPForms license key

    Don’t forget to click the ‘Verify Key’ button.

    Once you have done that, you should head over to the WPForms » Addons page and scroll down to the Surveys and Polls addon.

    Go ahead and click on the ‘Install’ addon button to install and activate the addon.

    Install surveys and polls addon

    Now you are ready to create the post purchase survey form.

    Creating a Post Purchase Survey Using WPForms

    You need to visit the WPForms » Add New page to create a new form. This will launch the WPForms form builder interface, and you can choose from different pre-built form templates.

    First, you should provide a title for your survey form at the top of the page.

    After that, you need to choose a template. Start by clicking on ‘Addon Templates’ to list templates that are compatible with the Surveys and Polls addon.

    Select the Survey Form Template in WPForms

    Then you need to click the ‘Use Template’ button on the Survey Form template. This will load a sample customer feedback form template with several fields already added to it.

    You can just point and click to edit the fields, rearrange them with drag and drop, or remove them from the form. You can also add new form fields from the left column.

    The WPForms Form Editor

    WPForms supports all commonly-used form fields, including dropdown, radio buttons, checkboxes, Likert scale, text input, rating scale, and many more. This makes it super easy for you to build highly-interactive survey forms.

    There is some conditional logic already built into the form. For example, the ‘How can we improve?’ field will only appear if a user selects 1 or 2 stars in the ‘Your Experience’ field.

    Add conditional logic to survey form

    You can see this by selecting the ‘How can we improve?’ field and then clicking the ‘Field Options’ tab on the left, as seen in the image above.

    If some of your customers log in to your online store, then you can make their life easier by auto-filling some of their information from their user profiles.

    For example, to auto-fill their email address, you need to click on the Email field, then click the ‘Field Options’ tab on the left. Once there, just click on the ‘Advanced’ tab to show the advanced field options.

    The Advanced Field Options in WPForms

    You will notice a field where you can set a Default Value for the email field.

    You can enter information from their profile automatically by clicking on ‘Show Smart Tags’.

    Entering the User Email Smart Tag in WPForms

    Now you simply click the ‘User Email List’ option, and the {user_email} smart tag will be entered into the field. This will automatically add the email address for logged-in users.

    You can also easily remove any fields that you don’t need on the form.

    For example, if you would like to remove the ‘Name’ field, then you should point at that field with your mouse and then click the red Trash icon that appears at the top right of the field.

    Deleting a Field in WPForms

    If you would like to add more questions, such as the ones we listed at the beginning of this article, simply drag a new field onto the page and then customize it.

    Once you have created the form, you need to click the orange ‘Save’ button at the top of the page to store your form settings.

    Next, you can go to the Settings tab and select ‘Confirmations’ in the WPForms form builder.

    Edit survey form confirmation settings

    Here, you can choose whether to show a message or a page or even redirect users to a URL when they submit the survey form.

    Besides that, the WPForms Notifications tab lets you edit the notification settings so that you get email alerts when a user fills out your survey.

    Edit notification settings

    You can now click on the close button to exit the form builder.

    Adding the Survey Form to a Custom Thank You Page

    If you have gone through the trouble of creating a custom WooCommerce thank you page, then you can easily add your post purchase survey to it using a shortcode or a block.

    Note: Whether you are using the default thank you page or a custom one, you can also display the survey as a popup using a plugin. See the next section for details.

    You will find the shortcode you need by visiting the WPForms » All Forms page.

    Finding the Survey Shortcode in WPForms

    You can then use the shortcode to add the form to your custom thank you page by following our guide on how to add a shortcode in WordPress.

    Alternatively, if you created your custom thank you page using the block editor or a page builder plugin like SeedProd, then all you need to do is drag the WPForms widget onto the page and then pick the survey form you just created from a dropdown menu.

    Dragging the WPForms Widget Onto a Page in SeedProd

    Once you have saved your custom thank you page, your customers will see the survey after checking out.

    Automatically Showing a Survey Popup Using OptinMonster

    You might prefer to have the survey pop up automatically over the order confirmation page, similar to what happens with the UserFeedback plugin in Method 1.

    The first thing you need to do is install the free OptinMonster plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

    Note: In this tutorial, we will use the free OptinMonster plugin because it does everything we need. However, with a Growth subscription, the premium version of OptinMonster has much stronger integration with WooCommerce.

    Upon activation, the OptinMonster setup wizard will start.

    Simply follow the onscreen instructions to set up OptinMonster on your website and create a free account.

    The OptinMonster Setup Wizard

    Once you complete the setup, you will find yourself on the OptinMonster dashboard.

    You will see a welcome message, a link to the OptinMonster user guide, and a video to help you get started.

    The OptinMonster Dashboard

    Now you will need to scroll down until you find a box where you can create a new popup.

    Simply click the ‘Create New’ link.

    Create a New Popup in OptinMonster

    You will now see a collection of popup templates. Since our popup will just contain our post purchase survey, we will use the minimal Canvas template.

    You can find this template by typing ‘canvas’ into the search field.

    Search for the Canvas Template in OptinMonster

    When you point your mouse over the Canvas template, two buttons will appear.

    You can create your popup by clicking the ‘Use Template’ button.

    Click the Use Template Button in OptinMonster

    You will see a popup asking you to give the campaign a name.

    You can type in ‘Post Purchase Survey’ and then click the ‘Start Building’ button.

    Name the New Campaign in OptinMonster

    The OptinMonster builder will open with your selected template. You can see a preview of the popup on the right, and there are blocks on the left that you can add to the popup.

    You need to find the WPForms block and drag it onto the page.

    Drag the WPForms Block Onto the Page

    You can now select the survey you want to add.

    Simply click on the name of the WPForms post purchase survey that you created earlier. The WPForms shortcode will be added to your popup.

    Select the WPForms Survey You Created Earlier

    There is still a placeholder image and text block on the page. These can be safely deleted.

    When you hover your mouse over the image, a purple toolbar will appear. You can delete the image by clicking the Trash icon. You will be asked to confirm the deletion.

    Deleting an Image in OptinMonster

    You can delete the text block that says ‘Drag blocks and elements to start building your campaign’ in the same way.

    Your finished popup should include just the WPForms shortcode. This is a good time to save your work by clicking the ‘Save’ button at the top of the screen.

    Save the Popup in OptinMonster

    Your next job is to click the ‘Display Rules’ tab and set how and where the popup will be displayed.

    The first rule determines when the popup will be shown. The default value is after you have been on the page for 5 seconds. This will work for most online stores, but you can change the value if you like.

    OptinMonster Time on Page Setting

    Now you need to scroll down to the second rule, which you will find just below the ‘AND’ label.

    The default value is to display the popup on every page of your WordPress website. You need to change this so that it only displays the post purchase survey on the order confirmation page.

    The Current URL Path Setting in OptinMonster

    To do this, you need to click the dropdown menu for ‘is any page’ and select ‘contains’ instead.

    Another field will appear, and you need to type ‘order-received’ here.

    The Current URL Path Matches When Contains Order-Received

    This rule will match the confirmation page URL. Although the URL changes with every transaction, it will always contain the characters ‘order-received’.

    Now you can click the ‘Next Step’ button to determine what happens when the conditions in those two rules are met.

    OptinMonster Then Rules

    The default settings here will display the popup without any effects or sound. If you would like to add an effect or sound, just use the dropdown menus.

    Once you are finished, you need to click on the ‘Next Step’ button. You will see a summary of the display rules you just created.

    Summary of Display Rules in OptinMonster

    Make sure you click the ‘Save’ button to store your settings.

    Finally, you can click the ‘Publish’ tab at the top of the screen and then click the ‘Publish’ button under ‘Publish Status’. This will push the popup live on your online store.

    Publishing Your OptinMonster Popup

    You can now close the OptinMonster builder by clicking the ‘X’ icon in the top right corner.

    Your customers will now see the post purchase survey whenever they finish checking out. Here’s how it looks in our demo store.

    WPForms Post Purchase Survey Preview

    Viewing Your Survey Form Results

    WPForms shows survey results in beautiful charts and graphs. You can also print survey results and export them to your favorite spreadsheet software.

    To view your survey results, you need to visit the WPForms » All Forms page and click on the ‘Survey Results’ link below your survey form.

    Click the Survey Results Link

    On the results page, you will see your survey responses displayed in an interactive chart and tables.

    You can export responses to a single question and the entire survey.

    Export survey results

    On the top, you will see options to switch to different chart types and export options.

    You can save individual survey results in JPEG, PDF, and Print formats to easily share them on presentation slides, blog posts, or social media.

    We hope this tutorial helped you learn how to create post purchase surveys in WooCommerce. You may also want to see our guide on how to create smart coupons in WooCommerce or our expert picks for the best WooCommerce plugins for your store.

    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 Create Post Purchase Surveys in WooCommerce first appeared on WPBeginner.

    Go to source

  • How to Display Nutrition Facts Labels in WordPress

    Are you looking for a way to display nutrition facts labels in WordPress?

    Nutrition facts labels provide information about the nutrient content of food, including the number of calories, protein, fat, carbohydrates, and more. These labels help users make better-informed health decisions according to their diets.

    In this article, we will show you how to easily add nutrition facts labels in WordPress.

    Display nutrition facts labels in WordPress

    Why Add Nutrition Facts Labels in WordPress?

    If you are a food blogger or sell food items in your online store, then adding nutrition facts labels along with your recipes and products can help you comply with any regulatory food requirements.

    By informing consumers about the calorie content, carbs, protein, and other nutrients of your meals, you also enable them to make informed decisions about their diets.

    Nutrition facts labels

    For instance, adding a nutrition facts label with a recipe will allow diabetic people to monitor their sugar intake and remain healthy.

    Adding nutrition facts labels can also boost the SEO rankings of your WordPress blog. This is because search engines usually prioritize websites that enhance the user experience by providing relevant information about their products.

    That being said, let’s see how you can easily add nutrition facts labels in WordPress.

    How to Add Nutrition Facts Labels in WordPress

    You can easily add nutrition facts labels in WordPress using Nutrifox.

    It is an online nutrition label generator that allows users to create and customize nutrition labels for their food products or recipes.

    Create a Nutrition Facts Label With Nutrifox

    First, you will need to visit the Nutrifox website and sign up for an account by clicking on the ‘Start Your Free Trial’ button in the top right corner of the screen.

    Nutrifox offers a 14-day trial to everyone, after which you will be charged about $9/month or $89/year.

    Start your free trial on Nutrifox

    Upon creating an account, you will be directed to the ‘Welcome to Nutrifox’ page.

    From here, simply click on the ‘Create Your First Recipe’ button to get started.

    Click the Create Your First Recipe button

    Next, you will be directed to a new screen, where you must enter a name for the recipe that you are about to create.

    Once you have added a recipe name, just click the ‘Continue to Ingredients’ button.

    Note: If you want, then you can also import a published recipe to Nutrifox from your WordPress website by clicking on the ‘import a published recipe’ link.

    Click the Continue to Ingredients button

    This will take you to a new screen where you will create the recipe. Here, you will be able to see the nutrition facts label in the right column of the screen.

    You can now start by filling in the fields for the serving size and the number of servings.

    For instance, if you are writing a recipe for a red velvet cake, then you will need to add 1 slice as the serving size. After that, you must add the number of slices that will be in the cake under the ‘Servings’ option.

    Once you have done that, simply type the recipe ingredients into the ‘Ingredients’ section and click the ‘Add’ button.

    Type the servings and its size and then add the ingredients for the recipe

    After the recipe has been added, the nutrition facts label will automatically update.

    Customize Your Nutrition Facts Labels

    Now, you have to click on the ‘Customize’ button in the right column to style the facts label.

    From here, go ahead and choose the ‘Label Style’ from the dropdown menu. You can pick ‘Tasty’, ‘FDA’, or ‘Basic’.

    After that, you can also select the nutrients that you want to be displayed on the nutrition facts label by toggling the switch next to these options.

    For instance, if you want to display the percentage of calcium in the meal, then you need to toggle the switch next to the ‘Calcium’ option.

    Customize nutrition facts labels

    Once you are happy with your nutrition facts label, you need to copy the label’s

    Once you are happy with your nutrition facts label, you need to copy its ID from the Nutrifox website’s URL.

    This label ID is a 4 to 5-digit number that will allow you to embed the facts label into your WordPress website.

    Copy the labels ID from the website URL

    Add the Nutrition Facts Labels to a WordPress Post

    After copying the label ID, head over to your WordPress website’s dashboard.

    Once you are there, you need to install and activate the Nutrifox WP Connector plugin. For more instructions, please see our step-by-step guide on how to install a WordPress plugin.

    This plugin will add a ‘Nutrifox label’ block to the Gutenberg editor that will allow you to show nutrition facts labels along with your recipes.

    Upon plugin activation, open up the page or post where you want to add the facts label. Next, you must click the ‘+’ button in the top left corner of the screen and find the ‘Nutrifox Label’ block.

    Upon adding the block, simply paste the Nutrifox label ID that you copied earlier into the block.

    Add the Nutrifox Label block and paste the label ID

    Finally, go ahead and click the ‘Publish’ or ‘Update’ button to save your changes.

    You can now visit your website to check out the nutrition facts label in action.

    Preview for nutrition facts labels

    Bonus: Use Tasty Recipes to Optimize Your Food Blog and Add Nutrition Facts Labels

    Tasty Recipes is a great WordPress recipe plugin that allows you to optimize your food blog for recipe SEO. It also lets you adjust the design and layout of your recipe cards.

    Additionally, it enables you to integrate your recipe cards with Nutrifox to add nutrition facts labels along with the recipes.

    First, you need to install and activate the Tasty Recipes plugin. For detailed instructions, check our guide on how to install a WordPress plugin.

    Upon activation, head over to the Settings » Tasty Recipes page and enter the license key. You can get your license key from your Tasty Recipes accounts page.

    Tasty Recipes license key

    After that, simply switch to the ‘Design’ tab on the ‘Tasty Recipes’ page.

    From here, you can choose a design template for the recipe card from the preview column on the right.

    You can also further customize the template with the on-screen settings on the left of the screen.

    Choose a template for recipe

    Once you have designed your recipe card template, scroll down to the ‘Nutrifox Display’ section and make sure that the ‘Insert Nutrifox label (iframe)’ option is checked.

    If you choose the ‘Insert as plain text’ option, you will need to manually enter the details for the nutrition facts labels.

    Once you are happy with your choices, don’t forget to click the ‘Save Changes’ button to store your settings.

    Choose the Insert Nutrifox Label option in the nutrition section

    Next, switch to the ‘Settings’ tab at the top to configure the plugin options.

    From here, you can choose which buttons to show on the recipes, display check boxes next to ingredients, allow users to convert units, and scale recipes for different serving sizes.

    You can also allow users to copy the ingredients with a single click and paste the recipe somewhere else.

    Finally, don’t forget to click on the ‘Save Changes’ button to store your changes.

    Recipe plugin settings

    Add the Recipe Card and Nutrition Facts Label to a WordPress Post

    To add the recipe card and nutrition facts label to your website, you need to open up a new or existing post in the block editor from the WordPress admin sidebar.

    Once you are there, simply click on the ‘+’ button in the top left corner of the screen and find the ‘Tasty Recipe’ block.

    Add the Tasty Recipes block into the block editor

    Upon adding the block, a ‘Create Recipe’ popup will open in the block editor. Here, you can start by adding a title, description, image, and author name for the recipe card.

    Next, type the ingredients for the recipe into the ‘Ingredients’ section and add the instructions for users to follow in the ‘Instructions’ section.

    Add description, instructions, and ingredients for the recipe card

    After that, just scroll down to the ‘Nutrition’ section, where you have to add the label ID for the nutrition fact labels.

    For that, you will have to visit the Nutrifox website and open up the nutrition facts label that you want to integrate with the recipe.

    Once you are there, you can get the label ID from the website’s URL. It will be a 4 to 5-digit number at the end of the URL.

    Get the label ID from the Nutrifox website

    Simply copy it and head back to your WordPress dashboard.

    Next, you have to paste the label ID into the ‘Nutrifox ID’ box. Once you are done, just click the ‘Insert’ button to add the recipe card to the block editor.

    Add label ID for Nutrifox

    Finally, click the ‘Update’ or ‘Publish’ button to save your changes.

    You can now visit your website to check out the recipe card with the nutrition facts label integrated into it.

    Preview of recipe card with nutrition facts labels

    We hope this article helped you learn how to display nutrition facts labels in WordPress. You may also want to see our tutorial on how to add SEO-friendly recipe schema in WordPress and our top picks for the best WordPress themes for recipe blogs.

    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 Display Nutrition Facts Labels in WordPress first appeared on WPBeginner.

    Go to source