Tag: tutorials

  • How to Add a Chatbot in WordPress (Step by Step)

    Are you looking to add a chatbot in WordPress?

    A chatbot is software that can start talking with your website visitors. Adding a chatbot to your website can help you provide instant customer support, generate leads, and improve the user experience.

    In this article, we will show you how to easily add a chatbot in WordPress, step by step.

    Add a chatbot in WordPress

    What Is a Chatbot?

    A chatbot is a computer program that uses a chat interface to talk with your website visitors. It acts just like your customer support team does when they use a live chat plugin.

    However, while live chat is a real-time conversation between a customer and your support staff, chatbots are automated.

    This means that they can only provide answers that you have programmed them for.

    For example, a customer service chatbot can answer questions about products or services, troubleshoot problems, and make recommendations.

    Similarly, a healthcare chatbot might answer questions about health conditions, provide reminders for appointments, and connect patients with doctors.

    Why Should You Use a Chatbot in WordPress?

    Adding a chatbot to your WordPress website will allow you to provide 24/7 customer support to your visitors, even when your support team isn’t available.

    This will reduce the number of support tickets on your website and improve user experience.

    Chatbots can also be used to automate other customer support tasks like answering frequently asked questions, providing product support, and fixing smaller issues.

    This will save a lot of time and let your team focus on more complex issues.

    If you have an online store, then you can also use a chatbot to find out about a customer’s interests and ask them about their needs. The chatbot can then answer the customer’s queries and close the deal.

    Having said that, let’s see how to easily add a chatbot in WordPress, step by step. We will cover two different methods, and you can use the quick links below to jump to the one you want to use:

    Add a Chatbot in WordPress Using HubSpot (Free & Easy)

    If you are looking for a free and easy way to build a chatbot, then you can use this method.

    HubSpot is an amazing customer relationship management (CRM) system that comes with a suite of tools for sales, customer service, marketing, and content management.

    It even lets you create automated conversations with your website visitors with its free chatbot builder.

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

    Upon activation, you need to visit the HubSpot menu tab from the WordPress admin sidebar and enter your email address to create a HubSpot account.

    If you already have one, then just click the ‘Sign In’ link at the bottom.

    Create or sign in to your HubSpot account

    Once you’ve provided your details and set a password for your new account, HubSpot will ask you about the industry that you work in.

    Simply select an industry of your choice from the dropdown menu and click the ‘Next’ button.

    Add your industry and click the 'Next' button

    After that, HubSpot will create a new account for you and then ask you to connect it with your WordPress site.

    From here, simply click the ‘Connect Website’ button.

    Connect website to HubSpot

    Now, it’s time for you to start creating your chatbot.

    To do this, visit the HubSpot » Live Chat page from the WordPress dashboard and click the ‘Create chatflow’ button.

    Click the Create Chat flow button

    This will take you to the next page, where you can select any of the premade chatbot templates.

    By default, HubSpot allows you to create a concierge bot, qualify leads bot, meetings bot, ticket bot, offline bot, or even a chatbot from scratch.

    For this tutorial, we will be creating a ‘Tickets bot’.

    Just select the chatflow you want to use and then click the ‘Continue in HubSpot’ button to move forward.

    Choose a bot template

    You will then be directed to your HubSpot account, where you will be creating the rest of your chatbot.

    From here, click the ‘Next’ button to move ahead.

    Click Next on the HubSpot website

    In the next step, you need to select the language for your chatbot from the dropdown menu.

    You can leave the other settings as they are and click the ‘Create’ button.

    Choose chatbot language

    Your template will now open in the chatbot builder, where you can edit the chatflow.

    Simply click on the ‘Options’ tab in the bot response and select the ‘Edit’ link.

    This will open the action settings in the left column, where you can change the action name and text.

    In HubSpot, an action is a step in the chatbot conversation that performs a specific task, like asking questions or sending responses. The first action for your chatbot will be the first question that is sent to the website visitor.

    configure chatbot action settings

    After that, scroll down to the ‘Your visitors’ responses’ section and type all the quick replies that a visitor may potentially give to this question.

    For example, a visitor may ask you how to purchase your product, or they might want to report an error that they are facing on your website.

    Add customer quick replies

    After that, scroll back to the top and switch to the ‘If/then branches’ tab.

    From here, you have to select the action the chatbot will take if the customer replies with one of the quick responses that you just added.

    For example, if you want the chatbot to open support tickets every time a user is unable to receive a confirmation email with credentials, then select the ‘Create Ticket’ option from the dropdown menu.

    After that, just click the ‘Save’ button to store the action settings.

    Choose an action for customer response

    After that, you can leave the rest of the chatflow settings as they are or keep editing the different actions for your chatbot.

    Chatbot will now create a support ticket for all the quick responses that you’ve added to the action prompt.

    Next, switch to the ‘Target’ tab from the top. Here, you have to choose where the chatbot widget will appear on your website.

    You can leave these settings as they are if you want the chatbot to appear on every page of your website.

    However, if you want to hide the chatbot on specific pages, then you will have to click the ‘Add exclusion rule’ link. This will open another rule where you can simply add the URL of the page where you want to hide the chatbot in the field on the right.

    Configure target settings

    Once you are done, scroll down to the ‘Visitor information and behavior’ section. Here, you can choose the visitors that you want the chatbot to be shown to.

    For example, if you only want visitors who are part of your contact list to be able to see the chatbot, then you can choose the ‘Visitor’ option from the left dropdown menu and the ‘Is a contact’ option in the right field.

    After that, click the ‘Save’ button and switch to the ‘Display’ tab.

    Add exclusion rule and behavior rule

    From here, you can upload an avatar image for your chatbot and change its name.

    Next, expand the ‘Chat display behavior’ section and choose the chatbot’s default state when the triggers are met.

    For example, if you want the bot’s welcome message to appear immediately once someone visits your website, then you can choose the ‘Pop open the welcome message as a prompt’ option.

    If you pick ‘Only show the chat launcher’, then visitors will have to click on your chatbot to see its prompts.

    However, if you want the chatbot to appear only when a trigger is met, then you can select the third option.

    Configure chat display behavior

    After that, scroll down and choose the trigger for the chatbot appearance.

    For instance, if you want the chatbot to be displayed once the visitor is leaving your site, then select the ‘On exit intent’ option.

    However, you can also choose the percentage of pages scrolled or minutes spent on your website as triggers.

    Next, you can also switch to the ‘Mobile’ tab to configure chat display settings for mobile phones.

    Once you have done that, simply click the ‘Save’ button to store your changes.

    Choose a trigger for chatbot

    Now, switch to the ‘Options’ tab from the top to configure general settings like delay message text, session timeout, generic error message, bot language, availability, and more.

    After that, click the ‘Save’ button to store your settings. Finally, toggle the switch at the top to activate your chatbot on your website.

    Save HubSpot chatbot

    Now, you can visit your WordPress site to see your chatbot in action.

    This is what it looked like on our demo website.

    HubSpot chatbot preview

    Add a Chatbot in WordPress Using ChatBot (Best for Customization & Multilingual Websites)

    If you are looking for more chatbot customization options or you have a multilingual website, then this method is for you.

    You can easily add a chatbot to your WordPress site using ChatBot. It is the best AI chatbot software that allows you to make chatbots using a drag-and-drop builder.

    First, you will need to install and activate the free ChatBot plugin. For detailed instructions, please see our step-by-step guide on how to install a WordPress plugin.

    Upon activation, visit the ChatBot menu tab from the WordPress admin sidebar and click the ‘Connect Account’ button.

    Click Connect to account button

    This will open the ChatBot website in a new window, where you have to enter your login credentials and click the ‘Login’ button.

    However, if you don’t have an account on ChatBot yet, then just click the ‘Sign up free’ link at the top.

    Login to your Chatbot account

    This will take you to a new page where you will need to provide your email address and enter an account name and password.

    Once you are done, just click the ‘Create account’ button.

    Create Chatbot account

    Upon account creation, you will be redirected to your WordPress dashboard. You have now successfully connected your WordPress site with ChatBot.com.

    Now, to start creating a chatbot, just click the ‘Go to dashboard’ button.

    Click the Go to dashboard button

    You will then be directed to your ChatBot account dashboard.

    From here, click the ‘Create bot’ button at the top to start the process.

    Click Create bot button

    This will take you to the ‘Create new story’ page, where you need to choose the type of chatbot that you want to make.

    By default, ChatBot allows you to create a customer service bot, job application bot, lead generation bot, FAQ bot, sales bot, and more.

    However, you can also pick the ‘Build from Scratch’ option to make a bot yourself. For this tutorial, we will be creating a customer service bot.

    Choose the customer service bot template

    This will open the premade customer service bot template on your screen.

    From here, you can easily create a conversation flow for your chatbot by clicking on the ‘Bot Response’ tabs in the chatflow.

    This will open a prompt on the screen, where you can add chat responses and quick replies like text, images, and buttons by dragging and dropping the blocks into the prompt.

    Once you have done that, just add the bot response and click the ‘Save and Close’ button at the top.

    Add a bot response

    If you want, you can also add custom filters with the chatbot response by clicking on the ‘Add Filter’ button in the prompt.

    This will open a dropdown menu where you can pick a filter that will be added to your chatbot’s response, including:

    • Message: Personalize the conversation by tailoring the responses to the user’s message.
    • Score: Prevent irrelevant conversations by filtering out messages that have a low score.
    • Failures: Improve chatbot accuracy by filtering out messages that are likely to result in failure. This can prevent the chatbot from giving incorrect or misleading information.
    • Email: Rule out invalid email addresses or address users by their emails.
    • Name: Create a personalized experience for the user or block messages that contain certain names.
    • Username: Filter out messages that contain certain usernames.
    • Integration: Create specific messages for users who use a particular tool.
    • Language: Write messages in specific languages for multilingual websites.
    • Timezone: Filter messages according to the relevant time zone.

    Additionally, you can create specific messages for users in different regions and countries. This can be helpful if you have a large international audience.

    Add filter to response

    After that, you can also select conditional logic for the now-filtered response. The response that you are creating will only be used by the chatbot if the customer that it is interacting with fits the filter.

    For example, if you have a multilingual website and want to create a chatbot for different languages, then you can use the ‘Language’ filter.

    Once you do that, select the ‘= equals’ option as the condition and then type in the language name.

    After that, you can add the response in the language that you chose. In our example, when a user types a query in the chatbot in Italian, the chatbot will show them the Italian response that we created with this filter.

    Add filter value

    When you have finished adding your filter, just click on ‘Apply filter’.

    After that, you can also use the ‘+’ button to add different blocks to your chat flow. This will open a prompt where you can select any block of your choice, including:

    • User Input: Add user messages that will trigger the bot’s response.
    • FAQ: Add frequently asked questions and their answers in this block.
    • Attachment Input: Let users attach files in an ongoing conversation with the chatbot.
    • Bot Response: Add a chatbot’s response to a question.
    • Backtracking: Prevent users from viewing previously matched interactions with the bot.
    • Fallback: Display a general message or trigger an action anytime your chatbot can’t match the user query with any chatbot response.
    • Flow: Visually organize complex chatbot response scenarios.
    • Add to segment: Segment all the users into different groups based on user data.
    • Delete from segment: Delete users from a specific segment.
    • Set attribute: Save information about users.
    • Mark Goal: Mark a conversation as having reached its goal.

    You also have the option to send a transcript of a conversation to an email address or tag different chatbot conversations with keywords and phrases.

    Add FAQs block to the chatflow

    For example, if you choose the FAQ block, it will open on your screen, where you can now add common customer support questions and their answers.

    Your chatbot will then use these responses to answer customer queries on your website.

    Add FAQs

    Next, click on the ‘Main Menu’ bot response tab to open the block prompt. Here, you can add buttons for all the services that your chatbot can offer using the Button block.

    After that, click on each Button block to open its settings and configure where you want the button to direct the users.

    For example, you can allow users to be directed to the FAQs chatbot response that you created by selecting the button type as ‘Go to block’.

    Next, select the ‘FAQ’ block from the ‘Go to’ dropdown menu and click the ‘Save Settings’ button.

    Configure main menu bot response

    Other than FAQs, you can also create buttons for directing users to your newsletter signup, contact us page, discount offers, and more.

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

    Publish the bot

    A prompt will now open on your screen, asking you to provide a name for your chatbot.

    After entering the details, simply click the ‘Confirm’ button to publish your chatbot.

    Save chatbot

    Next, visit your WordPress dashboard and head over to the ChatBot tab, where you will now notice that the ‘Choose your bot’ section will be visible on the screen.

    Note: Keep in mind that it might take 3-4 hours between creating your chatbot and it being visible in your WordPress dashboard.

    Now, simply choose the bot that you just created from the dropdown menu.

    After that, toggle the ‘Hide chat on mobile’ switch to ‘On’ if you don’t want people visiting your website from their phones to be able to see the chatbot.

    Add chatbot to your site

    You can also toggle the ‘Hide chat for Guest visitors’ to ‘On’ if you want the chatbot to be exclusive for your members only.

    Finally, click the ‘Add to Site’ button. Now, you can visit your website to view the chatbot in action.

    Chatbot preview

    Bonus: Add Live Chat to Your WordPress Site

    Live chat is a communication tool that allows visitors to chat with a member of your customer support team through a chat window on your website.

    It is a super popular way to connect with customers and has a satisfaction level of 73%, which is much higher than email, phone, and SMS support.

    Adding live chat to your WooCommerce store will allow customers to get help quickly and easily without having to wait on hold or send an email. 

    This reduces the bounce rate, increases sales, and even gives you a chance to collect feedback from users.

    You can easily add this feature to your website using LiveChat, which is the best live chat support software for WordPress.

    Live Chat Inc Website

    It comes with pre-made live chat templates, real-time chat, multiple support channels, canned responses, chat transcripts, chat analytics, and so much more.

    Plus, it integrates with tools like WooCommerce, HubSpot, ChatBot, Constant Contact, and Mailchimp.

    For detailed instructions, you can see our step-by-step tutorial on how to add free live chat in WordPress.

    We hope this article helped you learn how to easily add a chatbot in WordPress. You may also want to see our guide on how to optimize the customer journey in WooCommerce and our top picks of the best video chat software for small businesses.

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

    The post How to Add a Chatbot in WordPress (Step by Step) first appeared on WPBeginner.

    Go to source

  • How to Easily Integrate Zoom Meetings & Webinars in WordPress

    Are you looking for a way to integrate Zoom meetings and webinars in WordPress?

    Integrating WordPress with Zoom allows you to automatically enroll customers, visitors, and new members into Zoom video calls and webinars. This can improve user engagement and help build a community around your brand.

    In this article, we will show you how to easily integrate Zoom meetings and webinars in WordPress, step by step.

    How to easily integrate Zoom meetings and webinars in WordPress

    Why Integrate Zoom Meetings and Webinars With WordPress?

    Integrating Zoom with WordPress lets you easily automate your meeting and webinar registration process. This can save you a lot of time that you can spend on other business tasks.

    Zoom is one of the most popular meeting, webinar, and video conference call software in the world, used by over 300 million people every day.

    It’s a must-have tool for businesses with remote teams or WordPress website owners who need to get in touch with customers and clients virtually.

    For instance, if you have an online store, then you can use Zoom for live product demos, customer support, online training, and even host webinars with your customers to promote upcoming products on your site.

    That being said, let’s take a look at how you can easily integrate Zoom meetings and webinars in WordPress. Here’s a quick overview of the topics we will cover in this guide:

    Install and Activate the Uncanny Automator Plugin for WordPress

    The easiest way to connect Zoom with WordPress is by using Uncanny Automator.

    It’s the best WordPress automation plugin that helps you create automated workflows in WordPress without writing any code. The tool lets you easily connect your WordPress site with external apps like Zoom, Slack, and Asana.

    It’s like Zapier for WordPress websites but without the high costs.

    To learn more, see our article on how to create automated workflows in WordPress.

    To connect Zoom with WordPress, you will first have to visit the Uncanny Automator website.

    From here, click the ‘Get Uncanny Automator Now’ button to continue.

    Click Get Uncanny Automator Now button

    This will take you to the ‘Pricing’ page, where you can select a plan of your choice.

    Keep in mind that Uncanny Automator also has a free version, but it has limited features. That is why we are using the premium plan for this tutorial.

    Uncanny Automator pricing

    Upon purchase, you must install and activate the Uncanny Automator plugin on your WordPress website. For detailed instructions, you may want to see our beginner’s guide on how to install a WordPress plugin.

    Note: You will also have to install the free version of the Uncanny Automator plugin because it will be used as the base for the pro plan.

    Once you have done that, visit the Automator » Settings page from the WordPress admin sidebar to enter the license key for your pro plan. You will find this information in your account on the Uncanny Automator website.

    After that, don’t forget to click the ‘Activate license’ button.

    Uncanny Automator license activation

    Now that Uncanny Automator is installed and activated, let’s set up your Zoom account.

    Set Up Your Zoom Account the Right Way

    In order to integrate Zoom and WordPress, you need at least the Pro version of Zoom and the Zoom Webinars addon.

    There is a free version of Zoom, but you will need a paid account to set up the integration. First, head to the Zoom website and sign up for the plan that best suits your needs.

    If you want to integrate webinars on your website, then you will also have to buy the Zoom Webinars addon.

    Zoom pricing

    Once you have a premium account, you need to go to the Zoom App Marketplace and sign in to your account. Here, you will create an app that sends data between Zoom and WordPress.

    To do this, click the ‘Develop’ menu item and select the ‘Build App’ option from the dropdown menu in the top right corner of the screen.

    Select the Build App option from the Develop dropdown menu

    This will bring you to the ‘Choose your app type’ page, where you must select the type of app you want to build.

    From here, you have to find the ‘Server-to-Server OAuth’ app type and click the ‘Create’ button under it.

    Select Server-to-Server OAuth as app type

    Next, you can name your app in the popup. The name is to help you remember the purpose of the app and won’t be visible to your visitors.

    Simply enter your app name and click the ‘Create’ button to start the process.

    Type the Zoom app name

    This will take you to the ‘Connect Zoom with WordPress’ screen, where you will see the app credentials listed.

    From here, you must copy the ‘Account ID’, ‘Client ID’, and the ‘Client Secret’ credentials and paste them into a text editor for now.

    These credentials will be used to connect Zoom with your WordPress website. Next, click the ‘Continue’ button.

    Copy the Zoom app credentials

    You’ll now be taken to the next step, where you have to provide basic information for your app, including the app name, company name, short description, developer name, and email address.

    Once you are done, just click the ‘Continue’ button to move to the next step.

    Provide basic information for the Zoom app

    After that, you’ll be taken to the ‘Feature’ screen, where you don’t have to configure any settings, so you can click ‘Continue’ on this screen too.

    This will direct you to the ‘Scopes’ screen, where you have to select at least one scope for your app to be able to activate it.

    These scopes provide a way to limit the amount of access granted to an app. To set a scope, click the ‘+ Add Scopes’ button.

    Click the Add Scopes button

    This will open a prompt on the screen where you can select scopes for Zoom meetings and webinars that will be hosted on your website using this app.

    For example, if you want the app to be able to view live streaming token information or all user meetings information, then simply check the boxes next to these options.

    You can also configure the scopes for Zoom webinars here by simply switching to the ‘Webinar’ option from the left column. After that, click the ‘Done’ button to move forward.

    Next, click the ‘Continue’ button to move to the next step.

    Add scopes for meetings and webinars

    On the ‘Activation’ page, you will now see a message informing you that your app is ready.

    From here, simply click the ‘Activate your app’ button.

    Click Activate your app button

    Create a New Zoom Meeting

    Now, you can create a new Zoom meeting that you will connect to your WordPress site.

    To do this, visit your Zoom account to click the ‘Schedule’ link, and then fill in your meeting details.

    Schedule zoom meeting

    You can even set a recurring Zoom meeting for your users by checking the ‘Recurring meeting’ box in the ‘Timezone’ section.

    Once you are done, don’t forget to click the ‘Save’ button to store your settings.

    Create a New Zoom Webinar

    To create a new Zoom webinar, click the ‘Webinars’ menu option in the ‘Personal’ tab inside your Zoom account.

    After that, just click the ‘Schedule a Webinar’ button.

    Schedule a Zoom webinar

    On the next page, you can enter all of your webinar information.

    After that, you need to make sure the ‘Required’ box is checked in the Registration section.

    Zoom webinar registration required

    After that, simply click the ‘Save’ button at the bottom of the page.

    Connect Zoom Meetings and Webinars With WordPress

    Once Uncanny Automator is activated and Zoom is set up, you need to connect both of these apps to each other.

    For this, head over to the Automator » App Integrations page from the WordPress dashboard.

    Next, click the ‘Zoom Meetings’ tab in the left column and then add the ‘Account ID’, ‘Client ID’, and the ‘Client Secret’ credentials that you copied earlier into the fields.

    Finally, click the ‘Connect Zoom Meetings Account’ button.

    Connect WordPress and Zoom app

    If you want to integrate Zoom Webinars, too, then just click the ‘Zoom Webinars’ menu option.

    Then, paste the same ‘Account ID’, ‘Client ID’, and ‘Client Secret’ credentials that you used above.

    Once you are done, go ahead and click the ‘Connect Zoom Webinars Account’ button.

    Click connect with webinar button

    Now that we have set up Zoom and integrated it with WordPress, let’s look at some of the cool things that you can do with this Uncanny Automator integration.

    Register Users for a Zoom Meeting After Form Completion in WordPress

    This integration will automatically register users for a Zoom meeting when they fill out a form on your website. This can be used to onboard new clients, schedule coaching calls, and more.

    If you don’t have an active WordPress form on your website, then you need to create one now.

    Uncanny Automator works with all major forms solutions, including WPForms, Formidable Forms, and more.

    For this tutorial, we will be using WPForms because it’s the best contact form plugin for WordPress, used by over 6 million websites. There’s also a webinar form template in the form templates pack addon that makes form creation easy.

    For more details, see our step-by-step guide on how to create a contact form in WordPress.

    Now, you are ready to connect your WordPress form with Zoom.

    To do this, you will be creating what’s called a ‘recipe’. In Uncanny Automator, recipes are the automations that link different plugins and apps together.

    To get started, navigate to the Automator » Add new page from the WordPress admin sidebar and click the ‘Everyone’ option as the recipe type.

    The Everyone recipes can be triggered by any user, while logged-in recipes can only be activated by users logged in to your website.

    After that, click the ‘Confirm’ button.

    Choose everyone as recipe type

    Next, you have to provide a name for your recipe. This will help you remember the recipes you create without the name being visible to your users.

    Keep in mind that each recipe has two different parts: the trigger and the action. The trigger is the event that will start the recipe, and the action is the task that runs after the trigger takes place.

    For your first trigger, you need to select ‘WPForms’ in the ‘Trigger’ meta box.

    Choose WPForms as trigger

    After that, you have to choose a specific trigger related to WPForms.

    For example, if you want your users to be added to a Zoom meeting once they submit a contact form, then you can select the ‘A form is submitted’ option.

    Choose a form is submitted option as the trigger

    If you have multiple forms on your WordPress blog, then you will also have to select the form where the submission will trigger the action.

    To do this, simply select a form of your choice from the ‘Form’ dropdown menu.

    Once you are done, don’t forget to click the ‘Save’ button to store your settings.

    Choose a form that will trigger the action

    Next, you will need to add an action for your automation.

    To do that, scroll down to the ‘Actions’ sections and click the ‘Add action’ button under the meta box.

    This will open a list of all the integrations available in the Uncanny Automator. From here, you need to pick the ‘Zoom Meetings’ option.

    Select Zoom Meetings integrations under the actions section

    This will open the ‘Zoom Meetings’ action settings on the screen.

    From here, you must choose the action that Zoom will perform upon form submission.

    If you want to add a user to a Zoom meeting after they fill out a specific form on your website, then you need to select the ‘Add the user to a meeting’ option.

    Select add user to a meeting option

    Then, you can choose the Zoom meeting you want users to register for in the ‘Meeting’ box.

    Once you are done, don’t forget to click the ‘Save’ button to store your settings.

    Select a Zoom meeting of your choice from the dropdown menu

    Now, it’s time for you to finally publish your Uncanny Automator recipe. To do this, all you need to do is toggle the switch in the ‘Recipe’ box to ‘Live’.

    Now, when your users fill out the form, they will automatically be registered for your Zoom meeting.

    save WPForms and Zoom recipe

    Register Users for a Zoom Webinar After Form Completion in WordPress

    Another popular integration is registering users for a webinar when they fill out a form on your website.

    To do this, you will follow the same steps as above. However, you will select ‘Zoom Webinars’ instead of ‘Zoom Meetings’ in the actions section.

    First, follow the same initial ‘Triggers’ section as above. This means that you will have to choose WPForms as the integration for the trigger.

    After that, you can select the ‘A form is submitted’ option as the trigger.

    Choose a form is submitted option as the trigger

    Next, scroll down to the ‘Actions’ section and click the ‘Add action’ button to expand the menu.

    Then, simply select the ‘Zoom Webinars’ option as the integration.

    Select Zoom Webinars integration

    This will open up the actions settings for the Zoom webinar.

    From here, you can select the ‘Add the user to a webinar’ option from the dropdown menu. This will automatically add a user to your Zoom webinar after they fill out a specific form on your website.

    Select add user to webinar

    Next, you will also have to choose a Zoom webinar from the dropdown list.

    Once you are done, don’t forget to click the ‘Save’ button to store your settings.

    Select new user webinar

    After that, you must make your recipe live so that new users will automatically be enrolled in your webinar.

    To do this, simply click the toggle in the ‘Recipe’ box so it says ‘Live’.

    Save Zoom webinar and WPForms recipe

    Register Customers for a Zoom Webinar After They Make a Purchase in WordPress

    Another way to connect WordPress with Zoom is to enroll new customers in a product webinar after they make a purchase in your WooCommerce store.

    Keep in mind that the WooCommerce plugin and store must be set up before you start creating a recipe with Uncanny Automator.

    First, you need to visit the Automator » Add new screen from the WordPress dashboard and click the ‘Everyone’ option.

    After that, click the ‘Confirm’ button to move forward.

    Choose everyone as recipe type

    Next, you have to provide a name for your recipe. This name won’t be displayed to your customers on the front and is only for your identification.

    Once you have done that, choose WooCommerce as the integration in the ‘Trigger’ meta box.

    Select WooCommerce as trigger integration

    This will open the list of WooCommerce triggers in the dropdown menu. From here, you can select any trigger that suits your needs.

    For example, if you want customers to be added to your webinar after they buy a product, then you can select the first option.

    Select a WooCommerce trigger of your choice

    After that, select the ‘completes’ option in the ‘Trigger condition’ box to start the automation when a customer completes a purchase.

    Then, just click the ‘Save’ button to store your settings.

    Choose trigger condition

    Now, you can choose a specific product in your store or have the automation run when a customer purchases any product.

    Simply select the ‘Any product’ option if you want all of your products to be included in the automation, and then click the ‘Save’ button.

    Choose product for trigger

    Next, scroll down to the ‘Actions’ section and click the ‘Add action’ button to expand the menu.

    Then, choose the ‘Zoom Webinars’ integration from the list.

    Select Zoom Webinars integration

    This will open the Zoom webinar action settings on the screen, where you can select the ‘Add the user to a webinar’ option.

    This will automatically register new customers for your webinar once they make a purchase.

    Select add user to webinar

    After that, select the webinar of your choice from the dropdown list in the ‘Webinar’ box.

    If you have multiple webinars running, then make sure to choose the webinar that’s associated with your WooCommerce products.

    New product webinar in Uncanny Automator

    The last thing you need to do is make your recipe live.

    To do this, simply click the toggle in the ‘Recipe’ box so it says ‘Live’.

    Save WooCommerce to Zoom recipe

    Now, when your customers purchase a product, they will automatically be registered for your product webinar.

    Register Members for a Zoom Meeting After Sign Up in WordPress

    When running a membership site, registering new members for a Zoom call can be a great way to welcome them into your community.

    If you haven’t set up your members-only site yet, then you can see our ultimate guide to creating a WordPress membership site.

    You can also register new users for a Zoom orientation call when they enroll in your online course.

    After your website is set up, you can navigate to the Automator » Add new screen from the WordPress admin sidebar and click the ‘Logged-in’ option.

    Now, only the registered members on your site will be able to trigger the recipe.

    After that, click the ‘Confirm’ button to continue.

    select logged in user as recipe type

    Next, add a name for your recipe. This name won’t be displayed to anyone on the front end and is only for your identification.

    After that, select the ‘MemberPress’ integration in the trigger section.

    Choose MemberPress as trigger integration

    This will open the MemberPress trigger options on the screen in a dropdown menu list.

    We will select ‘recurring subscription product’, but you can select the product type that’s right for your site.

    Choose a MemberPress trigger

    Next, you need to choose the subscription product from the dropdown in the ‘Product’ box.

    After that, just click the ‘Save’ button.

    Choose trigger product

    Now, it’s time to add an action to your recipe. To do this, simply click the ‘Add action’ button in the ‘Actions’ box to expand the menu.

    This will bring up a list of available integrations, where you need to pick the ‘Zoom Meetings’ option.

    Select Zoom Meetings integrations under the actions section

    This will open the Zoom Meetings actions settings on the list.

    From here, choose the ‘Add the user to a meeting’ option if you want to add a user to a meeting when they make a recurring subscription purchase.

    Select add user to a meeting option

    Then, select the Zoom call for your new members in the ‘Meeting’ box.

    After that, simply click the ‘Save’ button to store your settings.

    Select a webinar of your choice

    The last thing you need to do is make your recipe live.

    To do this, simply click the Draft toggle in the ‘Recipe’ box so it shows ‘Live’.

    MemberPress to Zoom recipe live

    Now, your new members will automatically be enrolled in a Zoom member orientation call.

    Besides Zoom, Uncanny Automator also allows you to create countless other recipes for different plugins and apps like Twilio and Google Sheets.

    We hope this article helped you easily integrate Zoom meetings and webinars in WordPress. You may also want to see the best WooCommerce automations to increase sales or our expert comparison of the best business phone services for small businesses.

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

    The post How to Easily Integrate Zoom Meetings & Webinars in WordPress first appeared on WPBeginner.

    Go to source

  • How to Easily Add Emojis to Your SEO Title in WordPress

    Are you looking to add emojis to your SEO title in WordPress? 

    Boosting the click-through rates (CTR) on your blog posts can make a huge impact on your traffic and your bottom line. Emojis are visually appealing and help your page stand out.

    In this post, we will show you how to add emojis to your SEO title in WordPress so you can stand out in search results and bring more traffic to your website. 

    How to Add Emojis to Your SEO Title in WordPress

    Why Add Emojis to Your SEO Titles? 

    Emojis are small digital icons used to communicate emotions, objects, activities, and other concepts. They can either replace text or enhance the message, giving it more meaning.

    On a page filled with words, colorful and bright emojis help your page stand out.

    By using emojis, you draw attention to your page and make your brand seem more human, attracting your target audience and boosting click-through rates. 

    While increasing your CTR isn’t guaranteed to help you rank better on Google, getting more traffic to your website is always a good thing. 

    That’s not the only reason. Search engines also support search queries with emojis. Try typing ‘🍕recipe’ into the search bar of Google.

    Emoji in search bar

    You’ll find a few search results with the ‘🍕’ emoji as Google likes to either find the best pizza recipe pages or pages with the exact ‘🍕’ emoji.

    How to Use Emojis in Your SEO Titles

    Emojis can negatively impact your click-through rates and SEO if they are seen as misleading or spammy.

    Before you start embedding emojis all over your titles, there are some ground rules to follow:

    • Consider your audience: Without a doubt, emojis work better for some niches than others. For example, including emojis on a recipe page for the best cocktails to make in the summer might be appropriate. But adding a heart or syringe to a page related to health care may hurt your brand’s reputation.
    • Don’t use emojis to replace words: It doesn’t matter how clear or descriptive your emojis are. They should never replace words because users are forced to interpret the meaning of the emoji instead of being told.
    • Use clear emojis:  Avoid ambiguous emojis that people can misinterpret. Instead, stick to simple ones that are widely known to all audiences. 
    • Use emojis that work on both light and dark backgrounds: Don’t use light emojis on a light background. For example, a yellow hand emoji works better on light backgrounds than a white hand emoji. This is especially important for SEO titles since Google’s default results background is plain white.

    Now that you know how to use emojis responsibly, you are ready to begin using them on your web pages.

    Let’s take a look at how you can add emojis to your SEO titles.

    How to Add Emojis to Your SEO Titles

    Adding emojis to your titles is incredibly easy once you have a good plugin. Without it, you’d have to scour the internet to find the right emoji code, which overcomplicates the process.

    The first step to adding emojis to your SEO titles is using the free All in One SEO plugin

    AIOSEO offers on-page analysis so you can optimize your blogs to rank higher in search results. You can also use the built-in emoji picker to add emojis to your SEO titles.

    AIOSEO also comes with an SEO checklist tool, a link assistant, and many other features you can use to optimize your website to boost your rankings.

    Start by installing the AIOSEO plugin. For more details, you can follow our step-by-step guide on how to install a WordPress plugin.

    Once that’s done, you are ready to edit your blog posts and pages and add emojis to your SEO title.

    Edit Your SEO Title

    Optimizing your metadata is super simple with the AIOSEO plugin. In the left-hand menu of the WordPress admin dashboard, select Posts

    You can also do this for pages on your WordPress blog, but for this tutorial, we are just going to edit a post as an example.

    Find the blog post you’d like to update. Then click the ‘Edit’ link. If you have both the Block and Classic editors enabled, then either will work. 

    Edit blog post in WordPress

    Simply scroll down the WordPress content editor until you get to the ‘AIOSEO Settings’ tab.

    From there, you can edit the post title field.

    Aioseo settings

    Choose Your Emoji and Add It

    Now, you are ready to add your emoji to your metadata. To do that, scroll down a little further below the AIOSEO Settings.

    Under Post Title, click on the emoji icon next to the tags in each field. 

    Emoji picker

    It’ll open up a window with a selection of emojis for you to choose from.

    Browse through and pick the emoji of your choice, or just use the search bar to find what you are looking for.

    Post title emojis

    Lastly, make sure to hit ‘Update/Publish’.

    After that, the emoji will appear in the SEO title and display in search results.

    Publish blog in WordPress

    Now, select your emoji of choice, and that’s it! Congratulations, you’ve just added emojis to your SEO title! 

    Frequently Asked Questions

    Now that you know how to add emojis to your SEO titles, you may have a few more questions about how to effectively use emoticons to enhance your WordPress website.

    How Do You Add Emojis to HTML Titles? 

    To add emojis to HTML titles, you can use the Unicode character codes for emojis directly within the title tag. You can find these codes on various websites that provide emoji Unicode references. Look for the emoji you want to use and then copy its Unicode code.

    Inside the <title> tag, you can include the Unicode character code for the emoji. You must use the code &#x followed by the emoji code. For example, to add a smiley face emoji (😊) with the Unicode code U+1F60A, you would use &#x1F60A. 

    Do Emojis Affect SEO? 

    Google says you can use emojis in your SEO pages, including titles, but it won’t help or harm your search rankings in any way. However, emojis indirectly help your SEO efforts by improving click-through rates.

    Emojis can humanize your brand, and if users spend more time on your site or interact with your content, these signals could boost your search ranking position. 

    Do Emojis Go Before or After Your Title? 

    Most emojis should generally come after text and never before. You want people to get the message first. Using emojis before the title can give a bad user experience, especially for anyone using a screen reader.

    We hope this article has helped you learn how to add emojis to your WordPress SEO titles. You may also want to read our ultimate WordPress SEO guide for beginners and the most useful WordPress plugins for all websites. 

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

    The post How to Easily Add Emojis to Your SEO Title in WordPress first appeared on WPBeginner.

    Go to source

  • How to Sell Your WooCommerce Products on Instagram

    Are you looking for a way to sell products on Instagram?

    By selling your products on Instagram, you can reach a wider audience, generate more sales, and even create a sense of community around your brand.

    In this article, we will show you how to easily sell your WooCommerce products on Instagram.

    Sell WooCommerce products on Instagram

    We will cover a lot of topics in this post, and you can use the quick links below to jump to the different sections:

    Why Sell WooCommerce Products on Instagram?

    The Instagram Shopping feature lets you show the catalog and pricing of your products within the photos on your Instagram account.

    This means that users browsing on your Instagram account will be able to see a ‘View Products’ icon on your posts.

    Once they click on it, they will be able to see the names, descriptions, and prices of the products tagged in the post, and on further clicking, they will be directed to your Instagram store to view all your products.

    Instagram shop preview

    Upon tapping again, the users will then be taken to your WooCommerce store that is linked to your Instagram account.

    This allows you to create a shop front for your online store on the Instagram platform and directly promote your products on social media to increase sales.

    Plus, Instagram is used by over 1 billion active users, which helps you to reach a wider audience.

    The Downsides of Using Instagram Shopping

    Even though Instagram Shopping can help increase your sales, it’s not easy to set up. This is because to set up an Instagram Shopping store, you must first meet Instagram’s requirements.

    Here is a list of all the requirements that you must fulfill to set up an Instagram Shopping store:

    • You must have the latest version of the Instagram app.
    • Your site must be connected to an eCommerce platform for selling products.
    • You must convert your Instagram account into a Business account and add your public business information.
    • Be a Facebook page admin or set up a Facebook Business Manager account.
    • Your Instagram account has to be connected to your Facebook page.
    • Have an eligible product catalog connected with a Facebook shop to sell products on Instagram.
    • Go through the domain verification process.
    • Follow all of Instagram’s commerce policies.

    Another downside of Instagram Shopping is that you can only sell physical products on the platform. This is because you can only tag physical products in a post.

    For example, if you sell digital downloads like music online, then you won’t be able to set up an Instagram store for it.

    Moreover, Instagram still hasn’t introduced the Instagram Shopping feature in some countries. This means that even if you meet the requirements, you may not be able to sell products on Instagram simply because the feature isn’t available in your region.

    Having said that, let’s see how to set up Instagram Shopping in WordPress.

    How to Sell Products on Instagram With Instagram Shopping

    You can sell WooCommerce products on Instagram by turning on the Instagram Shopping feature.

    However, keep in mind that you will need a business account on Instagram to do this. You will also need to meet the platform’s requirements and wait for their approval first.

    You will also need to set up your WooCommerce store first. If you haven’t already done this, then please see our complete WooCommerce tutorial.

    Step 1: Submit Your WooCommerce Store for Instagram Review

    To send your WooCommerce store for the platform’s approval, you will need to visit the Commerce Manager page on the Meta website.

    Here, click on the ‘Get Started’ button to be directed to the next screen.

    Visit the Commerce Manager page on Meta website

    From here, you will have to select the ‘Create a shop’ option to sell your products on Instagram.

    After that, just click the ‘Get Started’ button to continue.

    Choose a way to sell products on Instagram

    Next, simply add products to your catalog and then submit the store for review to Instagram.

    Once you’ve done that, Instagram will review your online store and then send you their answer over email in the next few days.

    Step 2: Turn On the Instagram Shopping Feature on Your Account

    Once you have set up a business Instagram account and your online store has been approved by Instagram, you need to open your Instagram app and select the three-line menu in the top right corner of the screen.

    This will open a prompt where you have to choose the Settings » Business option.

    Click Settings > Business option on the Instagram account

    If your account has been approved for Instagram Shopping by the platform, then you will see a ‘Shopping’ menu on the screen that you have to click or tap on.

    Next, you need to select the ‘Continue’ button on the screen and then pick one of your product catalogs to set up Instagram Shopping.

    Once you are done, don’t forget to click the ‘Done’ button to store your settings.

    You have now successfully set up an Instagram Shopping store.

    Step 3: Add Products to Your Instagram Shop Using Product Tags

    Now that you have set up your Instagram shop, you can easily add a post for your products by clicking on the ‘Share Photos’ button.

    You need to add a product description and call to action (CTA) for the product in the caption and then click on the ‘Tag Products’ option.

    After that, tap the section of the post where you want to add the product tag.

    Tag products on Instagram

    This will open a search box where you need to type the product’s name and select it on the screen.

    Finally, click the ‘Done’ button and then the ‘Share’ button at the top to make your product post live on your Instagram account.

    Now, users will be able to view the product details in the post, and clicking on the tag will open your Instagram Shopping store.

    Add tags for the product and click the Share button

    How to Set Up Instagram Shopping on Your WordPress Website

    Even though Instagram Shopping can increase your revenue, it is super hard to set up and get your store approved.

    Another easier way to sell products on Instagram is to display your shoppable Instagram feed on your WordPress website.

    This way, visitors will easily be able to view your Instagram product reels, posts, and videos without needing to visit your Instagram account. They can also buy products directly from your online store.

    You can easily connect your WordPress site with your Instagram account using the Smash Balloon Instagram Feed Pro plugin.

    It is the best Instagram plugin for WordPress that lets you easily create, customize, and embed your shoppable Instagram feed on any page or post on your WordPress site.

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

    Note: You can also use the free version of the Instagram Feed Pro plugin. However, we will be using the premium plan for this tutorial.

    Upon activation, you need to head over to the Instagram Feed » Settings page from the WordPress admin sidebar.

    Once you are there, enter the Smash Balloon license key for the plugin into the field and click the ‘Activate’ button.

    You can find this information in your account on the Smash Balloon website.

    Activate the Instagram Feed Pro plugin license key

    Next, visit the Instagram Feed » All Feeds page from the WordPress dashboard and click the ‘+ Add New’ button.

    You can now start creating your own shoppable Instagram feed for WordPress.

    Click the Add New button to start creating your Instagram feed

    This will direct you to the ‘Create an Instagram Feed’ page, where you have to select the ‘User Timeline’ option as the feed type and click the ‘Next’ button.

    This means that Smash Balloon will directly fetch posts for the feed from your Instagram account and even update the feed automatically once you post new photos on your Instagram account.

    Choose the User timeline feed option

    You will now be taken to the ‘Select one or more sources’ page, where you will have to connect your Instagram account.

    To do this, click the ‘+ Add Source’ button.

    Click the Add Sources button

    This will direct you to the Smash Balloon website, where you will be asked to select your Instagram account type.

    Here, click the ‘Business’ option to move to the next step. You will then be asked if you have connected your Facebook account using Smash Balloon before.

    Here, simply select your answer and then move to the next step.

    Choose business option as the Instagram account type

    Keep in mind that to connect your Instagram account with WordPress, you will first have to connect your Instagram account with your Facebook page.

    To do this, click the ‘Connect with Facebook’ button.

    Click the Connect with Facebook button

    This will direct you to your Facebook account, where you have to select your business Instagram account from the prompt.

    After that, click the ‘Next’ button to continue.

    Selecting the shoppable Instagram source

    Next, you have to select the Facebook page that you want to link to your WordPress site.

    Once you’ve done that, just click the ‘Next’ button to move forward.

    The Facebook for WooCommerce WordPress plugin

    Facebook will now ask you to manage the plugin’s access rules for your Facebook page.

    Simply click the ‘Done’ button to allow Smash Balloon access to your Facebook page.

    Changing the information that Smash Balloon can access

    Once you do that, you will redirected to your WordPress dashboard, where you have now successfully connected your Instagram and Facebook account to your website.

    To start creating a feed, you need to click on the popup of the Instagram account that you just linked to your website.

    After that, click the ‘Next’ button to continue.

    Adding a shoppable image source to a WordPress website

    How to Create an Instagram Feed for Your WordPress Site

    Upon selecting your account, Smash Balloon will open the Instagram feed in the live feed editor.

    Here, you will notice a live preview for the feed on the right with all the customization options in the left column of the screen.

    From here, simply click the Settings » Shoppable Feed tab to open more settings.

    Click on the Shoppable feed tab in the left column

    On the new screen, turn on the toggle to activate the Shoppable Feed feature.

    Smash Balloon will now show an ‘Add’ button next to all of the product posts on your Instagram Feed.

    Enable the shoppable feed option

    Next, click on the ‘Add’ button above an Instagram post from your feed to open its settings in the left column.

    Once you do that, just type the product’s URL from your WooCommerce store into the ‘Product Link’ field and click the ‘Add’ button.

    Now, when a user clicks on this product while browsing through your Instagram feed, they will be directly taken to the product’s page on your WooCommerce store.

    Add product URL

    You can now repeat these steps for all of the posts in your feed to make your products shoppable.

    You can even change the URL of a product by clicking the ‘Update’ button on the posts.

    Finally, click the ‘Save’ button at the top to store your settings. You have now successfully connected your Instagram Shopping account with your WooCommerce store.

    How to Customize the Instagram Shopping Feed

    You can easily customize the Instagram shopping feed that you’ve just created by using the live feed editor.

    First, you can click on the ‘Feed Layout’ tab in the left column to change the layout of your Instagram feed.

    From here, you can use the Grid, Carousel, Masonry, or Highlight option. The live feed preview will automatically be updated according to your chosen option.

    Choose a feed layout

    Depending on the layout, you will get some extra settings that you can use to fine-tune your feed.

    For example, upon choosing the ‘highlight’ option, you can pick the element that will be used to highlight different posts, including a pattern, post ID, or hashtag.

    You can also select the padding and height of the feed by filling in those fields.

    Once you have made your changes, don’t forget to click the ‘Save’ button to store your settings.

    Choose highlight as the feed type

    With Smash Balloon’s live feed editor, you can also customize the color scheme and header, add a load more button, and further customize your Instagram feed.

    For more detailed instructions on this, please see our tutorial on how to add Instagram shoppable images in WordPress.

    How to Add the Instagram Shopping Feed to Your Website

    To add the Instagram Shopping feed to your website, you need to visit the Instagram Feed » All Feeds page from the WordPress dashboard.

    From here, copy the shortcode next to the Instagram feed that you created.

    Copy the Instagram feed shortcode

    Next, open a page or post in the block editor.

    Once you are there, click the ‘+’ button on the screen to open the block menu. Next, find and add the Instagram Feed block to the page.

    The Instagram Feed WordPress block

    By default, the Smash Balloon will display a random feed.

    To embed your Instagram feed on the page, simply paste the shortcode into the ‘Shortcode Settings’ section in the block panel and click on the ‘Apply Changes’ button.

    Adding a shoppable Instagram feed to a page or post

    Finally, click the ‘Update’ or ‘Publish’ button to store your settings.

    You have now successfully added your Instagram Shopping feed to your WooCommerce store.

    Instagram feed preview

    Bonus: Promote Your Products With Affiliate Marketing

    Apart from selling your products on Instagram, you can also make money in your online store by starting your own affiliate program.

    Other small businesses or influencers can join your referral program and promote your products or services on their websites in exchange for a commission.

    This can be a cost-effective way to advertise your products or services. It can even help you build a community of affiliates who are passionate about your products and are willing to help you spread the word.

    The easiest way to build an affiliate program for your website is by using AffiliateWP, which is the best self-hosted affiliate program plugin for WordPress.

    It makes it easy for beginners to launch a referral program and grow their online sales by integrating with WordPress plugins like WooCommerce, Easy Digital Downloads, and WPForms.

    AffiliateWP website

    Plus, AffiliateWP lets you monitor affiliate clicks, sales, and payments and comes with amazing features like a built-in affiliate dashboard, affiliate coupon tracking, a referral link generator, and more.

    To learn more, you can see our tutorial on how to easily add an affiliate program in WooCommerce.

    We hope this article helped you learn how to sell your WooCommerce products on Instagram. You may also want to see the best WooCommerce hosting and our expert picks for the best WooCommerce plugins for your online store.

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

    The post How to Sell Your WooCommerce Products on Instagram first appeared on WPBeginner.

    Go to source

  • 42 Extremely Useful Tricks for the WordPress Functions File

    Are you wondering what you can do with the WordPress functions file?

    All WordPress themes come with a functions.php file. This file acts as a plugin, allowing theme developers and general users to add custom code in WordPress easily.

    In this article, we will show you some useful tricks for the WordPress functions file.

    Handy WordPress functions file tips and hacks

    What Is the Functions File in WordPress?

    The functions.php file is a WordPress theme file that comes with all free and premium WordPress themes.

    It acts as a plugin and allows theme developers to define theme features. Users can also use it to add their custom code snippets in WordPress.

    However, keeping custom code in your theme’s functions file is not the best way to save your customizations. If you update your theme, then the functions.php file will be overwritten, and you will lose your custom code snippets.

    Instead, we recommend everyone use WPCode, a free plugin that lets you insert code snippets into your WordPress website without editing any theme, plugin, or core WordPress files.

    The best part is that all your custom code is saved separately, so any WordPress updates won’t remove them.

    As a bonus, the WPCode plugin has an extensive library of pre-configured code snippets (including many on this list). You can deploy these code snippets with a few clicks.

    wpcode library

    Having said that, here is a list of items we will cover in this article. You can jump to one that interests you or simply follow along:

    How to Add These Code Snippets to Your Website

    Before we begin, let’s look at how to add the code snippets in this article to your WordPress functions file.

    1. Add Custom Code to Functions File Using WPCode (Recommended)

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

    Upon activation, go to Code Snippets » + Add Snippet page. You’ll see WPCode’s code library with many helpful custom code snippets already added.

    Add snippet

    If your code snippet does the same thing as of the snippets in the library, then you can try out the one already added there.

    Alternatively, click the ‘blank snippet’ link to continue adding your custom code snippet.

    On the next screen, provide a title for your custom code. This could be anything that helps you identify what this code snippet does.

    Adding your custom code

    Next, you need to choose the ‘Code Type’. If you are adding a code that works in the functions.php file, then you must select ‘PHP Snippet’.

    Below that, you need to copy and paste your custom code into the ‘Code Preview’ box.

    Finally, you need to set your snippet as ‘Active’ and click the ‘Save Snippet’ button.

    Activate and save

    Your saved snippet will now run like it would if you had added it to the functions.php file.

    You can repeat the process to add more snippets when needed. You can also deactivate a snippet without deleting it.

    2. Add Custom Code Directly to the Functions File

    The WPCode method is always better than adding code to the theme’s functions file.

    However, some users may be writing code for a client’s custom WordPress theme or simply prefer to add code to the functions.php file.

    In that case, here is how you can add code to your WordPress theme’s functions.php file.

    First, connect to your WordPress website using an FTP client. Once connected, navigate to the /wp-content/themes/your-wordpress-theme/ folder.

    Edit functions.php file

    There you will find the functions.php file. Simply right-click and select to edit or download the file to your computer for editing.

    You can edit it using any plain text editor like Notepad or TextEdit.

    Then, scroll down to the bottom of the functions.php file and paste your code snippet there. You can save your changes and upload the updated functions.php file to your theme folder.

    You can now visit your WordPress website to see your custom code in action.

    Now, let’s take a look at 42 different useful tricks for the WordPress functions file.

    1. Remove WordPress Version Number

    You should always use the latest version of WordPress. However, you may want to remove the WordPress version number from your site.

    Simply add this code snippet to your functions file or as a new WPCode snippet:

    function wpb_remove_version() {
    return '';
    }
    add_filter('the_generator', 'wpb_remove_version');
    

    For detailed instructions, see our guide on the right way to remove the WordPress version number.

    Want to white-label your WordPress admin area? Adding a custom dashboard logo is the first step in the process.

    First, you’ll need to upload your custom logo to your theme’s images folder as custom-logo.png. Your custom logo should be in a 1:1 ratio (a square image) in 16×16 pixels.

    After that, you can add this code to your theme’s functions file or as a new WPCode snippet:

    function wpb_custom_logo() {
    echo '
    <style type="text/css">
    #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
    background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/custom-logo.png) !important;
    background-position: 0 0;
    color:rgba(0, 0, 0, 0);
    }
    #wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
    background-position: 0 0;
    }
    </style>
    ';
    }
    //hook into the administrative header output
    add_action('wp_before_admin_bar_render', 'wpb_custom_logo');
    

    For more details, see our guide on how to add a custom dashboard logo in WordPress.

    3. Change the Footer in WordPress Admin Panel

    The footer in the WordPress admin area shows the message ‘Thank you for creating with WordPress.’ You can change it to anything you want by adding this code:

    function remove_footer_admin () {
    
    echo 'Fueled by <a href="http://www.wordpress.org" target="_blank">WordPress</a> | WordPress Tutorials: <a href="https://www.wpbeginner.com" target="_blank">WPBeginner</a></p>';
    
    }
    
    add_filter('admin_footer_text', 'remove_footer_admin');
    

    Feel free to change the text and links that you want to add. Here is how it looks on our test site.

    Admin footer

    4. Add Custom Dashboard Widgets in WordPress

    You probably have seen the widgets that many plugins and themes add to the WordPress dashboard. You can add one yourself by pasting the following code:

    add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
    
    function my_custom_dashboard_widgets() {
    global $wp_meta_boxes;
    
    wp_add_dashboard_widget('custom_help_widget', 'Theme Support', 'custom_dashboard_help');
    }
    
    function custom_dashboard_help() {
    echo '<p>Welcome to Custom Blog Theme! Need help? Contact the developer <a href="mailto:yourusername@gmail.com">here</a>. For WordPress Tutorials visit: <a href="https://www.wpbeginner.com" target="_blank">WPBeginner</a></p>';
    }
    

    This is what it would look like:

    Custom dashboard widget

    For details, see our tutorial on how to add custom dashboard widgets in WordPress.

    5. Change the Default Gravatar in WordPress

    Have you seen the default mystery man avatar on blogs? You can easily replace it with your own branded custom avatar.

    Simply upload the image you want to use as the default avatar and add this code to your functions file or the WPCode plugin:

    function wpb_custom_default_gravatar( $avatar_defaults ) {
    	$myavatar = 'https://example.com/wp-content/uploads/2022/10/dummygravatar.png';
    	$avatar_defaults[$myavatar] = 'Default Gravatar';
    	return $avatar_defaults;
    }
    add_filter( 'avatar_defaults', 'wpb_custom_default_gravatar' );
    

    Now you can head to the Settings » Discussion page and select your default avatar.

    Custom default gravatar

    For detailed instructions, see our guide on changing the default gravatar in WordPress.

    6. Dynamic Copyright Date in WordPress Footer

    You can simply add a copyright date by editing the footer template in your theme. However, it will not show when your site started, and it will not automatically change the following year.

    This code can add a dynamic copyright date in the WordPress footer:

    function wpb_copyright() {
    global $wpdb;
    $copyright_dates = $wpdb->get_results("
    SELECT
    YEAR(min(post_date_gmt)) AS firstdate,
    YEAR(max(post_date_gmt)) AS lastdate
    FROM
    $wpdb->posts
    WHERE
    post_status = 'publish'
    ");
    $output = '';
    if($copyright_dates) {
    $copyright = "© " . $copyright_dates[0]->firstdate;
    if($copyright_dates[0]->firstdate != $copyright_dates[0]->lastdate) {
    $copyright .= '-' . $copyright_dates[0]->lastdate;
    }
    $output = $copyright;
    }
    return $output;
    }
    

    After adding this function, you’ll need to open your footer.php file and add the following code where you would like to display the dynamic copyright date:

    <?php echo wpb_copyright(); ?>
    

    This function looks for the date of your first post and the date of your last post. It then returns the years wherever you call the function.

    Tip: If you are using the WPCode plugin, then you can combine the two code snippets. After that, choose the ‘Site Wide Footer’ location in the ‘Insertion’ section of the snippet settings. This will automatically display the copyright date in the footer without editing your theme’s footer.php file.

    Add to footer using WPCode

    For more details, see our guide on how to add dynamic copyright dates in WordPress.

    7. Randomly Change the Background Color in WordPress

    Do you want to randomly change the background color on your WordPress blog for each visit and page reload? Here is how to easily do this.

    First, add this code to your theme’s functions file or the WPCode plugin:

    function wpb_bg() {
    $rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
    $color ='#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].
    $rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];
    
    echo $color; 
    } 
    

    Next, you’ll need to edit the header.php file in your theme. Find the <body> tag and add replace it with this line:

    <body <?php body_class(); ?> style="background-color:<?php wpb_bg();?>">
    

    You can now save your changes and visit your website to see this code in action.

    Random background colors

    For more details and alternate methods, see our tutorial on randomly changing the background color in WordPress.

    8. Update WordPress URLs

    If your WordPress login page keeps refreshing or you cannot access the admin area, then you need to update WordPress URLs.

    One way to do this is by using the wp-config.php file. However, if you do that, then you cannot set the correct address on the settings page. The WordPress URL and Site URL fields will be locked and uneditable.

    Instead, just add this code to your functions file to fix this:

    update_option( 'siteurl', 'https://example.com' );
    update_option( 'home', 'https://example.com' );
    

    Don’t forget to replace example.com with your domain name.

    Once logged in, you can go to the Settings page in the WordPress admin area and set the URLs.

    After that, you should remove the code you added to the functions file or WPCode. Otherwise, it will keep updating those URLs whenever your site is accessed.

    9. Add Additional Image Sizes in WordPress

    WordPress automatically generates several image sizes when you upload an image. You can also create additional image sizes to use in your theme.

    Simply add this code to your theme’s functions file or as a WPCode snippet:

    add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
    add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
    add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode
    

    This code creates three new image sizes of different sizes. Feel free to tweak the code to meet your requirements.

    You can then display an image size anywhere in your theme using this code:

    <?php the_post_thumbnail( 'homepage-thumb' ); ?>
    

    For detailed instructions, see our guide on creating additional image sizes in WordPress.

    10. Add New Navigation Menus to Your Theme

    WordPress allows theme developers to define navigation menus and then display them.

    You can add this code to your theme’s functions file or as a new WPCode snippet to define a new menu location in your theme:

    function wpb_custom_new_menu() {
      register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
    }
    add_action( 'init', 'wpb_custom_new_menu' );
    

    You can now go to Appearance » Menus in your WordPress dashboard and see ‘My Custom Menu’ as the theme location option.

    Custom menu location

    Note: This code will also work with block themes with the full site editing feature. Adding it will enable the Menus screen under Appearance.

    Now you need to add this code to your theme where you want to display the navigation menu:

     <?php
    wp_nav_menu( array( 
        'theme_location' => 'my-custom-menu', 
        'container_class' => 'custom-menu-class' ) ); 
    ?>
    

    For detailed instructions, see our guide on how to add custom navigation menus in WordPress themes.

    11. Add Author Profile Fields

    Do you want to add extra fields to your author profiles in WordPress? You can easily do that by adding this code to your functions file or as a new WPCode snippet:

    function wpb_new_contactmethods( $contactmethods ) {
    // Add Twitter
    $contactmethods['twitter'] = 'Twitter';
    //add Facebook
    $contactmethods['facebook'] = 'Facebook';
    
    return $contactmethods;
    }
    add_filter('user_contactmethods','wpb_new_contactmethods',10,1);
    

    This code will add Twitter and Facebook fields to user profiles in WordPress.

    New profile fields

    You can now display these fields in your author template like this:

    <?php echo get_the_author_meta('twitter') ?>
    

    You may also want to see our guide on adding additional user profile fields in WordPress registration.

    12. Adding Widget-Ready Areas or Sidebars in WordPress Themes

    This is one of the most used code snippets, and many developers already know about adding widget-ready areas or sidebars to WordPress themes. But it deserves to be on this list for those people who don’t know.

    You can paste the following code in your functions.php file or as a new WPCode snippet:

    // Register Sidebars
    function custom_sidebars() {
    
    	$args = array(
    		'id'            => 'custom_sidebar',
    		'name'          => __( 'Custom Widget Area', 'text_domain' ),
    		'description'   => __( 'A custom widget area', 'text_domain' ),
    		'before_title'  => '<h3 class="widget-title">',
    		'after_title'   => '</h3>',
    		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    		'after_widget'  => '</aside>',
    	);
    	register_sidebar( $args );
    
    }
    add_action( 'widgets_init', 'custom_sidebars' );
    

    Note: This code will also work with block themes with the full site editing feature. Adding it will enable the Widgets screen under Appearance.

    You can now visit the Appearance » Widgets page and see your new custom widget area.

    Custom widget area

    To display this sidebar or widget-ready area on your website, you’ll need to add the following code in the template where you want to display it:

    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('custom_sidebar') ) : ?>
    <!–Default sidebar info goes here–>
    <?php endif; ?>
    

    For more details, see our guide on how to add dynamic widget-ready areas and sidebars in WordPress.

    13. Manipulate the RSS Feed Footer

    Have you seen blogs that add their advertisements in their RSS feeds below each post? You can accomplish this easily with a simple function. Just paste the following code:

    function wpbeginner_postrss($content) {
    if(is_feed()){
    $content = 'This post was written by Syed Balkhi '.$content.'Check out WPBeginner';
    }
    return $content;
    }
    add_filter('the_excerpt_rss', 'wpbeginner_postrss');
    add_filter('the_content', 'wpbeginner_postrss');
    

    For more information, see our guide on how to add content and completely manipulate your RSS feeds.

    14. Add Featured Images to RSS Feeds

    The post thumbnail or featured images are usually only displayed within your site design. You can easily extend that functionality to your RSS feed with the following code:

    function rss_post_thumbnail($content) {
    global $post;
    if(has_post_thumbnail($post->ID)) {
    $content = '<p>' . get_the_post_thumbnail($post->ID) .
    '</p>' . get_the_content();
    }
    return $content;
    }
    add_filter('the_excerpt_rss', 'rss_post_thumbnail');
    add_filter('the_content_feed', 'rss_post_thumbnail');
    

    For more details, see our guide on how to add post thumbnails to your WordPress RSS feed.

    15. Hide Login Errors in WordPress

    Hackers can use login errors to guess whether they entered the wrong username or password. By hiding login errors in WordPress, you can make your login area and WordPress website more secure.

    Simply add the following code to your theme’s functions file or as a new WPCode snippet:

    function no_wordpress_errors(){
      return 'Something is wrong!';
    }
    add_filter( 'login_errors', 'no_wordpress_errors' );
    

    Now, users will see a generic message when they enter an incorrect username or password.

    Custom login errors

    For more information, see our tutorial on disabling login hints in WordPress error messages.

    16. Disable Login by Email in WordPress

    WordPress allows users to log in with their username or email address. You can easily disable login by email in WordPress by adding this code to your functions file or as a new WPCode snippet:

    remove_filter( 'authenticate', 'wp_authenticate_email_password', 20 );
    

    For more information, see our guide on how to disable login by email feature in WordPress.

    17. Disable Search Feature in WordPress

    If you want to disable your WordPress site’s search feature, simply add this code to your functions file or in a new WPCode snippet:

    function wpb_filter_query( $query, $error = true ) {
    if ( is_search() ) {
    $query->is_search = false;
    $query->query_vars[s] = false;
    $query->query[s] = false;
    if ( $error == true )
    $query->is_404 = true;
    }}
    

    This code simply disables the search query by modifying it and returning a 404 error instead of search results.

    For more information, see our tutorial on disabling the WordPress search feature.

    Pro Tip: Instead of giving up on WordPress search, we recommend trying out SearchWP. It is the best WordPress search plugin on the market that allows you to add a powerful and customizable search feature to your website.

    18. Delay Posts in RSS Feed

    Sometimes you may publish an article with a grammatical error or spelling mistake.

    The mistake goes live and is distributed to your RSS feed subscribers. If you have email subscriptions on your WordPress blog, then those subscribers will also get a notification.

    Simply add this code to your theme’s functions file or as a new WPCode snippet to delay posts in your RSS feed:

    function publish_later_on_feed($where) {
    
    	global $wpdb;
    
    	if ( is_feed() ) {
    		// timestamp in WP-format
    		$now = gmdate('Y-m-d H:i:s');
    
    		// value for wait; + device
    		$wait = '10'; // integer
    
    		// http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_timestampdiff
    		$device = 'MINUTE'; //MINUTE, HOUR, DAY, WEEK, MONTH, YEAR
    
    		// add SQL-sytax to default $where
    		$where .= " AND TIMESTAMPDIFF($device, $wpdb->posts.post_date_gmt, '$now') > $wait ";
    	}
    	return $where;
    }
    
    add_filter('posts_where', 'publish_later_on_feed');
    

    In this code, we used 10 minutes as $wait or delay time. Feel free to change this to any number of minutes you want.

    For a plugin method and more information, see our detailed guide on how to delay posts from appearing in the WordPress RSS feed.

    19. Change Read More Text for Excerpts in WordPress

    Do you want to change the text that appears after the excerpt in your posts? Simply add this code to your theme’s functions file or as a new WPCode snippet:

    function modify_read_more_link() {
        return '<a class="more-link" href="' . get_permalink() . '">Your Read More Link Text</a>';
    }
    add_filter( 'the_content_more_link', 'modify_read_more_link' );
    

    20. Disable RSS Feeds in WordPress

    Not all websites need RSS feeds. If you want to disable RSS feeds on your WordPress site, then add this code to your theme’s functions file or as a new WPCode snippet:

    function new_excerpt_more($more) {
     global $post;
     return '<a class="moretag" 
     href="'. get_permalink($post->ID) . '">Your Read More Link Text</a>';
    }
    add_filter('excerpt_more', 'new_excerpt_more');
    

    For a plugin method and more information, see our guide on how to disable RSS feeds in WordPress.

    21. Change Excerpt Length in WordPress

    WordPress limits excerpt lengths to 55 words. You can add this code to your functions file or as a new WPCode snippet if you need to change that:

    function new_excerpt_length($length) {
    return 100;
    }
    add_filter('excerpt_length', 'new_excerpt_length');
    

    Just change 100 to the number of words you want to show in the excerpts.

    For alternate methods, you may want to look at our guide on how to customize WordPress excerpts (no coding required).

    22. Add an Admin User in WordPress

    If you have forgotten your WordPress password and email, then you can add an admin user by adding this code to your theme’s functions file using an FTP client:

    function wpb_admin_account(){
    $user = 'Username';
    $pass = 'Password';
    $email = 'email@domain.com';
    if ( !username_exists( $user )  && !email_exists( $email ) ) {
    $user_id = wp_create_user( $user, $pass, $email );
    $user = new WP_User( $user_id );
    $user->set_role( 'administrator' );
    } }
    add_action('init','wpb_admin_account');
    

    Don’t forget to fill in the username, password, and email fields.

    Important: Once you log in to your WordPress site, don’t forget to delete the code from your functions file.

    For more on this topic, take a look at our tutorial on how to add an admin user in WordPress using FTP.

    23. Disable Language Switcher on Login Page

    If you run a multilingual website, then WordPress displays a language selector on the login page. You can easily disable it by adding the following code to your functions.php file or as a new WPCode snippet:

    add_filter( 'login_display_language_dropdown', '__return_false' );
    

    24. Show the Total Number of Registered Users in WordPress

    Do you want to show the total number of registered users on your WordPress site? Simply add this code to your theme’s functions file or as a new WPCode snippet:

    function wpb_user_count() {
    $usercount = count_users();
    $result = $usercount['total_users'];
    return $result;
    }
    // Creating a shortcode to display user count
    add_shortcode('user_count', 'wpb_user_count');
    

    This code creates a shortcode that allows you to display the total number of registered users on your site.

    Now you just need to add the shortcode [user_count] to your post or page where you want to show the total number of users.

    For more information and a plugin method, see our tutorial on how to display the total number of registered users in WordPress.

    25. Exclude Specific Categories From RSS Feed

    Do you want to exclude specific categories from your WordPress RSS feed? You can add this code to your theme’s functions file or as a new WPCode snippet:

    function exclude_category($query) {
    	if ( $query->is_feed ) {
    		$query->set('cat', '-5, -2, -3');
    	}
    return $query;
    }
    add_filter('pre_get_posts', 'exclude_category');
    

    26. Disable URL Links in WordPress Comments

    By default, WordPress converts a URL into a clickable link in comments.

    You can stop this by adding the following code to your functions file or as a new WPCode snippet:

    remove_filter( 'comment_text', 'make_clickable', 9 );
    

    For details, see our article on how to disable autolinking in WordPress comments.

    27. Add Odd and Even CSS Classes to WordPress Posts

    You may have seen WordPress themes using an odd or even class for WordPress comments. It helps users visualize where one comment ends and the next one begins.

    You can use the same technique for your WordPress posts. It looks aesthetically pleasing and helps users quickly scan pages with lots of content.

    Simply add this code to your theme’s functions file:

    function oddeven_post_class ( $classes ) {
       global $current_class;
       $classes[] = $current_class;
       $current_class = ($current_class == 'odd') ? 'even' : 'odd';
       return $classes;
    }
    add_filter ( 'post_class' , 'oddeven_post_class' );
    global $current_class;
    $current_class = 'odd';
    

    This code simply adds an odd or even class to WordPress posts. You can now add custom CSS to style them differently.

    Here is some sample code to help you get started:

    .even {
    background:#f0f8ff;
    }
    .odd {
     background:#f4f4fb;
    }
    

    The end result will look something like this:

    Alternating background colors

    Need more detailed instructions? Take a look at our tutorial on how to add odd/even classes to your posts in WordPress themes.

    28. Add Additional File Types to Be Uploaded in WordPress

    By default, WordPress allows you to upload a limited number of the most commonly used file types. However, you can extend it to allow other file types.

    Just add this code to your theme’s functions file:

    function my_myme_types($mime_types){
        $mime_types['svg'] = 'image/svg+xml'; //Adding svg extension
        $mime_types['psd'] = 'image/vnd.adobe.photoshop'; //Adding photoshop files
        return $mime_types;
    }
    add_filter('upload_mimes', 'my_myme_types', 1, 1);
    

    This code allows you to upload SVG and PSD files to WordPress.

    You will need to find the mime types for the file types you want to allow and then use them in the code.

    For more on this topic, check out our tutorial on how to add additional file types to be uploaded in WordPress.

    WordPress uses a non-existent email address (wordpress@yourdomain.com) to send outgoing emails by default.

    This email address could be flagged as spam by email service providers.

    Using the WP Mail SMTP plugin is the proper way to fix this.

    WP Mail SMTP

    It fixes email deliverability issues and allows you to choose an actual email address to send your WordPress emails.

    To learn more, see our guide on how to fix WordPress not sending email issue.

    On the other hand, if you want to quickly change this to a real email address, then you can add the following code in your functions file or as a new WPCode snippet:

    // Function to change email address
    function wpb_sender_email( $original_email_address ) {
        return 'tim.smith@example.com';
    }
     
    // Function to change sender name
    function wpb_sender_name( $original_email_from ) {
        return 'Tim Smith';
    }
     
    // Hooking up our functions to WordPress filters 
    add_filter( 'wp_mail_from', 'wpb_sender_email' );
    add_filter( 'wp_mail_from_name', 'wpb_sender_name' );
    

    Don’t forget to replace the email address and name with your own information.

    The problem with this method is that WordPress is still using the mail() function to send emails, and such emails are most likely to end up in spam.

    For better alternatives, see our tutorial on how to change the sender name in outgoing WordPress emails.

    30. Add an Author Info Box in WordPress Posts

    If you run a multi-author site and want to showcase author bios at the end of your posts, then you can try this method.

    Start by adding this code to your functions file or as a new WPCode snippet:

    function wpb_author_info_box( $content ) {
    
    global $post;
    
    // Detect if it is a single post with a post author
    if ( is_single() && isset( $post->post_author ) ) {
    
    // Get author's display name
    $display_name = get_the_author_meta( 'display_name', $post->post_author );
    
    // If display name is not available then use nickname as display name
    if ( empty( $display_name ) )
    $display_name = get_the_author_meta( 'nickname', $post->post_author );
    
    // Get author's biographical information or description
    $user_description = get_the_author_meta( 'user_description', $post->post_author );
    
    // Get author's website URL
    $user_website = get_the_author_meta('url', $post->post_author);
    
    // Get link to the author archive page
    $user_posts = get_author_posts_url( get_the_author_meta( 'ID' , $post->post_author));
    	
    // Get User Gravatar
    $user_gravatar =  get_avatar( get_the_author_meta( 'ID' , $post->post_author) , 90 );
    
    if ( ! empty( $display_name ) )
    
    $author_details = '<p class="author_name">About ' . $display_name . '</p>';
    
    if ( ! empty( $user_description ) )
    // Author avatar and bio will be displayed if author has filled in description. 
    
    $author_details .= '<p class="author_details">' . $user_gravatar . nl2br( $user_description ). '</p>';
    
    $author_details .= '<p class="author_links"><a href="'. $user_posts .'">View all posts by ' . $display_name . '</a>';  
    
    // Check if author has a website in their profile
    if ( ! empty( $user_website ) ) {
    
    // Display author website link
    $author_details .= ' | <a href="' . $user_website .'" target="_blank" rel="nofollow noopener">Website</a></p>';
    
    } else {
    // if there is no author website then just close the paragraph
    $author_details .= '</p>';
    }
    
    // Pass all this info to post content
    $content = $content . '<footer class="author_bio_section" >' . $author_details . '</footer>';
    }
    return $content;
    }
    
    // Add our function to the post content filter
    add_action( 'the_content', 'wpb_author_info_box' );
    
    // Allow HTML in author bio section
    remove_filter('pre_user_description', 'wp_filter_kses');
    

    Next, you will need to add some custom CSS to make it look better.

    You can use this sample CSS as a starting point:

    .author_bio_section{
    background: none repeat scroll 0 0 #F5F5F5;
    padding: 15px;
    border: 1px solid #ccc;
    }
    
    .author_name{
    font-size:16px;
    font-weight: bold;
    }
    
    .author_details img {
    border: 1px solid #D8D8D8;
    border-radius: 50%;
    float: left;
    margin: 0 10px 10px 0;
    }
    

    This is how your author box will look like:

    Author bio box

    For a plugin method and more detailed instructions, check out our article on how to add an author info box in WordPress posts.

    31. Disable XML-RPC in WordPress

    XML-RPC is a method that allows third-party apps to communicate with your WordPress site remotely. This could cause security issues and can be exploited by hackers.

    To turn off XML-RPC in WordPress, add the following code to your functions file or as a new WPCode snippet:

    add_filter('xmlrpc_enabled', '__return_false');
    

    You may want to read our article on how to disable XML-RPC in WordPress for more information.

    32. Automatically Link Featured Images to Posts

    If your WordPress theme does not automatically link featured images to full articles, then you can try this method.

    Simply add this code to your theme’s functions file or as a new WPCode snippet:

    function wpb_autolink_featured_images( $html, $post_id, $post_image_id ) {
    
    If (! is_singular()) { 
    
    $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
    return $html;
    
    } else { 
    
    return $html;
    
    }
    
    }
    add_filter( 'post_thumbnail_html', 'wpb_autolink_featured_images', 10, 3 );
    

    You may want to read our article on how to automatically link featured images to posts in WordPress.

    33. Disable Block Editor in WordPress

    WordPress uses a modern and intuitive editor for writing content and editing your website. This editor uses blocks for commonly-used content and layout elements, which is why it’s called the Block Editor.

    However, you may need to use the older Classic Editor in some use cases.

    The easiest way to disable the block editor is by using the Classic Editor plugin. However, if you don’t want to use a separate plugin, then just add the following code to your functions file or as a new WPCode snippet:

    add_filter('gutenberg_can_edit_post', '__return_false', 5);
    add_filter('use_block_editor_for_post', '__return_false', 5);
    

    For more details, see our tutorial on how to disable the Block Editor and use the Classic Editor.

    34. Disable Block Widgets in WordPress

    WordPress switched from classic widgets to block widgets in WordPress 5.8. The new block widgets are easier to use and give you more design control than classic widgets.

    However, some users may still want to use classic widgets. In that case, you can use the following code in your theme’s functions file or as a new WPCode snippet:

    add_filter( 'use_widgets_block_editor', '__return_false' );
    

    For more details, see our article on how to disable widget blocks (restore classic widgets).

    35. Display the Last Updated Date in WordPress

    When visitors view a post or page on your WordPress blog, your WordPress theme will show the date the post was published. This is fine for most blogs and static websites.

    However, WordPress is also used by websites where old articles are regularly updated. In these publications, displaying the date and time the post was last modified is essential.

    Last updated date

    You can show the last updated date using the following code in your theme’s functions file or as a new WPCode snippet:

    $u_time          = get_the_time( 'U' );
    $u_modified_time = get_the_modified_time( 'U' );
    // Only display modified date if 24hrs have passed since the post was published.
    if ( $u_modified_time >= $u_time + 86400 ) {
    
    	$updated_date = get_the_modified_time( 'F jS, Y' );
    	$updated_time = get_the_modified_time( 'h:i a' );
    
    	$updated = '<p class="last-updated">';
    
    	$updated .= sprintf(
    	// Translators: Placeholders get replaced with the date and time when the post was modified.
    		esc_html__( 'Last updated on %1$s at %2$s' ),
    		$updated_date,
    		$updated_time
    	);
    	$updated .= '</p>';
    
    	echo wp_kses_post( $updated );
    }
    

    For alternate methods and more details, see our guide on how to display the last updated date in WordPress.

    36. Use Lowercase Filenames for Uploads

    If you run a multi-author website, then authors may upload images with filenames in upper and lowercase.

    Adding the following code ensures that all filenames are in lowercase:

    add_filter( 'sanitize_file_name', 'mb_strtolower' );
    

    Note: The code will not change filenames for existing uploads. For alternate methods, see our tutorial on how to rename images and media files in WordPress.

    37. Disable WordPress Admin Bar on Frontend

    By default, WordPress displays the admin bar at the top when a logged-in user views your website.

    You can disable the admin bar for all users except site administrators. Simply add the following code to your functions file or as a new WPCode snippet:

    /* Disable WordPress Admin Bar for all users */
    add_filter( 'show_admin_bar', '__return_false' );
    

    For more details, see our guide on how to disable the WordPress admin bar for all users except administrators.

    38. Change Howdy Admin Text in Admin Area

    WordPress displays a ‘Howdy Admin’ greeting in the WordPress dashboard. ‘Admin’ is replaced by the logged-in user’s name.

    Howdy greeting

    You can change the default greeting to your own by adding the following code in your functions file or as a new WPCode snippet:

    function wpcode_snippet_replace_howdy( $wp_admin_bar ) {
    
    	// Edit the line below to set what you want the admin bar to display intead of "Howdy,".
    	$new_howdy = 'Welcome,';
    
    	$my_account = $wp_admin_bar->get_node( 'my-account' );
    	$wp_admin_bar->add_node(
    		array(
    			'id'    => 'my-account',
    			'title' => str_replace( 'Howdy,', $new_howdy, $my_account->title ),
    		)
    	);
    }
    
    add_filter( 'admin_bar_menu', 'wpcode_snippet_replace_howdy', 25 );
    

    For more details, see our article on changing the ‘Howdy Admin’ message in WordPress.

    39. Disable Code Editing in Block Editor

    The block editor allows you to switch to the Code Editor. This comes in handy if you need to add some HTML code manually.

    However, you may want to keep this feature limited to site administrators.

    You can add the following code to your functions file or as a WPCode snippet to achieve this:

    add_filter( 'block_editor_settings_all', function ( $settings ) {
    	
    	$settings['codeEditingEnabled'] = current_user_can( 'manage_options' );
    
    	return $settings;
    } );
    

    40. Disable Plugin / Theme File Editor

    WordPress comes with a built-in editor where you can edit plugin files. You can see it by going to the Plugins » Plugin File Editor page.

    Plugin file editor in WordPress

    Similarly, WordPress also includes a file editor for classic themes at Appearance » Theme File Editor.

    Note: If you use a block theme, then the theme file editor is not visible.

    Theme file editor

    We don’t recommend using these editors for making changes to your theme or plugin. A tiny mistake in code can make your website inaccessible to all users.

    To disable the plugin/theme editor, add the following code to your functions file or as a WPCode snippet:

    // Disable the Plugin and Theme Editor
    if ( ! defined( 'DISALLOW_FILE_EDIT' ) ) {
    	define( 'DISALLOW_FILE_EDIT', true );
    }
    

    For more details, see our tutorial on how to disable the plugin/theme editor in WordPress.

    41. Disable New User Notification Emails

    By default, WordPress sends an email notification when a new user joins your WordPress website.

    If you run a WordPress membership website or require users to signup, then you will get a notification each time a user joins your website.

    To turn off these notifications, you can add the following to your functions file or as a new WPCode snippet:

    function wpcode_send_new_user_notifications( $user_id, $notify = 'user' ) {
    	if ( empty( $notify ) || 'admin' === $notify ) {
    		return;
    	} elseif ( 'both' === $notify ) {
    		// Send new users the email but not the admin.
    		$notify = 'user';
    	}
    	wp_send_new_user_notifications( $user_id, $notify );
    }
    
    add_action(
    	'init',
    	function () {
    		// Disable default email notifications.
    		remove_action( 'register_new_user', 'wp_send_new_user_notifications' );
    		remove_action( 'edit_user_created_user', 'wp_send_new_user_notifications' );
    
    		// Replace with custom function that only sends to user.
    		add_action( 'register_new_user', 'wpcode_send_new_user_notifications' );
    		add_action( 'edit_user_created_user', 'wpcode_send_new_user_notifications', 10, 2 );
    	}
    );
    

    For more details, see our tutorial on how to disable new user email notifications in WordPress.

    42. Disable Automatic Update Email Notifications

    Occasionally, WordPress may automatically install security and maintenance updates or update a plugin with a critical vulnerability.

    It sends an automatic update email notification after each update. If you manage multiple WordPress websites, then you may get several such emails.

    You can add this code to your functions file or as a new WPCode snippet to turn off these email notifications:

    / Disable auto-update emails.
    add_filter( 'auto_core_update_send_email', '__return_false' );
    
    // Disable auto-update emails for plugins.
    add_filter( 'auto_plugin_update_send_email', '__return_false' );
    
    // Disable auto-update emails for themes.
    add_filter( 'auto_theme_update_send_email', '__return_false' );
    

    To learn more, see our article on how to disable automatic update emails in WordPress.

    We hope this article helped you learn some new useful tricks for the functions.php file in WordPress. You may also want to see our ultimate guide to boost WordPress speed and performance and our expert picks for the best code editors for Mac and Windows.

    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 42 Extremely Useful Tricks for the WordPress Functions File first appeared on WPBeginner.

    Go to source

  • How to Add Stripe QR Code Payment in WordPress

    Are you looking for a way to add a QR code for Stripe payments on your WordPress website?

    QR codes, or Quick Response Codes, are a type of barcode that users can scan using their mobile phones. You can show a Stripe payment form using QR codes and help customers easily purchase a product or service.

    In this article, we will show you how to add Stripe QR code payment in WordPress.

    How to add Stripe payment QR code payment in WordPress

    Why Add Stripe QR Code Payment in WordPress?

    Stripe is a popular payment gateway that lets you accept online payments on your WordPress site or eCommerce store. It makes it very easy for customers to pay using their credit cards.

    The best part is that customers don’t have to go through a lengthy signup process. They can simply enter their credit card on the website to make a purchase.

    Adding Stripe QR code payments to your site gives customers the flexibility to complete a purchase quickly. Customers can simply scan the code to open the payment link.

    This makes the checkout process very simple and fast. It helps people to easily buy a product and service on your online store. As a result, you’ll see a boost in conversions and reduced cart abandonments.

    That said, let’s look at how you can add a Stripe QR code payment to your WordPress website.

    Create a Stripe Payment Form in WordPress

    First, you’ll need to add a Stripe payment form on your website to accept online payments from customers.

    The best way to do that is using WPForms. It is the best contact form plugin for WordPress that’s super easy to use and easily integrates with Stripe. There are many form templates to choose from, and you can customize them using the drag-and-drop builder.

    For this tutorial, you’ll need the WPForms Pro license because it includes the Stripe addon. There’s also a WPForms Lite version that you can use for free. It allows you to accept Stripe payments, but there’s a 3% transaction fee for payments made through your forms.

    To start, you’ll need to download and install the WPForms plugin. If you need help, then please see our guide on how to install a WordPress plugin.

    Upon activation, you can go to WPForms » Settings from your WordPress dashboard and enter the license key. You can find the key in your account area on the WPForms website.

    Adding a license key to the WPForms form builder plugin

    Simply enter the key and click the ‘Verify Key’ button.

    Once that’s done, you’ll need to go to the WPForms » Addons page and install the Stripe addon.

    Installing the Stripe addon

    Go ahead and click the ‘Install Addon’ button, and WPForms will automatically install and activate it.

    From here, you can head to WPForms » Settings from the WordPress admin panel and go to the ‘ Payments’ tab.

    Next, simply click the ‘Connect with Stripe’ button and follow the onscreen instructions to connect your account with WPForms.

    Click the connect with Stripe button

    Once Stripe is connected, you can go to WPForms » Add New to create a new form.

    WPForms offers lots of form templates to choose from. You can select a simple contact form, an order form, or a Stripe payment form and customize it.

    Stripe payment form

    For this tutorial, we will use the ‘Stripe Payment Form’ template.

    Next, you can customize your form using the drag-and-drop form builder. By default, you’ll see different form fields in the template.

    However, WPForms lets you add more form fields to the template, like a dropdown, checkboxes, email, phone, address, website, and more.

    Customize Stripe payment form

    You can also click any form field on the template to customize it further.

    For instance, we changed the text for each item on your demo form and enabled the option to show prices after the item label.

    Customize form field in stripe payment form

    Once you’re done editing the form, simply switch to the ‘Payments’ tab and select ‘Stripe’ from the menu on the left.

    From here, ensure the ‘Enable Stripe payments’ option is enabled.

    Enable Stripe payments

    Next, you can switch to the Settings tab. Here, you’ll see options to change the notification and confirmation settings.

    For instance, you can select what action should take place once a user submits a form. WPForms lets you show a message or a page or even redirect users to a URL.

    Confirmation settings form

    You’re now ready to display your Stripe payment form on your website.

    Simply click the ‘Save’ button to store your changes and then click the ‘Embed’ button at the top.

    Save and embed your form

    Next, WPForms will show a popup where you can choose an existing page or create a new one to embed your form.

    We will choose the ‘Select Existing Page’ option for this tutorial.

    Embed a form in page

    Next, you’ll need to enter a name for your new page.

    Once that’s done, simply click the ‘Let’s Go’ button.

    Enter name for your new page

    After that, you’ll see a preview of your Stripe payment form in the WordPress content editor.

    You can go ahead and publish the page and visit the website to see it in action.

    Stripe payment form preview

    Now go ahead and copy the link of your payment form page, as you’ll need it to create a QR code.

    Alternative Method: You can also create a Stripe payment form using WP Simple Pay. It is the best Stripe payment plugin for WordPress and helps you collect online payments without setting up a shopping cart.

    WP Simple Pay is a more straightforward option compared to WPForms. It is perfect if you’re just looking to create a basic form to accept credit card payments.

    However, if you’re looking for more customization options and form templates, then we recommend using WPForms.

    For more details, you can see our detailed guide on how to accept payments with Stripe in WordPress.

    Add QR Code for Stripe Payments in WordPress

    Now that your Stripe payment form is ready, you can create a QR code for it and display it anywhere on your site.

    There are 2 ways you can add a QR code to your site. You can use the Google Chrome browser’s feature or use a WordPress plugin.

    1. Create QR Codes using Google Chrome

    If you’re using the Google Chrome browser, then you can use it to share a webpage via a QR code.

    First, you’ll need to open the Stripe payment form page in a new tab or window.

    Next, you can click the share icon in the top right corner of the site address bar. From here, simply select the ‘Create QR Code’ option.

    Click the share icon in chrome

    After that, Google Chrome will generate a QR code for your Stripe payment form page.

    You can go ahead and download the QR code as an image.

    Download the QR code

    Next, simply place the image anywhere on your site.

    For example, you can show the QR code on product pages, so customers can quickly scan them and open the form to make a purchase.

    Add QR code to product page

    2. Create a Stripe Payment QR Code using a WordPress Plugin

    You can also add QR codes to your site using a WordPress plugin like Shortcodes Ultimate. It is a free plugin that lets you create over 50 different types of shortcodes, including QR codes.

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

    Upon activation, you will see the Shortcode Ultimate welcome screen.

    Shortcode ultimate welcome screen

    Next, you’ll need to edit a page or post to add your QR code.

    Once you’re in the content editor, simply add a shortcode block.

    How to add a shortcode block to WordPress

    After that, you should see an ‘Insert shortcode’ option.

    You can simply click the double brackets icon to add your QR code.

    Click the select shortcode icon

    Next, the plugin will display different shortcode options for your site.

    Go ahead and select the ‘QR Code’ option.

    Select QR code shortcode

    After that, you’ll see options to enter details for your QR code.

    In the Data field, you can enter the URL of your Stripe payment form that you created earlier.

    Besides that, there is an option to enter a title for the code, which acts as an alt-text. You can also adjust the size of your QR code.

    Enter QR code details

    If you scroll down, then you’ll see more options to customize your QR code. For instance, you can change the primary color, background color, and more.

    Once you’re done, simply click the ‘Insert shortcode’ button.

    Click insert shortcode

    The plugin also lets you see a live preview of the code on your blog post or landing page.

    Go ahead and publish your page to see the Stripe payment form QR code in action.

    QR code live preview

    We hope this article helped you learn how to add Stripe QR code payment in WordPress. You may also want to see our guide on WooCommerce made simple and how to accept recurring payments 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 Add Stripe QR Code Payment in WordPress first appeared on WPBeginner.

    Go to source

  • How to Remove the Date From WordPress URLs

    Do you want to remove the date from your WordPress URLs?

    WordPress comes with an SEO-friendly URL structure. This includes several link formats, including one that adds dates to your WordPress post URLs.

    In this article, we will show you how to easily remove the date from your WordPress URLs.

    How to Remove the Date from WordPress URLs

    Why Dates Appear in WordPress URLs

    By default, WordPress uses a non-human-readable link structure for post and page URLs, which looks like this:

    https://example.com/?p=123

    This uses the post ID in the URL, which doesn’t look good and isn’t very meaningful.

    Luckily, the WordPress Settings » Permalinks page lets you easily change these default links to something more meaningful and SEO-friendly.

    WordPress Permalink Settings

    Some WordPress users choose the ‘Month and name’ or ‘Day and name’ options. These add date parameters to your WordPress URLs.

    ‘Day and name’ permalinks include the year, month, and day like this:

    https://example.com/2023/09/03/sample-post/

    ‘Month and name’ permalinks include the year and month:

    https://example.com/2023/09/sample-post/

    These URLs are better than the default ugly URLs, and they are SEO-friendly as well. However, they are unnecessarily long, and in time, the dates will make your articles look old.

    That’s why a lot of users prefer the ‘Post name’ URL structure instead. This removes the date and just uses the post slug keyword in the URL.

    ‘Post name’ permalinks don’t include any date information in the URL:

    https://example.com/sample-post/

    This URL structure is shorter, meaningful, SEO friendly, and won’t look dated.

    Considerations Before Removing the Date From WordPress URLs

    If you are starting a new WordPress blog and haven’t launched it yet, then it is safe to remove the date from WordPress URLs.

    However, if your website has been around for some time, then there are a few things you should keep in mind.

    Changing the URL structure may result in 404 errors for your users and search engines. This means you might see warnings and errors in your Google Search Console reports.

    Plus, your search engine rankings may be affected since backlinks to your old articles will also now lead to 404 errors.

    Both of these issues can be fixed by setting up redirects, and we will show you how to do that later in this article.

    Changing the URL structure will also reset your social share counts. Unfortunately, most social share count services do not track redirected URLs and will reset the counts.

    Removing the Date From WordPress URLs

    First, you need to create a complete WordPress backup of your website. This will allow you to restore your website to an earlier stage in case things don’t work out as you expected.

    After that, you need to visit the Settings » Permalinks page and choose ‘Post name’ as your permalink option.

    Post Name Permalink

    Don’t forget to click on the ‘Save Changes’ button at the bottom of the page to store your changes.

    WordPress will now remove the date from your WordPress URLs and only use the post name. It will do this both for your existing posts and pages and those you will add in the future.

    Setting Up Redirects to Preserve SEO Rankings

    Now that you have removed the date from your WordPress URLs, you will need to set up proper 301 redirects. As we said, this will stop your users from seeing 404 error messages when they follow an old link.

    These redirects will send users to the updated URLs without showing a 404 error. This will also help search engines understand that the old URLs have been moved to the new URLs.

    We will cover 2 methods you can use to create 301 redirects in WordPress:

    The best way to set up redirects is using the All in One SEO (AIOSEO) plugin. That’s because it includes a powerful Redirection Manager feature that lets you create bulk 301 redirects as well as automatic redirects, full site redirects, 404 error tracking, and more.

    Note: You will need AIOSEO Pro to use the redirection manager. There is also a free version of AIOSEO, but it doesn’t include 301 redirects.

    First, you need to install and configure the AIOSEO Pro plugin on your website. For more information, please refer to our step-by-step guide on how to set up All in One SEO correctly.

    Once the plugin is active, you will need to go to All in One SEO » Redirects in your WordPress dashboard and then click the ‘Activate Redirects’ button.

    Activate AIOSEO Redirects

    You’ll now see the ‘Redirects’ tab in All in One SEO, where you can add your first redirect.

    On this page, you will see settings where you can enter a ‘Source URL’ and ‘Target URL’.

    The source URL will describe the old URL permalink structure, and the target URL will describe the new post URL permalink you need to redirect to.

    All in One SEO Redirects Tab

    To do this, we will use regular expressions, which are also known as Regex. Regular expressions provide a powerful and flexible way to search and manipulate specific patterns of characters. We will use them to match the permalink pattern in the URLs we need to redirect.

    If you were previously using ‘Day and name’ permalinks, then you need to enter these Regex expressions into the source and target fields:

    • Source URL: ^/(\d*)/(\d*)/(\d*)/([A-Za-z0-9-*])
    • Target URL: /$4
    Redirecting Day and Name Permalinks in AIOSEO

    You will also need to click the cog icon next to the source URL to display three checkboxes. Make sure that only the ‘Regex’ box is checked. This option will enable regular expressions in the source and destination fields.

    However, if you were using ‘Month and name’ permalinks, then you will need to enter these Regex values instead:

    • Source URL: ^/(\d*)/(\d*)/([A-Za-z0-9-*])
    • Target URL: /$3
    Redirecting Month and Name Permalinks in AIOSEO

    Once you have added the source and target URL values, you should make sure that the Redirect Type is ‘301 Moved Permanently’ and then click the ‘Add Redirect’ button.

    Your redirect will be created. Now, if a user clicks on a link that uses your old permalink structure, then they will be automatically redirected to the correct post using the new name-based URL.

    You can see your redirect by scrolling down to the logs section. You can see how many website visitors have been redirected in the ‘Hits’ column, and you can enable or disable the redirect using the ‘Enabled’ toggle.

    AIOSEO Redirects Log

    Method 2: Setting Up Redirects Using Redirection (Free)

    You can choose our second method if you prefer to use a free plugin.

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

    Upon activation, you need to visit Tools » Redirection and click on the ‘Start Setup’ button.

    Start Redirections Setup

    The plugin will then show you a couple of options. It can automatically detect and alert you if a post’s URL is changed and keep a log of redirects.

    You can also leave both these options unchecked and simply click the ‘Continue’ button.

    Continue Redirections Setup

    The plugin will then run some tests, and if everything looks good, then you can click on the ‘Finish Setup’ button followed by the ‘Ready to begin!’ button. The plugin settings will be stored in the WordPress database.

    You will now see the plugin’s settings page. From here, you need to click on the ‘Add New’ button at the top of the page or simply scroll down to the ‘Add new redirection’ section.

    Redirections Settings Page

    You will see a form with ‘Source URL’ and ‘Target URL’ fields. The source URL will describe the old URL structure, and the target URL will describe the new URLs.

    If you were using the ‘Day and name’ permalinks, then you will enter the following values in the source and target fields:

    • Source URL: /(\d*)/(\d*)/(\d*)/([A-Za-z0-9-*])
    • Target URL: /$4
    Redirections Settings for Day and Name Permalinks

    If you were using ‘Month and name’ permalinks, then you will enter the following values:

    • Source URL: /(\d*)/(\d*)/([A-Za-z0-9-*])
    • Target URL: /$3
    Redirections Settings for Month and Name Permalinks

    Don’t forget to select ‘Regex’ from the drop-down menu before you click the ‘Add Redirect’ button to save your changes.

    The plugin will now redirect users to your new name-based URLs.

    We hope this article helped you learn how to easily remove the date from WordPress URLs. You may also want to see our guide on the most common WordPress errors and how to fix them, as well as our expert pick of the best WordPress SEO plugins.

    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 Remove the Date From WordPress URLs first appeared on WPBeginner.

    Go to source

  • Put Your Forms On The Map with New Forminator Geolocation Add-On

    Our formtastic team’s done it again! Forminator’s new Geolocation Add-on with Google Maps API integration lets you effortlessly gather geolocation data from your form submissions and provide address auto-completion for a smoother user experience.

    After releasing the highly anticipated PDF Generator Add-on, we’re proud to announce another powerful addition to our form-building plugin…Geolocation add-on!

    If your business needs to collect location information from users, Forminator Pro with Geolocation Add-on is the only form-building plugin you’ll need.

    In this post, we’ll look at:

    Key Benefits of Using Forminator’s Geolocation Add-on

    With Forminator’s Geolocation Add-on enabled, you can enhance forms on your site in the following ways:

    Accurate Location Detection

    Forminator can precisely pinpoint the user’s location by harnessing the device’s GPS or IP address.

    This information is seamlessly integrated into your forms, giving you real-time access to where your users are located.

    Moreover, the Geolocation feature includes a convenient address lookup function, allowing users to search for and select their location using postal addresses, city names, or zip codes.

    Forminator form submission
    See the user’s location in your form submissions.

    Interactive Map View

    One of the standout aspects of the Geolocation feature is its map view. Not only can users see their location on a map but also interact with it.

    Users have the option to manually input their location or select it directly from a map marker. This dynamic map view enhances user engagement and makes it easy for users to provide accurate location details.

    Customization Options

    Forminator’s Geolocation offers a range of customization options to suit your needs. You can configure the display of Google Maps next to your address field, choose whether to position the map above or below the address field, and even adjust the map’s size, ensuring a responsive or custom fit for various devices.

    Additionally, you have the flexibility to set a default map location based on specific latitude and longitude coordinates.

    Geolocation Map Customization
    You can easily customize your map’s geolocation options.

    Seamless Integration

    To utilize the Geolocation feature, simply enter your Google Maps API key in the Geolocation settings, ensuring a seamless and reliable experience for your users.

    Global Settings

    For ease of use across all your forms, you can enable Geolocation as a default setting on all address fields throughout your site. This simplifies the process of collecting location information from your users.

    Forminator Geolocation Settings
    Enable Geolocation as a default setting on all new forms.

    User-Friendly Configuration

    If you require users to provide location access before submitting a form, the “Require access to users’ location” option can be enabled. Additionally, you can customize the error message displayed if users choose not to provide location access.

    How To Use Forminator’s Geolocation Add-on

    To install and use the Geolocation Add-on, you’ll need to have Forminator Pro installed and activated on your site.

    Forminator Pro is included in all paid memberships, so if you’re not a WPMU DEV member yet, consider becoming one by choosing one of our risk-free membership plans.

    With Forminator Pro installed, go to the Add-Ons section of the plugin’s menu and click Install.

    Forminator Add-Ons screen: Geolocation Addon highlighted.
    Install Geolocation in the plugin’s Add-Ons screen.

    Once the plugin has been installed, click Configure.

    Formoinator Add-Ons - Geolocation - Configure button highlighted.
    You’ll need to configure the Add-On before you can use it.

    You’ll need to add a valid Google Maps API key to enable and set up geolocation on your forms. Refer to our Forminator Docs for instructions on obtaining this key if you need help with this step.

    Enter your key into the Google Maps API field, switch the toggle on to enable geolocation as the default option for all your new forms (optional), and click the Save button to continue.

    Configure Geolocation
    Enter your Google Maps API key.

    Once the API key has been validated and the configuration has been successfully saved, a confirmation message will display briefly on your screen letting you know that you’re all good to go.

    Note: You can access additional Geolocation configuration settings for individual forms (e.g. disabling geolocation or making it mandatory for users to provide their location details in order to submit a form) in the Forms > Edit Form > Settings section.

    Forminator Form Settings screen
    Configure additional Geolocation settings in the Form Settings section.

    With the addon configured, let’s go through an example of adding Geolocation field to a form.

    Adding Geolocation Fields To Forms

    In the Forms section, select a form or create a new form and select Edit > Fields.

    Forminator: Edit Form - Insert fields button.
    Click on the Insert fields button to add Geolocation to a form.

    Select the Address field and click the Insert Fields button.

    Forminator form fields selector
    Add an address field to your form.

    The Address field is highly customizable and includes a Geolocation tab with advanced options for configuring maps, such as:

    • Autocomplete: Provides real-time suggestions as users enter an address into the field.
    • Display address in Map: Displays a map next to the address fields
    • Map Position: Choose whether to display the map above or below (default) the address field.
    • Map Size: Set a responsive or custom size for your map.
    • Default Map Location: Set a default of custom location for your map.
    Forminator Address field settings - Geolocation options.
    Forminator Address field settings include advanced Geolocation options.

    Configure the above settings to suit your needs and to facilitate user interaction with your form maps and a great user experience.

    For example, enable autocomplete to display matching locations as users start typing and to fill in the address fields automatically when an address is selected from the options displayed.

    Forminator geolocation - autocomplete fields
    Enable autocomplete for a smoother and more interactive user experience with form maps.

    Once the browser loads the form page, it will prompt users to give access to their location. Allowing this access will then show the user’s current location on the map and auto complete the address fields.

    Forminator form with map
    Enabling autocomplete also prefills all address details on the form.

    By simply clicking on different points on the map, users can also change their location and update address fields.

    Clicking on different points on the map changes the address on the form fields.

    All form information including the user’s geolocation details and a map will also display on Forminator’s submission page.

    Forminator submission page with example of form submission.
    An example of a Forminator form submission showing a map with the user’s location and coordinates.

    It’s All About Geolocation, Geolocation, Geolocation

    Forminator’s new Geolocation feature empowers you to collect and leverage location information from your form users, gain valuable insights into your audience, whether they are customers, employees, or suppliers, and make more informed business decisions.

    Check out this feature in Forminator Pro and if you need any help, see our documentation or contact our expert 24/7 support team.

    Go to source