Tag: tutorials

How to Restrict Content on WordPress to Patreon Members

Do you want to restrict content on WordPress to Patreon members?

By adding patron-only content to your website, you can encourage visitors to join your Patreon and increase your profits. It’s also a great way to get Patreon users to visit your website, which will boost your traffic and can increase revenue further.

In this article, we will show you how to restrict content on WordPress to Patreon members.

Why Restrict Content on WordPress to Patreon Members?

If you are a content creator, then you may want to earn money from your writing, music, podcasts, stock photos, and other content.

Patreon allows you to sell memberships and then give those people access to different content based on their subscriptions.

Patreon is also a great way to build relationships with your fans. For example, you can automatically send a welcome note to new patrons.

You can also create private Discord servers or chat rooms where members can talk to each other and even message you directly.

After creating a Patreon, it’s a good idea to publish members-only content to your WordPress website. This encourages visitors to join your Patreon in order to unlock exclusive WordPress content.

This can also increase your blog traffic since patrons will need to visit your WordPress site to see the exclusive content.

That said, let’s see how you can restrict content on WordPress to Patreon members.

How to Create a Patreon Account for Your WordPress Website

If you don’t already have an account, then head over to the Patreon website and click on the ‘Create on Patreon’ button.

You can now type in your email address and create a password. If you prefer, then you can also register using your existing Google or Facebook login.

After entering this information, the setup wizard will ask some questions about how you plan to use Patreon. Simply follow the onscreen instructions to build an engaging and informative Patreon page.

With that done, you can use the Patreon tools to customize your page, add membership tiers, set up billing, and more.

When you are happy with how your Patreon page looks, you are ready to add it to your WordPress website.

How to Connect WordPress to Your Patreon Account

The easiest way to create Patreon-only content is by using Patron Plugin Pro. This plugin allows you to restrict access to individual pages and posts or even lock all the content from a specific tag or category.

You can also automatically lock and unlock content based on a schedule. This allows you to create free trials, automatically drip content, and more.

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

Upon activation, you will need to connect the plugin to your Patreon account. To do this, go to Patreon Settings Â» Patreon Settings, and then click on ‘Connect site’.

When you are ready, select ‘Start connection wizard’.

On the next screen, you need to click on ‘Let’s start!’

To connect Patreon to your WordPress website, you will need to create an OAuth client.

If you are happy to do this, then click on ‘Allow’.

If prompted, type in the login information for your Patreon account.

After a few moments, Patron Plugin Pro will take you back to the main WordPress dashboard. Your Patreon account is now connected to WordPress.

Before you restrict any content, it’s a good idea to look at the plugin’s settings by going to Patreon Settings Â» Patron Settings.

The default settings should work well for most websites, but it’s still worth checking whether you need to make any changes.

If you do customize the settings, then scroll to the bottom of the screen and click on the ‘Update Settings’ button.

How to Restrict Content to Patreon Members

The easiest way to create patron-only content is by restricting access to entire content types, categories, or tags. For example, you might lock all content that has the ‘Patreon’ tag.

To do this, simply select ‘Patreon Plugin Pro’ from the left-hand menu and then click on the ‘Content Locking’ tab.

Here, you must click to expand the ‘Make post types Patron only’ section.

To start, open the ‘Select Post Type’ dropdown and choose the content you want to restrict, such as page, post, media, or some other content type.

Then, open the new ‘All’ dropdown and choose whether you want to restrict this content type based on format or categories and tags.

Depending on your selection, you will get access to some additional settings. For example, if you select ‘Tag’, then you will need to choose the tag you want to make Patreon-only.

Finally, open the ‘Select how to lock’ dropdown and choose how you want to lock and unlock the content.

The easiest option is ‘Lock all posts of this type’. However, you can also lock the most recent example of this content and use the older content as a preview for non-members.

You can also unlock or lock content after a certain number of days has passed. This allows you to offer exclusive early access to Patreon members.

Similarly, you can use this feature to create a free trial. For example, you might make your latest online course available to non-patrons for the first 24 hours. This can create a buzz around the launch while also encouraging people to join your Patreon so that they don’t lose access after 24 hours.

Based on your selection, you will see some additional options.

Most importantly, you will need to enter a minimum $ value membership tier.

This should be linked to the cost of your memberships. For example, if your Silver tier is $5, then typing ‘$5’ will unlock this content for everyone with a Silver or higher membership.

When you are happy with how the content locking is set up, click on ‘Add post type to gating.’

To lock more content, simply follow the same process described above. When you have finished, don’t forget to scroll to the bottom of the screen and click on ‘Save.’

How to Restrict Specific Pages and Posts to Patreon Members

Another option is to mark individual pages and posts as Patreon-exclusive. This allows you to control exactly what content your patrons have access to.

To start, simply open the page or post in the WordPress content editor.

Next, you will need to set some rules about who can access this content. In the right-hand menu, scroll to the ‘Patreon Level’ section and choose from the dropdown menu.

You can either select a Patreon level or choose ‘Any Patreon’. For example, you might select ‘Any Patreon’ if this is entry-level content that all members should have access to or if you have only created a single Patreon tier.

Often, you will want to give new patrons access to your entire back catalog of members-only content. Another option is to restrict access to people who were already patrons when the content was published.

This is useful for creating time-sensitive Patreon promotions, such as exclusive holiday content or a ‘limited edition’ video.

To add this restriction, find the ‘Require a pledge active at the timeâ€¦.’ section and check its ‘Yes’ box.

Another option is to show or lock the content automatically based on a schedule. This is perfect for offering exclusive early access to Patreon members.

To lock and unlock content automatically, find the ‘Advanced Locking’ section. Here, open the dropdown that shows ‘No change’ by default and choose an option from the list.

You can then use the new settings to configure the automatic locking and unlocking.

By default, the plugin will show the following message to all non-Patreon members: ‘To view this content, you must be a member of (name) content at (cost) or more.’

You may want to add your own message for non-Patreon members. For example, you might say why the content is restricted or why they should buy a Patreon subscription.

To add a message, scroll to the ‘Custom Patron-Only Banner’ section and click on the ‘Non-Patrons Only’ button.

This adds some opening and closing tags to the small text editor.

Simply type your message in between these tags. You can also add links, formatting, and more in exactly the same way you create content in the WordPress page or post editor.

When you are happy with the settings, simply click on the ‘Publish’ or ‘Update’ button.

If you visit this content while logged into your admin account, then you won’t see any changes. However, if you visit it in an incognito browser tab, then you will see the content restriction in action.

How to Add a Patreon Button to Your WordPress Posts

Adding Patreon-exclusive content to your WordPress blog is a great start. However, it’s also a good idea to promote your Patreon on other areas of your website. This will help turn visitors into paying patrons.

Patron Plugin Pro can automatically add a ‘Become a Patron’ button to all your posts. Visitors can simply click this button to visit your Patreon page.

To start, select ‘Patron Plugin Pro’ from the left-hand menu, then select the ‘Quickstart’ tab.

Since we already connected the plugin to Patreon, you should see your account in the ‘Site’s Patreon user’ field.

If you don’t see the right URL, then you can add it now.

After that, you are ready to configure how the call to action button acts.

By default, the plugin opens your Patreon page in the same tab. This takes visitors away from your WordPress website, so we recommend opening the link in a new tab instead.

To do this, select ‘Yes’ under ‘Open pages in new window’.

The plugin adds the standard Patreon button to your website by default. This helps visitors recognize the button and understand that you have a Patreon page.

If you prefer, then you customize the button with your own branding using the settings under ‘Use a custom button’. When you are happy with the changes you’ve made, don’t forget to click on ‘Save’.

Next, click on the ‘Post Button’ tab to change how the button looks.

By default, the button includes the following heading: ‘Liked it? Take a second to support {authorname} on Patreon!’

To replace this with your own messaging, simply go ahead and type into the ‘Message over Buttons in Posts’ field.

You can also change the message’s alignment, adjust its size, and add margins.

If you want to remove the message instead, then find the ‘Show a message over Buttons in Posts’ section. Here, simply click the ‘No’ button.

If you make any changes, then don’t forget to click on ‘Save’.

Now, you can visit any post on your website to see the Patreon button live.

How to Add a Patreon Button to the WordPress Sidebar

If you prefer, then you can remove the Patreon button from your blog posts and add it to the sidebar or similar section instead.

In this way, you can show the button on other areas of your website, such as the product pages in your online store.

To start, you will want to remove the button from your WordPress posts so that you don’t show multiple Patreon buttons on the same page.

To do this, select the ‘Post Button’ tab and find the ‘Show Button under Posts’ section. Here, go ahead and select the ‘No’ button.

With that done, click on ‘Save’.

Next, click on the ‘Sidebar Widgets’ tab. Here, you can customize the message that appears next to the button, including changing the font size and adding margins.

If you do make any changes, then don’t forget to click on the ‘Save’ button.

With that setup done, you can add the Patreon button to any widget-ready area by going to Appearance Â» Widgets. Here, click on the blue ‘+’ button.

Note: If you are using a block WordPress theme, then you will need to go to Appearance Â» Editor instead.

In the panel that appears, start typing in ‘Patreon Sidebar Site Widget’.

When the right block appears, drag and drop it onto the area where you want to show the Patreon button.

You can now type an optional title into the ‘Title’ field.

This will appear above the Patreon button in the theme’s sidebar or similar section.

With that done, click on ‘Update’.

Now if you visit your WordPress blog or website, you will see the Patreon button in the widget-ready area.

Bonus: How to Create a Patreon Alternative Using WordPress

Patreon has helped countless creators monetize their content and make money online, but the platform also takes a significant cut of your earnings.

Depending on your Patreon plan, you will lose between 5%-12% of everything you earn on Patreon, plus payment processing and payout fees.

Depending on your location, you may also have to pay additional fees, including Value-added tax, Goods and services tax, QuÃ©bec sales tax (QST), and US Sales tax.

All of this can really add up.

You will also need to follow all of Patreon’s terms and conditions and other guidelines. If you break any rules, then Patreon will censor your content and may even delete your account. If this happens, then paying members will lose access to your content, which reflects badly on your brand and can damage your reputation.

With that being said, many WordPress website owners are looking for a Patreon alternative.

That’s where MemberPress comes in.

MemberPress is the best membership plugin for WordPress.

It allows you to create unlimited membership levels for your WordPress website and then restrict access to your content based on the person’s membership level.

In this way, you can create members-only videos, eBooks, blog posts, online courses, downloadable files, and more.

You can even assign different content to different membership levels, which encourages members to upgrade their subscriptions.

This is exactly how the Patreon tier model works, without any of the extra transaction fees. Since MemberPress doesn’t take a cut of your earnings, you get to keep more of the money you make.

For more on this topic, please see our detailed guide on how much it costs to start a membership site.

With MemberPress, you also have the freedom to create your own privacy policy, rules, and terms and conditions. This gives you more flexibility to create unique and engaging content for your fans, which will make it easier to grow your business.

To help you get started, we have created an ultimate guide to building a WordPress membership site using MemberPress.

We hope this article helped you learn how to restrict content on WordPress to Patreon members. You may also want to read our guide to the best social media plugins for WordPress to grow your online following and learn how to run a giveaway/contest 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 Restrict Content on WordPress to Patreon Members first appeared on WPBeginner.

14.07.2023
How to Cloak Affiliate Links on Your WordPress Site

Are you looking for a way to cloak affiliate links on your WordPress site?

Cloaking your affiliate links in WordPress provides clean and easy-to-read links, which can increase the likelihood of clicks and conversions. It can also increase user trust.

In this article, we will show you how to easily cloak affiliate links in WordPress.

What Is Affiliate Link Cloaking, and Why Do You Need It?

Link cloaking is a technique used to make long affiliate links into shorter and branded links on your WordPress website.

Often, affiliate links are lengthy, hard to remember, and show your affiliate username or ID like this:

http://www.affiliatesite.com/products/?product_id=123&affiliate=123

With link cloaking, you can shorten your ugly affiliate links into branded URLs like this:

http://www.yoursite.com/refer/productname

This can make your links look more trustworthy and professional to your audience, encouraging more clicks.

If you use affiliate links to make money from your WordPress blog, then you should cloak links, as doing this can increase your click-through rate and conversions.

Many link-cloaking plugins will also help you measure the performance of your affiliate marketing strategies and optimize them for better results.

Cloaking affiliate links also adds an additional layer of security by masking the actual affiliate URL. This can protect your affiliate accounts and earnings from fraud or theft.

This can also help prevent your links from being blocked by social media sites or search engines, increasing the search visibility of your affiliate content.

Having said that, let’s see how you can easily cloak affiliate links on your WordPress website, step by step.

How to Cloak Affiliate Links in WordPress

There are many link-cloaking plugins that you can use in WordPress, including Pretty Links and Thirsty Affiliates. Both plugins are great, but we will use Pretty Links for this tutorial since it’s a little more beginner-friendly for this use case.

You can easily cloak affiliate links in WordPress using Pretty Links. It is one of the best affiliate marketing tools for WordPress that lets you add, manage, and cloak affiliate links.

Install and Activate Pretty Links

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

Note: Pretty Links also has a free version that can cloak links. However, we will be using the Pro version in the tutorial to unlock more features.

Create Your Cloaked Link

Upon activation, you need to head over to the Pretty Links Â» Add New page from the WordPress admin sidebar to create an affiliate link.

Once you are there, you can start by typing a name for your link into the ‘Add Title’ option.

After that, you must select a link type from the ‘Redirection’ dropdown menu to create short and branded links for your affiliate program.

If you choose ‘Cloaked’, then the target URL will be hidden in your user’s browser, and they will only see your cloaked link. Some affiliate programs don’t allow this, so you will need to check first.

Another option is ‘307 Temporary’. It will replace the original URL with your new affiliate link and tell search engines that this link may change in the future.

Next, simply copy and paste your affiliate link into the ‘Target URL’ field.

Once you have done that, type the slug you want to use for your cloaked link into the ‘Pretty Link’ field.

For example, if you want your cloaked link to be like the example below, then you will need to type the ‘/refer/bluetooth-speakers’ text into the ‘Pretty Link’ field. You will then get a link like this:

www.example.com/refer/bluetooth-speakers

Choose Attributes for Your Cloaked Link

After that, simply switch to the ‘Advanced’ tab from the sidebar on the left.

From here, you can add different attributes to your affiliate link by checking the box next to these options.

For instance, if you want to add a nofollow attribute to the external link, then simply check the box next to ‘No Follow’. This means that search engines won’t pass on any link authority to the site you are linking to.

You can also check the ‘Sponsored’ box to tell search engines that your link is a paid advertisement.

Plus, checking the ‘Parameter Forwarding’ box can be handy if you want to pass a coupon code or customer ID to your cloaked link.

It’s also a good idea to check the box next to ‘Tracking’ so that you can view your affiliate link performance in the Pretty Links reports.

Configure Pro Settings for Your Cloaked Link

Once you have done that, you need to switch to the ‘Pro’ tab from the sidebar on the left. Now, you can set an expiry date for the affiliate link by checking the ‘Expire’ option.

This will expand a tab on your screen where you can set an expiry date for the link after a specific date or number of link clicks.

For example, if you choose the ‘Clicks’ option from the ‘Expire After’ dropdown menu and type 5 into the ‘Clicks’ field, then your affiliate link will immediately expire once 5 visitors have clicked on the link.

You can also type a URL for the expired redirect into the ‘URL’ field. This will be the link that users will be redirected to if they click on the expired affiliate link.

After that, you can type the keywords that you would like to be replaced with your affiliate link into the ‘Keywords’ field.

This means that whenever the keyword you choose is written in your WordPress post or page, the plugin will automatically add its affiliate link to the keyword.

You can also easily replace another URL with your affiliate link by typing it into the ‘URL Replacements’ field.

Now, whenever Pretty Links finds this URL on your website, it will replace it with the cloaked link.

Once you are done, simply click the ‘Update’ button in the Publish section to store your changes.

After that, you need to click the ‘Publish’ button in the same section to publish your cloaked affiliate link.

Add Your Cloaked Link to a WordPress Post or Page

Now, you can visit a WordPress post or page where you want to add the cloaked affiliate link.

Once you are there, simply select the text that you want to link on top of and then click the ‘Pretty Links’ icon in the block toolbar at the top.

This will open up a link prompt on your screen, where you can search for the cloaked affiliate link using its title or the link itself.

Upon adding the link, just click the ‘Publish’ or ‘Update’ button at the top to store your settings.

Now, you can visit your website and click on the affiliate link. You will now see the cloaked URL redirecting you to the affiliate product page.

We hope this article helped you learn how to easily cloak affiliate links in WordPress. You may also want to see our tutorial on how to create an affiliate product box in WordPress and our expert picks for the best WordPress themes for affiliate marketing.

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 Cloak Affiliate Links on Your WordPress Site first appeared on WPBeginner.

13.07.2023
How to Create an Alert Bar in WordPress (3 Easy Ways)
Do you want to add an alert bar to your WordPress site?

An alert bar or notification bar is a great way to let visitors know about important updates, special offers, new product launches, and more.

In this article, we will show you how to create an alert bar in WordPress with 3 easy solutions.

Why Create an Alert Bar in WordPress?

An alert bar is a great way to let your visitors know about something important on your website. That could be an ongoing sales event, an update to your opening times, or changes to your services.

You can also use an alert bar to tell visitors about a special deal, such as a buy one get one free offer. This is a great option if you run an online store.

Using an alert bar is better than just putting an announcement on your homepage. Your alert bar can appear prominently right at the top of every page across your entire site.

It’s easy to create an alert bar in WordPress. We will look at methods using the best notification bar plugins and a manual method using HTML and CSS code. Simply click the links below to jump straight to each option:
Method 1: Creating an Alert Bar Using OptinMonster

OptinMonster is the best conversion optimization and lead generation software on the market. It helps you convert more website visitors into subscribers and customers.

OptinMonster offers a drag-and-drop campaign builder. It comes with beautiful lightbox popups, welcome mats, countdown timers, and other dynamic overlays that help you increase subscribers and sales on your website.

You can also use OptinMonster to make an alert bar for your website. Their pre-built templates make it really easy to create an alert bar that looks great within minutes.

First, you need to visit the OptinMonster website and sign up for an account. You will need at least the Basic plan because it includes the Floating Bar campaign type.

Next, you need to install and activate the OptinMonster WordPress plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

This plugin lets you connect your WordPress site to the OptinMonster software.

Upon activation, you will see the welcome screen and the setup wizard. Go ahead and click the ‘Connect Your Existing Account’ button.

Next, a new window will open where you will need to connect your WordPress site to OptinMonster.

Simply click the ‘Connect to WordPress’ button to move ahead.

You can now follow the on-screen prompts to connect your OptinMonster account.

Then, simply go to OptinMonster Â» Campaigns in your WordPress dashboard. Go ahead and click the ‘Create Your First Campaign’ button.

This will open the OptinMonster campaign builder.

From here, you need to select the ‘Floating Bar’ as your Campaign Type to create an alert bar.

Next, you will see a choice of campaign templates. Pick a template that you want to use.

You just need to bring your mouse over it and click the ‘Use Template’ button to select it. We are going to use the Coupon Code Promo template for our alert bar.

Next, you will be asked to give your template a name. Once you have named your campaign, just click the ‘Start Building’ button.

Now, you will see the campaign editor. This is where you can design your alert bar.

OptinMonster offers different blocks that you can simply drag and drop onto the template. For instance, you can add an image, text, button, and more to your alert bar.

You will see that your alert bar appears at the bottom of your screen by default.

To move it to the top of the screen, you need to click ‘Floating Bar Settings’ on the left-hand side. Next, just click the slider to move the floating bar to the top of the page.

To change the text on the floating bar, simply click on the area you want to change and type in any text you want.

You can also change the font, the size and color of the text, and more.

To change the countdown settings, simply select the timer.

Then go ahead and enter your desired end date and time. OptinMonster also lets you choose the countdown type. You can select the ‘Static’ type if you’d like to show a standard timer with your specified end date and time.

On the other hand, there is a ‘Dynamic’ countdown type. The timer will work based on each user’s behavior on your site. The countdown is set separately for each visitor to your website.

Once you are happy with the design of your alert bar, don’t forget to click the ‘Save’ button at the top of your screen.

Next, you need to go to the ‘Display Rules’ tab to select when and where your alert bar will display on your site. The default rule is for your alert bar to display after the visitor has been on the page for 5 seconds.

We are going to change this to 0 seconds so that the alert bar appears instantly. To do that, just change the ‘sec’ value to 0.

Besides that, you can also select where the alert bar will appear. You can use the default setting, which is the ‘current URL path is any page’. This way, your alert bar will appear on all the pages of your WordPress website.

Then, click the ‘Next Step’ button to change the Action settings. You can leave the ‘show the campaign view’ settings as Optin and select whether you’d like to play a sound effect when the alert bar appears.

After you have made your changes, go ahead and click the ‘Next Step’ button once more.

Here, you will see a summary of your display rules. You can make final edits and changes to your alert bar campaign.

Once you are happy, simply click the ‘Save’ button at the top of the screen.

After that, you can go to the Publish tab at the top and change the Publish Status to ‘Publish’. Once that’s done, you will need to click the ‘Save’ button and close the campaign builder.

Next, you will see the Campaign Output Settings.

The final step is to activate the campaign on your website itself. Simply change the Status from ‘Pending’ to ‘Published’.

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

Now, simply visit any page on your website, and you will see your campaign in action.

Method 2: Creating an Alert Bar Using Thrive Leads

Another way you can add alert bars to your WordPress website is by using Thrive Leads. It is part of the Thrive Themes suite and helps you generate leads through alert bars, lightboxes, slide-in popups, and more.

First, you will need to visit the Thrive Themes website and sign up for an account. Simply click the ‘Start Now’ button to get started.

Next, you will need to install and activate the Thrive Product Manager plugin on your website. For more details, please see our guide on how to install a WordPress plugin.

You can find the Thrive Product Manager plugin in your account area.

Once you have installed the plugin, simply go to the Product Manager page from your WordPress admin area.

From here, go ahead and click the ‘Log into my account’ button.

After logging in to your account, you will see different plugins and tools offered by Thrive Themes.

Simply select the Thrive Leads plugin and then click the ‘Install selected products’ button at the bottom.

When Thrive Leads is ready to use, you will see a success message.

You can then click the ‘Go to the Thrive Themes Dashboard’ button.

Next, you will need to go to Thrive Dashboard Â» Thrive Leads from the WordPress admin panel.

Next to the Lead Groups heading, simply click the ‘Add New’ button.

After that, a popup window will now open.

You can enter a name for your new lead group and click the ‘Add Lead Group’ button.

Next, you will need to create a new opt-in form.

Go ahead and click the ‘Add New Type of Opt-in Form’ button.

After that, Thrive Leads will ask you to select a form type.

You can select the ‘Ribbon’ type to add an alert bar to your website.

After adding the Ribbon opt-in form type, you will now need to add a form.

Simply click the ‘Add a form’ option under Lead Groups.

On the next screen, you can choose from any of your existing forms.

Since this is your first time making a form, go ahead and click the ‘Create Form’ button.

Now, you will see a popup window appear on your screen.

You can enter a name for your form and click the ‘Create Form’ button.

Your form will be added to the Ribbon lead group.

To edit the design of the form, just click the pencil icon.

Next, Thrive Leads will show multiple templates to choose from.

Simply select a template and click the ‘Choose Template’ button at the bottom.

This will launch the visual builder with a live preview, where you can customize your alert bar.

For instance, you can select the text in the template and change it according to your needs. Or click on the image in the alert bar and change it.

Once you are done editing, click the ‘Save Work’ button at the bottom.

You can now close the visual editor and head back to the form settings. Here, you will see options for settings the alert bar trigger, display frequency, and position.

By default, the alert bar will appear at the top when a page loads. However, you can change these settings.

For instance, if you click the Trigger option, you’ll see more options, like showing the alert bar after a certain time, when a user scrolls down a certain amount, or when a user reaches the bottom of the page.

Besides that, you can also change the display frequency. The alert bar will appear all the time by default to all the users.

However, you can edit this and display your alert bar to the same visitor after a certain number of days.

Next, you can head back to the Thrive Leads page from your WordPress dashboard.

After that, simply click the cog icon to open the Display Settings.

From here, you can choose which posts and pages the alert bar will appear on.

For instance, you can show it only on the front page or choose all posts and pages. There is also an option to exclude some pages and posts from showing your alert message.

When you are done, simply click the ‘Save & Close’ button.

The last step is to click the toggles to display your alert bar on desktop and mobile devices.

Once that’s done, your alert bar is now ready to collect user email addresses and build your email list.

You can visit your website to see it in action.

Method 3: Manually Create an Alert Bar Using Custom HTML/CSS

What if you don’t want to use OptinMonster or Thrive Leads? In this method, we will show you how to create a notification bar using HTML and CSS code.

Note: We don’t recommend this method for beginners. If you are new to WordPress or don’t feel confident adding code to your site, then we suggest using either of the methods above instead.

First, you will need to copy the following custom CSS code for the alert bar:
```
<pre class="wp-block-syntaxhighlighter-code">
.alertbar {
    background-color: #ff0000;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 100%;
    z-index: 100;
}
</pre>
```
Hosted with â¤ï¸ by WPCode

1-click Use in WordPress
An easy way to add CSS code to your website is by using WPCode. It is the best code snippet plugin for WordPress that helps you add custom code to your website.

Note: WPCode is one of WPBeginner’s own plugins. We created it to make it really easy to add scripts, HTML code, and more to your website pages. It comes with features like a built-in code snippets library, conditional logic, conversion pixels, and more.

First, you will need to install and activate the free WPCode plugin. For more details, please see our guide on how to install a WordPress plugin.

Upon activation, you need to head to Code Snippets Â» + Add Snippet from the WordPress dashboard and select the ‘Add Your Custom Code (New Snippet)’ option.

After that, enter a title for your snippet at the top and paste the CSS code into the Code Preview area.

You will also need to change the Code Type to the ‘CSS Snippet’ option.

Next, you can scroll down to the Insertion section. This is where you can choose where the code will run.

Since we want the alert bar to appear across the entire website, you can use the default ‘Auto Insert’ method. You can also keep the ‘Run Everywhere’ setting.

Once that’s done, you can click the ‘Save Snippet’ button at the top.

You will also need to click the toggle on to activate the code.

After that, go to Code Snippets Â» Headers & Footer in your WordPress admin dashboard.

Just copy and paste the following line of HTML code into the ‘Header’ box:
```
<div class="alertbar">We are currently closed due to Covid-10.</div>
```
Hosted with â¤ï¸ by WPCode

1-click Use in WordPress
Here’s how that code should look in the ‘Header’ box in WPCode:

You can change the alert text to anything else you like. Don’t forget to click the ‘Save Changes’ button at the top of the page once you are done.

Now, you can visit your WordPress blog to see the alert bar. It should appear at the top of every page like this:

Tip: In a few WordPress themes, your alert bar may overlap your menu. You can alter the height of the bar to 40px or 30px to avoid this. You will also need to reduce the line height accordingly so that your text stays centered vertically in the bar.

Bonus: Add Custom Alert Messages to WordPress Pages

If you want to add custom alert messages to different parts of your website, such as product pages, checkout pages, and shop pages, then you can use SeedProd. It is the best website builder and landing page builder for WordPress.

The plugin offers a drag-and-drop builder to create a custom theme and website pages without editing code. It also offers an Alert block that you can place anywhere on your site.

This Alert block can warn customers that your stock is running low, particular items are on sale, or other time-sensitive warnings.

You can simply add the Alert block to your page and then add a title and description. The plugin also lets you add dynamic content, which allows you to insert dates and other query parameters.

There are also more customization options for the Alert block. For instance, you can change its alignment, adjust the font size, and edit the icon.

To learn more about using SeedProd, you can see this guide on how to create custom pages in WordPress.

We hope this article helped you learn how to create an alert bar in WordPress. You may also want to see our guide on the best WordPress drag and drop page builders to help you further customize your site and the best WooCommerce plugins to grow your store sales.

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 an Alert Bar in WordPress (3 Easy Ways) first appeared on WPBeginner.
11.07.2023
Finding Enabled PHP Functions In Your WordPress Hosting Using phpinfo()
WordPress runs on PHP, so as a WordPress developer, it’s important to understand the PHP functions enabled on the server that hosts your site(s).

Do you need to set up a plugin or configure an application on a WordPress site and are wondering if a certain PHP function or library is enabled on your server (e.g. cURL)?

In this tutorial, we’ll show you a quick and easy way to find enabled PHP functions on your server using the phpinfo() function in WordPress. We also provide a comprehensive glossary of these PHP functions for reference, and to help you better understand the backend of your WordPress sites.

This quick tutorial covers the following:
What is phpinfo()?

The phpinfo() function is a built-in PHP function that provides a long list of detailed information about the PHP installation and configuration settings on your server, including all the loaded extensions.

When phpinfo() is called and executed, it generates a comprehensive HTML page that displays various aspects of the PHP environment, including PHP version, extensions, directives, environment variables, and more.

The phpinfo() function outputs information in a tabular format, making it easy to navigate and understand the PHP configuration. This knowledge allows you to leverage the available functions on your hosting environment and optimize your WordPress development process.

The information displayed by phpinfo() can be categorized into different sections that provide specific details about a particular aspect of the PHP environment.

Some common information you can find using phpinfo() includes:

1. PHP version: The version of PHP running on the server.
2. Configuration settings: Various settings and directives defined in the PHP configuration file (php.ini).
3. Extensions: A list of loaded PHP extensions and their configurations.
4. Environment variables: Server environment variables and their values.
5. PHP variables: Information about predefined PHP variables, such as `$_SERVER`, `$_GET`, `$_POST`, etc.
6. HTTP headers: HTTP request and response headers.

For a list of all PHP functions enabled on your server, see the tutorial below.

Notes:
- Use phpinfo() with caution. While it provides valuable information for development and troubleshooting purposes, it should not be left accessible on a production server.Â After obtaining the necessary information, we recommend removing or commenting out the phpinfo() function call for security purposes.
- If you only need to know which version of PHP your server is currently running, you can skip the tutorial below and simply go to the Hosting > Overview tab in The Hub.
Check which version of PHP your server is running from The Hub

How to Find Enabled PHP Functions On Your Server Using phpinfo()

By following the steps outlined in this tutorial, you will learn how to easily retrieve a list of information showing all the enabled PHP functions and extensions on your server.

For this tutorial, we’ll show you how to access the list of PHP functions for a WordPress site set up on WPMU DEV hosting. Note that different hosting environments may use different tools and methods to display this information. Reach out to your hosting support if you have any questions or need help.

Step 1: Access your WordPress site’s files

To begin, you need to be able to access the WordPress site’s files stored on your server. You can do this either via FTP or using our File Manager tool.

Step 2: Create a PHP file

Next, create a PHP file using a text editor and add the phpinfo() function shown below:
```
<?php
phpinfo();
```
You can name this PHP file anything you like. In the example below, we’ve named the file ‘info.php’ (note: avoid using an existing filename found on the root folder of your WordPress installation to prevent overwriting the original file).

Create a PHP file to call the phpinfo() function.

Save your PHP file and close your text editor.

Step 3: Upload the file to your server

Locate the root directory of your WordPress installation, where the main files like wp-config.php and index.php are located, and upload your file to this folder.

As mentioned earlier, you can do this easily using our File Manager tool.

Upload the file to the WordPress install root directory.

Step 4:Â Access the phpinfo() output

Open your WordPress site in a web browser and enter the URL of the uploaded PHP file to generate a PHP function report.

You should see the PHP information displayed. The output will contain detailed information about the PHP configuration, including all enabled functions on your server.

PHP function report.

Step 5: Locate the enabled PHP functions

Scroll down the phpinfo() output to find a specific function. Typically, you will find a list of all enabled PHP functions along with their respective settings and configurations in the section labeled “Core.”

That’s all there is to it!

Refer to the Glossary section below if you need to look upÂ any of the functions listed in your generated PHP function report .

Glossary of PHP Functions

This glossary provides a list of various PHP functions and their applications. Feel free to bookmark this page and use it as a quick reference guide to better understand the backend of your WordPress sites.

Configuration

This function deals with setting up PHP to work with the Internet server and to define settings within your PHP scripts.
- bcmath – This module enables arbitrary precision mathematics in PHP.
- calendar – This function of PHP allows conversions between various calendar formats.
- cgi-fcgi – Command for PHP when run in CGI or FastCGI mode.
Core

These are basic PHP functions and classes that form the core of the PHP language.
- ctype – A library of PHP that checks if the data type of a variable is a valid character type.
- curl – Used for transferring data with URLs and is the backbone of multiple functions in PHP.
- date – A group of functions that let you retrieve or format the local or GMT date and time in PHP.
- dom – A PHP extension that provides a robust, powerful DOM (Document Object Model) XML API.
- exif – PHP function used to work with image metadata.
- FFI – Foreign Function Interface is an extension that provides a simple way to call native functions, access native variables, and create/access data structures defined in C libraries.
- fileinfo – A PHP extension that helps you to identify a file’s mime type.
- filter – This function filters data by either validating or sanitizing it which aids in securing a PHP application.
- ftp – FTP PHP functions help establish a connection to a remote FTP server, a crucial part of file sharing.
- gd – A library used for dynamic image creation.
- gettext – An extension aimed at the internationalization of PHP scripts by providing translation support.
- gmp – This is a PHP extension for arbitrary precision mathematics.
- hash – This function is used to generate a hash value from a string.
- iconv – Provides an interface to the GNU iconv library, which provides conversion of character sets.
- igbinary – An alternative to PHP serializer with better performance and smaller size.
- imagick – A PHP extension that allows working with ImageMagick, a robust software suite to create, edit, and compose images.
- imap – This function provides an API for talking to the internet mail servers using PHP.
- intl – This extension helps to perform UCA-conformant collation and date/time/number/currency formatting in PHP.
- json – JSON functions in PHP allows for encoding and decoding JSON data.
- ldap – LDAP functions connect, bind and disconnect from an LDAP directory.
- libxml – A foundation library that offers a set of APIs for manipulating XML, including parsing XML documents and support for other document types like HTML.
- mbstring – A non-binary string handling extension that provides multibyte specific string functions.
- mcrypt – Provides a variety of encryption functions.
- memcache – Memcache module provides handy procedural and object-oriented interface to memcached, high-performance, distributed memory object caching system, generic in nature but intended for use in speeding up dynamic web applications by alleviating database load.
- memcached – An extension for interfacing with memcached via libmemcached library.
- msgpack – Provides an interface to msgpack.org, which is a binary-based efficient object serialization library.
- mysqli – A database driver used to interact with MySQL databases.
- mysqlnd – It’s the MySQL native driver for PHP.
- openssl – A robust PHP function used for generating and verifying digital signatures.
- pcre – Provides functions for ‘perl-compatible regular expressions’.
- PDO – PHP Data Objects is a database access layer providing a uniform method of access to multiple databases.
- pdo_mysql – A driver that implements the PHP Data Object (PDO) interface to enable access to MySQL databases.
- Phar – An archive format combined with a runtime library to help build and load PHP applications bundled into a single file.
- posix – Accessors to the POSIX (Unix) system calls.
- readline – Provides an interactive line editing capabilities and history functions.
- redis – A PHP extension for interfacing with Redis, a high performance key-value storage service.
- Reflection – A PHP extension, allows inspection and reverse-engineering of PHP programs using a process called “reflection”.
- session – This function enables user session management.
- shmop – A simple interface for accessing shared memory segments in PHP.
- SimpleXML – An extension that simplifies the work of reading XML files.
- soap – SoapClient is a PHP built-in class providing methods for sending SOAP requests and receiving SOAP responses from a URL.
- sockets – PHP socket functions let you create and manage network sockets, low-level network communications between servers.
- sodium – Sodium is a modern, easy-to-use software library for encryption, decryption, signatures, password hashing and more.
- SPL – The Standard PHP Library (SPL) is a collection of interfaces and classes that are part of PHP core.
- standard – These are built-in functions and classes provided by PHP which do not rely on external dependencies or PHP extensions.
- sysvmsg – It provides an interface to System V message queues.
- sysvsem – Offers access to POSIX-style semaphores.
- sysvshm – Provides shared memory functions.
- tokenizer – The tokenizer functions provide an API that allows converting PHP source code into an array of tokens.
- xml – XML (eXtensible Markup Language) Parser functions let you parse XML documents.
- xmlreader – An extension that pulls data in and pushes it back out again.
- xmlrpc – PHP implementation of XML-RPC protocol used in exchanging data across a network.
- xmlwriter – An extension to create XML documents using a simple ‘constructor-like’ style.
- xsl – XSL is a language for expressing style sheets to transform XML documents into other XML documents.
- Zend OPcache – An open-source component that improves PHP performance by storing pre-compiled script bytecode in shared memory, thereby removing the need for PHP to load and parse scripts on each request.
- zip – PHP zip extension is used to read, write, and manipulate zip archives.
- zlib – Provides access to zlib compression library.
Additional Modules

These are the underlying software components or libraries that add various functionalities to the PHP scripting language.

Environment

Involved in setting up, configuring, and managing the PHP runtime environment.

PHP Variables

These are used to store data which can be modified during the execution of your script.

DIY or Use Our Support Team

Learning PHP will enhance your ability to troubleshoot, modify and optimize your WordPress site.

Hopefully, this tutorial will come in handy if you need to do a quick look up of your server’s enabled PHP functions. Of course, if your WordPress sites are hosted with WPMU DEV, you can always reach out to our 24/7 support team for expert assistance on anything WordPress and hosting related, or get instant answers with our AI-powered assistant.

And rest assured, our hosting is configured to work with just about all WordPress plugins, applications, and configurations.
11.07.2023
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.

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.

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.

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

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

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

It will look like this.

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.

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.

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

This will create your application.

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.

After that, scroll down to the Redirect URI settings.

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

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.

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

Next, just click the ‘Register’ button.

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.

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.

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.

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.

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.

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.

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.

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.

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

You will find it in the top-left corner.

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.

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

You can select the ‘Delegated permissions’ option.

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’.

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.

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’.

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.

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.

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.

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.

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.

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

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

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.

10.07.2023
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.

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:
- Method 1: Create Custom Blocks for WordPress Using WPCode (Recommended)
- Method 2: Create Custom Blocks for WordPress Using Genesis Custom Code Plugin (Free)
Method 1: Create Custom Blocks for WordPress Using WPCode (Recommended)

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.

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.

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.

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’.

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.

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.

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.

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.

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.

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.

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.

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.

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

Here is our custom Testimonials block on our demo website.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.
07.07.2023
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.

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.

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
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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

This is what it looked like on our demo site.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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’.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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’.

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.

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.

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.
07.07.2023
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 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’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 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.

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 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.

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 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.

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 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.

Highlight any section of text to hear it spoken.

Additionally, the free version offers different speaker styles and customizable 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).
07.07.2023
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 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’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 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.

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 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.

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 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.

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 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.

Highlight any section of text to hear it spoken.

Additionally, the free version offers different speaker styles and customizable 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).
07.07.2023
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.

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.

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.

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.

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:
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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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.

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.

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.
06.07.2023