WordPress Customization - GreenGeeks https://www.greengeeks.com/tutorials/category/wordpress-customization/ How-to Website Tutorials Tue, 09 Aug 2022 14:26:58 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.3 How to Create a Custom WordPress Registration Form with RegistrationMagic https://www.greengeeks.com/tutorials/custom-wordpress-registration-form-registrationmagic/ https://www.greengeeks.com/tutorials/custom-wordpress-registration-form-registrationmagic/#respond Mon, 06 Sep 2021 14:00:00 +0000 https://www.greengeeks.com/tutorials/?p=45811 Do you need to build a custom registration form for WordPress? It’s important that customization forms are informative, easy to fill out, and support mobile […]

The post How to Create a Custom WordPress Registration Form with RegistrationMagic appeared first on GreenGeeks.

]]>
Do you need to build a custom registration form for WordPress? It’s important that customization forms are informative, easy to fill out, and support mobile devices. Luckily, this can all be achieved with the RegistrationMagic plugin.

To put it simply, this plugin allows you to build registration forms the way you want without any limitations. And the best part, most of the features are available for free, with more available in the premium version.

Today, I will demonstrate how to build a stylish WordPress registration form with ease.

What Is A WordPress Registration Form?

A registration form in WordPress allows users to input data and submit it to a website or company. The registration form can be for virtually any purpose with one of the most common uses being for account creation.

It is normal for one website to sometimes have over 10 registration forms that are for specific purposes. Larger companies can easily have over 100 if they offer a lot of services with unique forms.

For instance, here are a few things you might have a registration form for:

  • Job Application (Different Forms for Different Jobs)
  • Registration Forms for Services/Subscriptions
  • Registering for Two-Factor Authinication

The good news is none of this is hard to implement. Building a custom WordPress registration form with RegistrationMagic takes minutes.

How to Build A WordPress Registration Form with RegistrationMagic

Step 1: Install RegistrationMagic

The RegistrationMagic plugin is easy to use and extremely comprehensive. You can build any kind of form with it including forms that you can even accept payments through the forms you build, which is great for membership sites.

You can even create different forms for different user roles, WooCommerce, and much more. Let’s begin.

Click on Plugins and select the Add New option on the left-hand admin panel.

Search for RegistrationMagic in the available search box. This will pull up additional plugins that you may find helpful.

Scroll down until you find the  RegistrationMagic plugin and click on the “Install Now” button and activate the plugin for use.

Note: There is also a User Registration plugin by RegistrationMagic. This plugin has not been updated in some time, so be sure to avoid it.

Step 2: Global Settings

While you could immediately begin creating forms, I always recommend going through the settings first. The global settings for this plugin are vast, so I will try to give a quick overview of what you can expect for the more popular settings.

Note: Some of the features require the Premium version to access.

On the left-hand admin panel click on RegistrationMagic and select the Global Settings option.

There are twelve unique sections to go through, which would take us far too long to cover in their entirety. Let’s take a look at the popular ones.

Click on the General Settings Section.

Here, you can select if you want the form to match your theme’s design (recommended), or use the classic appearance. You can also select the layout of the form, allowed file types, and many other minor settings.

Choose the best options for your website and click on the “Save” button.

Click on the Security section.

In this section, you can set up reCAPTCHA on your forms to stop spam bots from submitting them. You can also limit the number of forms that are submitted from a single device, enable password rules (like one letter must be capital or it must include a number), and more.

Click on the “Save” button when you are done.

I strongly recommend going through each section. The plugin does an excellent job of explaining what each setting does, so there’s nothing overly difficult and you can change them at any time.

Step 3: Add A New Registration Form

With the settings in place, it’s time to get building.

Click on RegistrationMagic and select the All Forms option.

There are three default forms. They include a login, simple login, and a simple contact form. Each one has a shortcode, so feel free to see what they look like. You could actually use them as a template if you like.

Click on the New Form option.

A small pop-up will appear asking you to enter the name of your form. I recommend making it descriptive as it can be hard to figure out what’s what with a poor naming convention.

You can also use the checkbox below to turn off user registration within this form.

Click on the “Save” button to proceed.

The new form you created will be added to the list. If you hover your mouse over it, you will have two options. To go to the form dashboard or to edit the fields, click on the “Dashboard” button.

Step 4: Customize the Form

Here, you can find all of the settings for the form. These include options for building, configuration, integration, analytics, and more. In the Build section, click on the Fields Manager option.

You will see all of the fields in your form and by default, there should be three: Email, Username, and Password. You can rearrange them by placing your mouse over the three blue horizontal lines and dragging them up or down with the ones at the top appearing first.

At the bottom, you will notice a “Submit” button. This button actually isn’t clickable in this section. Instead, it is there to let you decide where its location will be in the form (left, middle, or right).

Pick the option that’s best for you.

You can also click on the Edit option next to them to edit the field.

Here, you can enter the label name, placeholder text, and even add hover text for additional information. There are also icon settings and advanced setting sections.

Some fields may have more options, but for the most part, all of them will look very similar to this.

You can add a new field by clicking on the Add Field option at the top.

A pop-up will appear with all of the preset field items, which there are a lot. Simply click on the field you want to add.

Note: You need to have WooCommerce installed to access the WooCommerce fields.

The field will be blank and ready for you to enter the information into. Simply repeat this to add the necessary fields to the form.

At this point, you can begin going through the other sections in the form dashboard.

Step 5: Display the Form

With the form ready to go, all that’s left is to display it and the plugin gives you a few options to choose from.

The first is the more traditional shortcode option. This is great if you were planning to build a custom WordPress registration page with RegistrationMagic.

The form could be the only piece of content on the page. The shortcode can either be found in the form section or by clicking on the Shortcode option in the Publish section of the dashboard.

Copy the shortcode and add it to a Shortcode block in the desired post or page. Save the changes and you can view the form on your website.

Another popular option to consider is to use the RegistrationMagic form widget. This will allow you to display it in the widget area on your website. To do this, click on the Form Widget option in the Publish section.

You can also find these widgets in the widget area of your website.

Congratulations on setting up the RegistrationMagic in WordPress.

Make Your Forms Informative

I cannot stress enough how important it is to be clear on what each field on a form represents. Take full advantage of the hover text to provide helpful explanations, suggestions, and examples to visitors.

The harder a form is to fill out, the less likely someone is to complete it.

How many forms did you add to your website? How would you rate the RegistrationMagic plugin?

The post How to Create a Custom WordPress Registration Form with RegistrationMagic appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/custom-wordpress-registration-form-registrationmagic/feed/ 0
How to Use Floating Button in WordPress and Why https://www.greengeeks.com/tutorials/floating-button-wordpress/ https://www.greengeeks.com/tutorials/floating-button-wordpress/#respond Fri, 05 Feb 2021 15:00:16 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=39606 Are you looking for an easy way to add a floating button in WordPress? Floating buttons are versatile tools that developers can take advantage of […]

The post How to Use Floating Button in WordPress and Why appeared first on GreenGeeks.

]]>
Are you looking for an easy way to add a floating button in WordPress? Floating buttons are versatile tools that developers can take advantage of to improve the navigation on their website and even improve sales.

Unfortunately, floating buttons are not available by default in WordPress. However, like most things in WordPress, there is a plugin that can add it.

Today, I will demonstrate how to add a floating button in WordPress using the Floating Button plugin.

What is A Floating Button?

A floating button is a type of button that appears on the top layer of a webpage so it is always visible even if you scroll down the page. The button can come in a variety of shapes, but the most common is a circle.

You can place it at any location on a page and even allow visitors to move the button around. However, you should limit its placement to the sides of the page. Placing it in the middle is a surefire way to annoy a visitor.

Why Add A Floating Button?

Because a floating button is always visible on a page, it can serve a lot of purposes.

For instance, you can create a floating cart button to help lead customers to checkout. You can also create a floating home button to help visitors get back to the home page. You can use them to create any type of button on your website.

Think of it as a floating call-to-action creator.

One of the most common uses for such a button is to access a live chat or sales team. You’ve probably visited a website that used this technique before. It will usually look like “Contact Us +” and when clicked, will expand into a chatbox.

It’s highly effective for websites that have a sales team.

How to Add A Floating Button in WordPress

Step 1: Install Floating Button

The aptly named Floating Button plugin will allow users to easily add a floating button to their WordPress website. It gives users 4 possible locations to place them on a post or page, multiple button shapes to choose from, color options, highlight options, and a slew of other customization tools.

The plugin is quite simple to use and should only take a few minutes to set up, let’s begin.

Click on Plugins and select the Add New option on the left-hand admin panel.

Add New

Search for Floating Button in the available search box. This will pull up additional plugins that you may find helpful.

Floating Button

Scroll down until you find the Floating Button plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

Step 2: Locate the Settings

Upon activation, you are ready to create your very own floating button. And luckily, the creation process is pretty simple. However, it is worth pointing out that this plugin has a Pro version with extra features.

You can identify features locked behind the Pro version by the little red lock icon. You can create a fully functional button without the Pro version, but extra customization options never hurt.

On the left-hand admin panel, click on Wow Plugins and select the Floating Button Lite option.

Floating Button Lite

Click on the Add new tab.

Add new

This will open up all of the customization options that the plugin offers. At the top, you can enter a name to help you identify the button.

Notice, on the left side, there is a Main, Vertical, and Horizontal option. The main button is what users will see on their page. Its function is to display the horizontal and vertical buttons you add to it.

First, we must customize the main button.

Step 3: Customize the Main Button

The first option you can choose is the main icon or the image that will be within the button. By default, the plugin provides 80 unique icons you can choose from, and if you purchase the Pro version, you get over 1500.

Browse through the icons or use the search feature to find one.

Choose Icon

Underneath the icons, you will see a series of drop-down boxes. The plugin only provides one option for the position, button shape, size, animations, and button type. If you want more options, you are going to need to purchase the Pro version.

At the bottom, you will see the color options. You can select the color for the button, icon, tooltip background, tooltip text, and even the hover-over color. Unfortunately, this plugin does not provide a preview option, so it may be difficult to get it right the first time.

Customize Button

On the right-hand side, you will find some visibility options. They include if the button will appear on certain screen sizes (i.e mobile devices), if all users can see them, dependent on the language selection, or if they will appear on all of the content or only the content that has a shortcode placed in it.

You now need to add vertical or horizontal buttons.

Step 4: Add Horizontal and Vertical Buttons

Horizontal and vertical buttons work the exact same way, they are the buttons that appear after a visitor clicks on the main button. The only difference is that horizontal buttons appear horizontal, while vertical buttons appear vertically.

Simple enough, right?

In this case, I will add a vertical button, but feel free to use a Horizontal one.

Click on Vertical or Horizontal.

Vertical or Horizontal

You will see two buttons: Add item and  Delete last item. Click on the “Add item” button and new options will appear. You can choose an icon, tooltip, and various button colors just like the main button. However, this time you can choose what kind of button it is.

The plugin provides 5 options, Link, Login, Logout, Register, and Lost Password. In this case, I will choose Link and create a floating home button by entering my home page URL.

Button Type

You can add multiple vertical and horizontal buttons to any post or page, so repeat these steps as many times as desired.

Once you are satisfied with the settings, click on the “Save” button.

Save

Your floating buttons should now appear on your website if you selected to display them on all posts and pages. If not, you will need to manually enter the shortcode on the pages you would like them to appear on.

Floating Buttons

Congratulations on adding a floating button in WordPress. Remember that you can do a lot of cool things with floating buttons like using them for chat services, navigation, improving the sales experience, quick access to a contact form, and more. If your looking for cool ideas, take a look at the competition.

Additional Plugins to Add A Floating Button in WordPress

While the above plugin is great, some users may want alternatives, and that’s exactly what I will provide. Here are another three plugins, you may want to consider using for floating buttons.

Sticky Buttons – Floating Buttons Builder

Sticky Buttons

Instead of pointing you toward a plugin that specializes in a single type of floating button, I’m going to introduce you to Sticky Buttons, which allows you to build your own.

You’ll have access to over 1500 icons, be able to choose where the buttons can be placed, and a myriad of other customization options. This plugin is all about freedom, and it does an excellent job at providing it.

If you want to take it a step further, you can even upgrade to the premium version of the plugin, which offers even more customization options. If you’re looking for full control, this is the plugin for you.

Social Media Share Buttons & Social Sharing Icons

Social Media Share Buttons

One of the most common uses for floating buttons is to promote your social media accounts. The more accessible they are, the more likely a visitor will click on them and help your presence grow.

And that’s where the Social Media Share Buttons & Social Sharing Icons plugin comes in. This plugin specializes in creating floating buttons for almost every social media platform including Facebook, Twitter, Instagram, YouTube, and more.

In total, you have access to over 200 different social media platforms. Each icon has multiple design options and uses the official symbols. Overall, it’s a simple but effective tool that can really help grow your presence on social media.

Smart Floating / Sticky Buttons

Smart Floating/sticky Buttons

It’s important that customers can contact your support or sales team at a moment’s notice. This can mean the difference between making a sale and losing a customer. One of the best ways to implement this system is with a floating button.

The Smart Floating/Sticky Buttons plugin is a great solution to this problem. It allows you to add communication forms as tap or clickable elements on your website. This includes things like WhatsApp Chat, Email, SMS, Phone, and more.

Of course, you could also use it for promoting social media as well. It comes with button options for the most popular platforms. Regardless of how you use it, this plugin will make a great addition to any business website.

Improve Navigation

Visiting a new website can be very exciting, or it can be awful if the website has a bad navigation system. Floating buttons are a great way to improve your website’s navigation and they are versatile tools that can be used for a wide array of features.

Listen closely to feedback from visitors and don’t be afraid to run surveys and polls asking guests what they think. After all, if you don’t collect the information, you can’t improve on designs or fix what’s wrong.

And that can cost visitors and customers on a daily basis.

What types of floating buttons did you create? How easy did you find the Floating Button plugin to use?

The post How to Use Floating Button in WordPress and Why appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/floating-button-wordpress/feed/ 0
How to Add Seasonal Spirit to WordPress with Christmasify https://www.greengeeks.com/tutorials/seasonal-spirit-wordpress-christmasify/ https://www.greengeeks.com/tutorials/seasonal-spirit-wordpress-christmasify/#respond Fri, 04 Dec 2020 17:56:43 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=38836 The holidays are upon us. If you are like many others out there, decorations are going up around the house, and the Christmas spirit is […]

The post How to Add Seasonal Spirit to WordPress with Christmasify appeared first on GreenGeeks.

]]>
The holidays are upon us. If you are like many others out there, decorations are going up around the house, and the Christmas spirit is in full swing. Why not add a little of that Christmas joy to your website by using a smooth plugin like Christmasify? This plugin will allow you to add all sorts of seasonal fun to your site.

Websites go through changes and updates over time. Some of them big, some of them small. In this case, a nice little Christmas holiday update simply means users can come to the site and enjoy a little extra.

Why Add WordPress Christmas Effects to a Site?

Adding something like falling snow, or a song, or even random ornaments on a site gives your users a fun and charming Christmas experience. There are a few ways to do this. You can code some things in yourself, or you can use a plugin that adds a Christmas effect to WordPress more easily.

Let’s take a look at the one we are going to use today and then set it up together.

Christmasify!

Christmasify plugin

Christmasify is a fun and unique Christmas plugin that is easy to use and lightweight. The plugin allows you to easily add several different types of Christmas related items to your website. Some of the main features include:

  • Ability to Add Falling Snow
  • Add Santa
  • Show Decorations
  • Play Christmas Music
  • Add Christmas Font

As stated above, the plugin is very simple to use and easy to setup. Just a few clicks here and there and you will have all sorts of Christmas joy all over your website.

Before we get into setup, let’s make note of a couple of things.

The plugin is lightweight and performs at a very high level. In order for this to happen, IE8 or lower is not supported. You will also need to be running PHP 5.4 or greater.

Now, let’s take a look at how to add seasonal spirit to your website.

How to Use Christmasify to Add Seasonal Spirit

Step 1: Install and Activate the Plugin

In order to use this great Christmas plugin, you must first install and activate it on your WordPress website. You can do this by jumping over to the Plugins page in the WordPress admin directory.

Simply use the search field to find the plugin by name. Once it pops up, install and activate it from there.

Install and activate Christmasify

Step 2: Access the Configuration Page

Now that the Christmasify plugin has been installed, you need to access the main configuration page so that you can set it up how you want.

To do this, click on the “Christmasify” tab located on the left menu area of the dashboard.

Click the Christmasify tab

You will see this is now an available option after you activated the plugin.

Step 3: Configure the Plugin

At this point, you have made your way to the main settings and configuration page for the plugin. As you can see, it is only one page with a few settings to choose from.

You will have the option to do the following:

  • Add Snowflakes
  • Have a Flying Santa On-Screen
  • Add One of Three Famous Christmas Jingles
  • Put Christmas Decorations on Images
  • Add Christmas Headings

Christmasify settings

Go ahead and make the choices you want for your site. When you are ready, click on the “Christmasify!” button to apply all the changes.

Step 4: View the Live Site

After you save the changes, go ahead and pop over to the live site to see all the Christmas season changes working.

Live site

As you can see, I went ahead and added all the options. And yes, Santa flies across over and over at a slow pace.

That’s it! You are all set. To add any of the available Christmas options or stop any of them, simply go back to the configuration page and make changes.

You are now sharing the holiday joy with your site visitors.

Other WordPress Christmas Plugins

Christmasify is a fantastic Christmas plugin that makes it simple and easy to add holiday spirit to your site. That being said, it isn’t the only plugin available that does this. 

If you are interested in other holiday plugin possibilities, then here are a few you might want to take a look at.

Christmas Greetings

Christmas Greeting Plugin

Christmas Greetings is a great Christmas plugin that is also compatible with WooCommerce. The plugin makes all sorts of great little features available. You can use these to bring a lot of holiday joy to your website.

Once installed, you will have the options to add snowflakes, a floating Santa, gift box decorations on images, and create customized greetings for your site visitors. That being said, this plugin actually excels because of what you can do with a WooCommerce store.

You will be able to allow your store visitors to start unwrapping the ecards, gifts, presents, and messages. It is just a great addition to your site for the Christmas season.

Christmas Countdown Widget

Christmas countdown widget

Are you interested in adding a Christmas countdown to your WordPress site? If so, then the easy to use Christmas Countdown Widget is exactly what you need to have installed on your website.

The plugin is pretty straightforward. It adds a Santa countdown widget to your website. You can display it and use it to countdown the days until Christmas. The countdown timer automatically updates each year and starts the countdown over again on the day after Christmas. Since this is the case, you can leave it up year-round if you choose.

Note: The Santa Christmas countdown is transparent. It will look good when used on any theme.

Christmas Panda

Christmas Panda plugin

Christmas Panda is a Christmas decoration plugin that gives you the ability to add all sorts of decorations and Christmas options to your site. Once installed, you will be able to decorate your WordPress website with Christmas trees, Santa, snowfall, or just display a pop-up to remember your visitors that it’s Christmas.

The plugin gives quite a bit of decoration options in the backend of the site. One of the coolest things about it is that it lets you choose what decoration style and Christmas popups to display using the built-in library that comes with the plugin.

Give it a look if you are interested in choosing from more options.

WP Snow Effect 

WP Snow Effect

WP Snow Effect helps you easily add a beautiful falling snow effect to your website. This allows your site users to enjoy the Christmas season and winter in general.

The plugin is smooth and straightforward. You can create falling snow, a snowstorm, and adjust the speed of the snow that falls. A great little Christmas plugin to view.

Final Thoughts 

Christmas is a wonderful time of the year for many of us. Spreading seasonal joy is never a bad idea. Why not take this same concept and apply it to your website? Give your users a glimpse of the holiday spirit by adding unique holiday additions to your site.

Even something as simple as snow falling during the Christmas season gives users a unique and fun experience while they are browsing your content.

I hope this article was able to show you how easy it is to add holiday joy to your website.

Have you tried using any of these plugins in the past? Which one is your favorite?

The post How to Add Seasonal Spirit to WordPress with Christmasify appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/seasonal-spirit-wordpress-christmasify/feed/ 0
How to Create Awesome Visuals with Advanced WordPress Backgrounds https://www.greengeeks.com/tutorials/advanced-wordpress-backgrounds/ https://www.greengeeks.com/tutorials/advanced-wordpress-backgrounds/#respond Fri, 30 Oct 2020 17:37:04 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=38435 WordPress continues to evolve and bring us amazing new ways to design pages and make them unique. If a page has a great background or […]

The post How to Create Awesome Visuals with Advanced WordPress Backgrounds appeared first on GreenGeeks.

]]>
WordPress continues to evolve and bring us amazing new ways to design pages and make them unique. If a page has a great background or is incorporating different types of backgrounds, then it makes the appearance more of an individual. You can accomplish this by using Advanced WordPress Backgrounds.

A plugin like this will give you the ability to create all sorts of great background and background overlays on any WordPress post or page. Using them the right way can really make a page pop and get the attention you need.

Today, I am going to show you have you can easily add WordPress backgrounds to a page when needed using the Advanced WordPress Backgrounds plugin.

What are Custom Backgrounds in WordPress?

A custom background in WordPress is a theme feature. It allows theme developers to enable support for things like background color and image customization. If a theme developer has this enabled, then the theme user can upload their own background images and add their own colors.

Custom backgrounds on a page and other animations can be put into use utilizing code or a plugin. There are several solid WordPress plugins that allow you to add backgrounds and animations to a page within your theme.

Advanced WordPress Backgrounds

Advanced WordPress Backgrounds plugin

Advanced WordPress Backgrounds allows you to create and use parallax style backgrounds. This can be done with images, videos, YouTube, and Vimeo. Full Gutenberg support is integrated, as well as page builder support. The plugin is perfect if you are a YouTube background creator.

This plugin is easy to use, comes packed with background types, and will not slow your site down. Background types available once the plugin is installed include:

  • Color
  • Image
  • Pattern Images
  • Self Hosted Video
  • YouTube
  • Vimeo

Not only will you be able to make cool YouTube wallpapers, but you will also have the option of using Parallax to create and display these WordPress backgrounds. These options for Parallax include:

  • Custom Speed Option
  • Enable or Disable for Mobile Devices
  • Scroll Effect
  • Opacity Effect
  • Scale Effect
  • Scroll + Opacity Effect
  • Scroll + Scale Effect

And that’s not all. There is also a stretch option that you can make use of for boxed websites, as well as a visual shortcode maker that you can use to create shortcodes using the visual builder.

All-in-all, the Advanced WordPress Backgrounds plugin gives you everything you need and more to create amazing backgrounds for your WordPress pages.

Create a Custom WordPress Background

Step 1: Install and Activate the Plugin

Before you can start making custom WordPress backgrounds, you first need to install and activate the plugin. To do this, simply hop over to the Plugins page in the WordPress admin dashboard.

INstall and activate advanced wordpress backgrounds

Use the search field to search the plugin by name. When it pops up, install and activate it from there.

Step 2: Access Background Settings

Now that the plugin is installed and activated, you want to access the background settings page for the plugin. To do this, click on Settings > AWB, located in the left side menu area of the dashboard.

Click seting then click awb

You can see that this option is now available since you activated the plugin.

Step 3: Configure the Plugin Settings

This move takes you to the Advanced WordPress Background settings page. Here, you will see two main tabs, General and PRO. The General tab gives you the options for disabling parallax and video on certain browsers if you want. Go ahead and fill this portion out however you see fit.

General tab settings for advanced wordpress backgrounds

The PRO tab simply shows you what other options you can access if you buy the pro version of the plugin.

Pro tab information

Note: If you feel you need the pro version of the plugin, then feel free to purchase it. All of these instructions for adding a WordPress background are based on the free version of Advanced WordPress Backgrounds.

Step 4: Add a New Page

Once the settings for the plugin are in place, it is time to add a new custom WordPress background. Click on Pages > Add New, to add a new page.

Click on pages then click on add new

You can also go to an existing page if you want to add a WordPress background to an already existing page.

Step 5: Add the Background (AWB) Block

Now that you have opened the editor, it is time to add the appropriate block. When you activate the plugin, it automatically adds a new block to the Gutenberg editor titled “Background (AWB).”

Click the + symbol to add a new block and search for that relevant block to add.

Add the background AWB block

This will automatically add the Advanced WordPress Backgrounds block to your page, where you will be ready to edit it.

AWb block added

Step 6: Select the Background Type

Now that the AWB block is on your page, you want to select what type of background you are going to build. For this demonstration, we are going to use the “Color” type. However, you can choose to use the Image or Video type if you prefer.

Image Background Type

If you select the “Image” type for background, then you will simply select an image from your computer or from your media library to use for the custom WordPress background.

Image background type

Video Background Type

If you decide you want to use the “Video” type for a background, then choose self-hosted or YourTube/Vimeo options. If the file is self-hosted, select the file from the media library or computer and pull it in.

Conversely, if the video is hosted on YouTube or Vimeo, you simply need to add the URL to the correct field and the video background will automatically display properly.

Video background type for advanced wordpress backgrounds

Color Background Type

As stated above, I have selected the “Color” background type. Simply select the color you want to act as the background.

Green color background

You can see I chose to set a green background. Once that is in place, you can add another block over the background.

Add another block

I went ahead and added a “Paragraph” block just to put some text in for the demo. You can add any block you want.

Step 7: View Your WordPress Background in Page Preview

Now that you have your WordPress background in place, go ahead and preview it in the browser and see how it looks.

Preview block for advanced wordpress backgrounds

Once you are happy with what you have, you can publish the page. Feel free to add as many different background blocks as you want to the page or other pages. Try them all out, use the effects, see what all out can come up with.

What is the Most Popular Background Type?

Well, the most popular WordPress custom background type for your website may be different than it is for another website. It all depends on what you are trying to accomplish, your target audience, and what type of website you have.

Using a selection of all the backgrounds available in the Advanced WordPress Backgrounds plugin is always encouraged. Build something people will remember.

Final Thoughts

Creating different, eye-catching, unique custom WordPress background for your website pages is something that will not only help people remember your site, but will also help you build something more unique than someone else might have.

I hope this article showed you how easy it is to add a custom WordPress background to your website. Advanced WordPress backgrounds makes the process easy and fun. It is a fantastic plugin to have.

Have you tried adding WordPress backgrounds using a different method? Do you prefer coding them yourself?

The post How to Create Awesome Visuals with Advanced WordPress Backgrounds appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/advanced-wordpress-backgrounds/feed/ 0
How to Easily Add Simple Custom CSS to WordPress https://www.greengeeks.com/tutorials/simple-custom-css-wordpress/ https://www.greengeeks.com/tutorials/simple-custom-css-wordpress/#respond Thu, 22 Oct 2020 14:00:43 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=38302 Are you looking for an easy way to add simple custom CSS from your website? Normally, you would have to edit your theme or plugins […]

The post How to Easily Add Simple Custom CSS to WordPress appeared first on GreenGeeks.

]]>
Are you looking for an easy way to add simple custom CSS from your website? Normally, you would have to edit your theme or plugins files to customize them with CSS. For beginners, this can be a lot of work, but I have a solution.

Instead of locating and editing those files, you can use the Simple Custom CSS and JS plugin. This allows you to directly add custom CSS and JS for your website. It’s fast, easy, and most importantly, convenient to do.

What Does Custom CSS Do?

Editing your theme or plugin’s CSS allows you to customize the appearance of them in a variety of ways. This helps get themes to look the way you want and ensures that any plugins you add will match your theme.

After all, some plugins have a tendency of not matching with the design of your website.

Adding custom CSS can change the colors, fonts, and even the layout of a theme or plugin, but it is worth noting that sometimes you can only do so much. This is because you are simply adding or altering the CSS of a specific item. You are not creating a new one.

Although, if you are talented enough, it is possible to alter the actual code of the theme or plugin for even more customization.

But in general, you are just tweaking a few values, but you are not creating it from scratch.

How to Add Simple Custom CSS in WordPress

Step 1: Install Simple Custom CSS and JS

The Simple Custom CSS and JS plugin is a terrific addition to any website that wants to tweak the appearance of their website. It allows you to add CSS and JS without leaving your website. It features a text editor, unlimited additions, the ability to keep changes even when you change themes, and more.

However, you might be wondering how much coding knowledge you need to make the most of this plugin, and the answer will probably surprise you.

In reality, you don’t need any coding knowledge. The plugin takes care of actually adding the code to your website. All you are responsible for is providing code, and the good news is that the internet contains a variety of CSS and JS to customize WordPress.

With that said, I highly encourage you to learn the basics of CSS. This will give you more options and make it easy to tweak code. Most importantly, it will help you identify any problems in code that could cause problems.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for Simple Custom CSS and JS in the available search box. This will pull up additional plugins that you may find helpful.

Simple Custom CSS

Scroll down until you find the Simple Custom CSS and JS plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

Step 2: Understand the Text Editor

This plugin allows you to add CSS, JS, and HTML, which covers every language you will need in WordPress to edit its appearance. The plugin is extremely straightforward to use, which is why it has become so popular over the years.

Note: I will focus on CSS in this tutorial, but the process is identical for JS and HTML but in a different coding language.

On the left-hand admin panel, click on Custom CSS & JS and select the Add Custom CSS option.

Add Custom CSS

This is a basic text editor and by default, there is a comment that you can safely delete without issue. You can add a title at the top, and in the top left corner, you will notice a paintbrush. This is the Beautify Code option. All it does is remove any extra spaces between lines of code.

Beautify Code

Note: I would personally recommend not using that feature because it makes the code harder to read. However, the choice is yours.

On the right-hand side, there are some options you can choose from. These include whether you want the code to be an external or internal file, if it is in the header or footer, and where on the website it goes.

All of the other options on this page are only available if you upgrade to the Pro edition of the plugin.

That is everything the editor itself has to offer in terms of features.

Keep in mind that if code is not having the desired result when entered into the editor, you have simply entered it incorrectly. You can freely edit any code you add at any time and the change to your website happens immediately.

Step 3: Add Custom CSS, JS, and HTML

There are multiple resources you can use to learn CSS or any of the other languages in-depth in a reasonable amount of time. As such, this tutorial will not cover it. However, what I do want to raise awareness of is how much custom CSS is available online that you can use on your website.

A great example of this can be found on the ThemeIsle blog.

And as always, if you simply Google what you are looking for, it is probably online. As long as you can find the code, all you actually need to do is copy and paste it into the plugin’s text editor. There really isn’t anything complicated to it.

Congratulations on learning how to add custom CSS in WordPress. If you are interested in learning the CSS language, I strongly recommend using W3Schools as a resource. It contains everything you need to master it. The site has resources for other languages as well.

Plugins Need the Most CSS

In many cases, features from plugins tend to stand out on your website. While this has gotten better over the years with many of them using your theme’s color scheme by default, there are still many that don’t.

And some of them can really stand out like a sore thumb.

Some plugins already have built-in ways you can add CSS to customize its appearance, but some still lack this functionality. Most of the changes you make will only be changing the colors, fonts, font sizes, and other small things to match your website.

This plugin perfectly fixes this problem by making it easy to add custom CSS, so make sure that every feature you add matches the rest of your website.

Do I Need to Code in WordPress?

WordPress is often touted as the CMS you don’t need to write a single line of code for, and that is true to a certain extent.

While you can make a very good website without any coding, there are limits to what you can achieve. And that’s exactly where knowing CSS, JS, or HTML can help you. These are powerful, but simple languages that allow you to customize the appearance of your website.

Without them, almost every website that uses the same theme would look almost identical.

This helps make your website stand out from the competition and most importantly, it makes them look exactly like you want them to.

What custom CSS are you planning to add to your website? How easy did you find the Simple Custom CSS and JS plugin to use?

The post How to Easily Add Simple Custom CSS to WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/simple-custom-css-wordpress/feed/ 0
How to Add a Like Button to WordPress with Likebtn https://www.greengeeks.com/tutorials/like-button-wordpress-likebtn/ https://www.greengeeks.com/tutorials/like-button-wordpress-likebtn/#respond Fri, 02 Oct 2020 14:00:13 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=37658 Having a social media presence on your website is important these days. Like it or not, people associate the number of page “likes” to how […]

The post How to Add a Like Button to WordPress with Likebtn appeared first on GreenGeeks.

]]>
Having a social media presence on your website is important these days. Like it or not, people associate the number of page “likes” to how relevant content may be. It doesn’t matter if the content is not the best. If it has a strong social media presence, then people flock to it. Today, I am going to show you how to add a “like” button to your WordPress website using the LikeBtn plugin.

There are several ways you can add a “like” button to a WordPress site. You can custom code one yourself or even use any number of excellent social media plugins to do it as well.

This is a good way to get people to interact with your content and to show other readers that people are “liking” your posts and pages.

Let’s take a look at the plugin we are going to use today and see all that it has to offer.

LikeBtn Like Button Rating

LikeBtn plugin

LikeBtn Like Button Rating is a plugin that allows you to add a fully customizable “like” button to your website. Yes, we are all familiar with the Facebook like button, but this plugin goes a step further by giving you the ability to add a number of options that are fully customizable.

The plugin is lightweight, powerful, and easy to install and setup. It is fully compatible with all of your favorite plugins as well. This is a stand out point because it gives you the ability to add a like button rating to any sort of post or page.

Some of the compatible options include:

As you can see, no matter what type of plugin or content you are running on-site, the LikeBtn plugin has you covered.

Just because the plugin is simple to use does not mean it isn’t packed with features. It has you covered with just about everything imaginable. Some of the main features include:

  • GDPR Compliant
  • 80 parameters, 41 themes, 40 languages
  • Custom themes and images
  • Real-time reports
  • Works with websites fully cached
  • Multiple shortcode options for like button display
  • Fully customizable
  • Add your own custom CSS
  • Allows donation collections
  • Allows you to add Open Graph meta tags to posts and pages

And this is just the tip of the iceberg. The feature section is huge and simply too long to display here. Needless to say, you will not find a better option for adding customizable like buttons to your website.

Adding a WordPress Like Button

Now that you have a pretty good idea of the plugin and all it has to offer, let’s take a look at how to get it set up, configured, and running on your website.

Step 1: Install and Activate the Plugin

Before you can start using the LikeBtn plugin to add like buttons to your WordPress site, you first need to install and activate it. You can do this by jumping over to the Plugins page in the WordPress admin dashboard.

Simply use the search field to search the plugin by name and install it right from there.

Install and activate LikeBtn

Step 2: Access the Main Settings Page

Now that the plugin is running, you need to access the main settings page for it. You can do this by clicking on Like Buttons > Settings.

You will see this on the left side menu of the dashboard once you activate the plugin.

Click on like button then settings

Step 3: Register for a LikeBtn Account

At this point, you are on the main settings page for the plugin. First off, you will see a link at the top of the page. This link directs you to open an account on LikeBtn. Click on the link to do that.

Open LikeBtn account

A popup box will appear. Enter your email and password to register.

Popup registration box

When you successfully create your new account, you will see a page popup asking for you to enter the website you want to add a like button to. Enter your site domain now and click on the “Add Website” button.

Once you add your site URL, the LikeBtn website redirects you to your main account page. Here, you will see the API Key you need, as well as the site ID. Copy and paste these back into the settings page in WordPress.

APi and Site ID keys

Click on the “Save All Changes” button and you are ready to roll. At this point, you can go through the rest of the settings and configure them how you want. Once this is done, it is time to create a button.

Save all changes

Note: Once you open a free LikeBtn account, you will have 7 days to check it all out and see how you like it. At that point, they will ask you what plan you want to get on. There is a free plan available. So if that is good for you, simply select it. If you think you need the pro version, then you are more than welcome to upgrade to it for a little more functionality.

Step 4: Create a New Like Button

Now that your account API keys are in, click on the “Buttons” tab on the top of the page. You will see a vast number of settings and build options come up. Don’t panic, as you can use like button options for all pages once you build one.

At the top of the page, you will see a bunch of mini tabs. These will auto display based on what plugins you have running. In this case, we have WooCommerce, so you can see that there are WooCommerce button tabs available.

Multiple tabs

For this option, I have selected the “Posts” tab. All of the tabs have the same settings options. If you want to build different “like” buttons for each type of post or page, then you can do that.

Just fill out the settings on each one as you see fit.

For now, though, let’s take a quick look at the settings. At the top, you need to click on the “Enable Like Button” option. Then, you can see a preview of the button as you build it.

Enable like button

Now scroll down some and chose the theme you want, language, and other button options.

Choose LikeBtn theme and language

Scrolling down more, you will see options for the like button text as well as branding and other options to fill out.

Like button branding

Formatting Tab Options

On we go. Move down more and you come to additional formatting tab options. You can go through all of these one-by-one and set your LikeBtn button however you want.

The options are almost endless.

Formatting tab options

Finally, scroll down a bit more to find the last of available options to consider. Fill these out how you see fit for your site.

Final settings

At the very bottom of the page, you will see a “Get Shortcode” link. Click on that to view the shortcode that has been created for the button you just built.

Get LikeBtn shortcode button

You are simply going to copy and paste that shortcode wherever you want the like button to be. Or, you can let it be placed automatically by the plugin when the “Save Changes” button is clicked on.

That’s it! At this point, you can complete the above process as many times as you want, building different like buttons for different parts of your WordPress website.

Final Thoughts

A solid social media presence on your site shows users that other people are interacting and enjoying your content. A great way to get more interaction is to add a like button to your WordPress website.

The LikeBtn plugin is the perfect option for this. Not only is the plugin easy to install and use, but it has a vast number of configuration options. This will allow you to style and create multiple buttons in any way you want.

I hope the article showed you how easy it is to add a like button to your website.

Have you ever used this plugin before? Do you prefer a different method, like custom coding your own like button?

The post How to Add a Like Button to WordPress with Likebtn appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/like-button-wordpress-likebtn/feed/ 0
How to Add the Weather Effect Plugin to WordPress and Why https://www.greengeeks.com/tutorials/weather-effect-wordpress/ https://www.greengeeks.com/tutorials/weather-effect-wordpress/#respond Thu, 03 Sep 2020 14:00:02 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=37233 If you want to add a weather effect to your WordPress website, it’s easier than you think. Retail stores put up Christmas trees and decorate […]

The post How to Add the Weather Effect Plugin to WordPress and Why appeared first on GreenGeeks.

]]>
If you want to add a weather effect to your WordPress website, it’s easier than you think. Retail stores put up Christmas trees and decorate their windows because it creates a holiday spirit. And when you can get your customers into a festive mood, they’re more likely to buy from you.

The same idea applies to your website. Even if you aren’t selling anything, the change of scenery adds interest. To achieve the seasonal look, we’ll use the Weather Effect – Christmas Santa Snow Falling plugin.

But don’t worry, you can do more weather effects outside of snow.

Let’s get right to it.

1. Installing the Weather Effect Plugin

Log in to your WordPress admin panel.

In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter, “Weather Effect.”

search for the WordPress Weather Effect plugin

When you find the plugin, click the “Install Now” button.

click to install the WordPress Weather Effect plugin

Now the plugin is installed, but it has to be activated before you can use it.

Click the “Activate” button.

click to activate the WordPress Weather Effect plugin

That’s all there is to it. Now, let’s put the plugin to work.

2. Configuring Weather Effect

Snow doesn’t begin to fall all over your posts and pages when you activate the plugin (which is probably a good thing).

We have to do a little configuration to make that happen.

In the left column navigation, mouse over the “Weather Effect” option and click its link.

click the "Weather Effect" link

The first option is to turn the effect on or off. It’s enabled by default, but nothing will fall until you choose a theme.

Choose a theme (Christmas, Halloween, etc.) from the drop-down menu.

Weather Effect WordPress plugin enable/disable

When you choose a theme, the specific theme options are displayed below. (When you first visit the plugin page, all the options are displayed on a long scrolling page. They’re easier to work with when you choose an option from the drop-down menu.)

I’ll choose the Halloween theme, and you can see that the options below change to Halloween options.

Weather Effect WordPress plugin Halloween options

The checkboxes at the top are where you choose the shape of the falling items on the page. I’ll choose bats because who doesn’t love bats? And because they’ll be easy to see in our examples.

You’ll notice that a drop-down menu opens below your selection. Depending on the theme, you may only have one option available. (More options are available if you pay for the premium version of the plugin.)

Weather Effect WordPress plugin drop-down with single option

3. Common Settings

Before we turn on the effect, let’s go down to the other settings. These control the size and speed of the falling items. These settings will usually be the same regardless of which theme you choose, so let’s take a close look at them.

Weather Effect WordPress plugin global settings

  • Minimum Fall Size On page – is the minimum pixel size of the falling items. None of the falling items will be smaller than what you set here. The default size is 20. You can choose any size from 1 to 30 pixels.
  • Maximum Fall Size On page – is the maximum pixel size of the falling items. None of the falling items will be larger than what you set here. The default size is 50. You can choose any size from 10 to 200 pixels.
  • Falls On page – controls how many of the falling items can appear on the screen at once. The default number is 5, but you can choose any number from 1 to 100.
  • Falls Speed On page – controls the speed of the falling items on the screen. I’m not sure if the numbers represent seconds, or it’s just a number, but the default value is 5. You can choose any number from 1 to 100. Not all of the items fall at the same speed, so you’ll have to experiment to get the desired effect.

I’m going to leave the default values for now.

Then I’ll click the “Save” button.

Now, if I reload the page, the effect is previewed right there on the settings page. Don’t worry, it doesn’t make bats fall everywhere in the admin dashboard, just here.

Weather Effect WordPress plugin preview on settings page

And they’re falling on the site as well, as expected.

Weather Effect WordPress plugin effect on site

But what if I want to see more bats? Let’s increase “Falls On page” from 5 to 50.

Then I’ll click the “Save” button.

Weather Effect WordPress plugin increase "falls on page"

That’s a lot of bats.

Weather Effect WordPress plugin

4. How to Add Multiple Falling Items to the Effect

What if you want to mix things up and have more than one kind of item falling on a page?

That’s easy, just select the items you want to add. (Note that some of the themes don’t have multiple options.)

Moving away from bats, let’s try a couple of Christmas items: candy, and snowmen.

You’ll notice these drop-down menus provide more options than the Halloween theme.

Weather Effect WordPress plugin Christmas candy and snowmen

I’ll save the settings, having chosen two items.

Now we have a mix of festive images.

Weather Effect WordPress plugin Christmas candy and snowmen on page

You can add as many items as you’d like from each theme. But adding too many makes for a chaotic mess, so use your judgment as to how much is too much.

Like this, for instance. It might just be too much.

Weather Effect WordPress plugin too much

You can’t mix items from different themes. If you try to add Thanksgiving turkeys to your snowmen, the turkeys aren’t going to show up (or fall down).

The premium paid version of the plugin allows you to exclude specific pages and posts from using the effect. It also lets you upload your own images.

What Happens if You Uninstall the Weather Effect Plugin

If you uninstall the plugin, you’ll no longer be able to use the effect. No pages or database entries are created by the plugin, so there’s nothing to manually remove.

Seasonal SEO Strategies

Adding falling snowmen or bats to your site isn’t exactly an SEO strategy. But you can think about using the seasonal weather plugin for WordPress the same way seasonal SEO strategy is planned.

There are two seasonal strategies, time-based and event-based. The same concepts apply to site design changes.

  • Time-based – This refers to seasons in the year, summer, winter, etc., or a certain time period, like a calendar month.
  • Event-based – Refers to specific events or holidays, Christmas, Thanksgiving, Halloween, etc.

In many cases, you’ll find that time-based and event-based strategies overlap.

Remember, though, it’s easy to overuse an effect such as this one. A little goes a long way. But updating your site logo or theme to match time or event-based seasonal strategies can be an effective tool. And it can help keep your site looking fresh and new year-round.

Want to Go Further Than a Weather Plugin?

You might be interested in another “falling” plugin that uses Font Awesome glyphs. That means you can make just about any Font Awesome icon slide down your pages. Like bathroom scales or swimming pool ladders.

Okay, maybe those aren’t great examples (unless you run a swimming pool company), but there are tons of other possibilities.

And we’ve gone a bit overboard in the examples here because I wanted the effect to be visible and obvious. But a single image or icon gliding down the page at longer intervals can be effective as well.

In other words, you don’t have to create a million-bat (or bathroom scale) rainstorm to make your point. Subtlety often has a greater impact than overkill.

Do you use a different weather plugin on your WordPress site? Do you regularly make any other seasonal or event changes?

Let me know in the comments. I’d love to hear from you.

The post How to Add the Weather Effect Plugin to WordPress and Why appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/weather-effect-wordpress/feed/ 0
How to Hide the Post Date in WordPress and Why https://www.greengeeks.com/tutorials/hide-post-date-wordpress/ https://www.greengeeks.com/tutorials/hide-post-date-wordpress/#comments Fri, 14 Aug 2020 14:00:35 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=36833 By default, all WordPress posts and pages are dated and time-stamped. Those dates are helpful when you’re organizing, but they aren’t always appropriate to show […]

The post How to Hide the Post Date in WordPress and Why appeared first on GreenGeeks.

]]>
By default, all WordPress posts and pages are dated and time-stamped. Those dates are helpful when you’re organizing, but they aren’t always appropriate to show publicly. Some articles are evergreen, meaning they’re relevant long after their publication dates. And a publication date that’s a few years old might discourage clicks in search results. For those reasons or others, you may want to hide the post date on the public-facing parts of your site.

There are a couple of ways to hide the post date. One is by using additional CSS in your theme customization. If you don’t want to go that route, there are also plugins that will remove the date display.

Which method you choose depends on your preferences. But here are some of the advantages and disadvantages of each method.

Additional CSS method advantages

  • It’s easy to implement if you’re accustomed to working with additional CSS customization.
  • It avoids the resource use that can come along with plugins.

Additional CSS method disadvantages

  • It only works on the theme you edit. If you change themes, you’ll have to hide the post date again.
  • The CSS used to hide dates may not be the same for every theme. This is because of how certain parts are created by the specific developer.

Plugin advantages

  • Dates will remain hidden even if you change themes.
  • The plugin we’re going to use will hide post dates based on the post categories.

Plugin disadvantages

  • Plugins generally use system resources to alter page displays as pages and posts are loading.

Either way you go, it only takes a minute or two to hide the post date. I’ll show you how to remove dates from posts in WordPress using both methods. Then you can decide which works best for you.

We’ll start with the additional CSS method. Or you can skip to the plugin method.

How to Hide the Post Date Using Additional CSS

This is the method I use to hide not only post dates but just about anything my theme displays that I don’t want to be displayed. You can do a lot with additional CSS, and it’s a tool I rely on in all my WordPress installations.

Log in to your WordPress admin panel.

We’re going to customize the current theme. To do that, in the left column navigation, mouse over the “Appearance” link and click the “Customize” link.

mouse over the "Appearance" link and click the "Customize" link

The “Additional CSS” control is usually located at or near the bottom of the left menu.

Click to open the CSS entry field.

click to open the "Additional CSS" field

The basic CSS used to hide the post date is:

.entry-date published { 
  display: none; 
}

Insert the CSS into the “Additional CSS” field.

insert code in the "Additional CSS" field

As soon as you enter the CSS in the Additional CSS field, the date should be hidden in the preview.

date hidden in preview

Click the “Publish” button to save the Additional CSS

click the "Publish" button

The additional CSS entry above will work for many themes.

If Adding the CSS Doesn’t Hide the Date

The first thing to try is adding “!important” to the CSS.

.entry-date published { 
  display: none !important; 
}

If the date is still visible, your theme may use a different CSS class for the date.

To see the CSS class, right-click on the date and select “Inspect.”

I’m using the Chrome browser for this tutorial. In Firefox or Opera, you’ll right-click and select “Inspect Element.” In Safari, use Option key + C.

right-click date and select "Inspect"

The developer’s tools section will open. The page element that you right-clicked (in our case the post date) should be highlighted. You can usually see the CSS class in the highlighted section.

CSS class in browser dev tools

Copy the class name and set display: none.

.CLASS-NAME { 
  display: none; 
}

If your theme uses an icon along with the date, you can hide it the same way. Find its CSS class name and set display: none.

It’s also important to point out that when you use the CSS class in this way, you need to include the preceding period as in the examples above.

How to Remove the Date From Your WordPress Posts Using a Plugin

If the CSS method doesn’t work for your theme, you can still hide the post date using a WordPress plugin. We’ll use WP Date Remover.

There are several date removal plugins out there. I chose this one because it hides the date based on categories. I’ll show you what I mean by that in a minute.

Installing the WP Date Remover Plugin

Log in to your WordPress admin panel.

In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter, “WP Date Remover.”

search for the WordPress WP Date Remover plugin

When you find the plugin, click the “Install Now” button.

click to install the WordPress WP Date Remover plugin

Now the plugin is installed, but it has to be activated before you can use it.

Click the “Activate” button.

click to activate the WordPress WP Date Remover plugin

That’s all there is to it. Now let’s put the plugin to work.

Configuring WP Date Remover

In the left column navigation, mouse over the “Settings” link and click the “WP Date Remover” link.

click the "WP Date Remover" link

You’ll see a page listing all of your WordPress post categories.

WordPress post categories

Yeesh, that’s a lot of categories. That’s because I used WordPress Theme Unit Test data to populate the blog with posts, pages, and comments.

In a new WordPress installation, you’d only see one category:

default WordPress post categories

You probably have a few categories that you’ve added to your WordPress site.

For our demonstration here I’ll check the box for the “uncategorized” category.

Then click the “Save all changes” button.

click the "Save all changes" button

Now if I go to an uncategorized post, the date has been hidden.

date hidden

That’s all there is to using the plugin. Simple and effective.

What Happens if You Uninstall the WP Date Remover Plugin

If you uninstall the plugin, your post dates will no longer be hidden.

The Pros and Cons of Hiding WordPress Post Dates

At the beginning of this article, I mentioned “evergreen” posts. Articles that are still relevant after their publication dates. For an article like that, an older date can work against you. Visitors might assume the information is old because it wasn’t recently posted. I know I often have that bias when looking at search results.

I want the latest information.

That’s a perception (and as I admitted, I do it myself), but honestly, I’m not sure it’s true across the board. Here’s a bit of surprising information. The average age of posts in the top 10 positions of Google search results is 2 to 3 years.

And not all information is equal. An article written about Mozart in 2020 is unlikely to have “newer” information than one written in 1995. So we can’t always look at the post date as a negative factor for our sites.

An argument to not hide the date in WordPress would be user-friendliness. Because if you think about it, that article that you thought would be relevant and timely forever may not be. And the last thing you want is visitors complaining about out-of-date information on your site.

It can have a negative impact on your site’s credibility.

But there is a way to avoid the downsides of showing post dates. That is to display the date a post was updated. That way, when you take the time to update posts for accuracy, the update is the date visitors see. That may be the best compromise between showing and hiding dates.

Do you avoid clicking the links to older articles in search results? Do you think you’ll use either of the hide post date methods we discussed? Let me know in the comments. I’d love to hear from you.

The post How to Hide the Post Date in WordPress and Why appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/hide-post-date-wordpress/feed/ 5
How to Add a Custom Calculator in WordPress with Calculated Fields Form https://www.greengeeks.com/tutorials/custom-calculator-wordpress-calculated-fields-form/ https://www.greengeeks.com/tutorials/custom-calculator-wordpress-calculated-fields-form/#comments Thu, 09 Jul 2020 15:38:37 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=35765 Do you run a business with unique payment calculations? If so, you can use a calculated fields form to add all of the math and […]

The post How to Add a Custom Calculator in WordPress with Calculated Fields Form appeared first on GreenGeeks.

]]>
Do you run a business with unique payment calculations? If so, you can use a calculated fields form to add all of the math and formulas in yourself. As a result, customers only need to enter specific information to find out their price or estimate.

There are a variety of reasons this feature is useful. For example, you could make a Fahrenheit to Celcius conversion calculator with one of these forms. Today, I will demonstrate how to use the Calculated Fields Form plugin to enhance your website.

What Is A Calculated Fields Form?

Most people have made use of these without even realizing it. If you have ever entered a number and gotten a result back, it was most likely one of these forms.

To put it simply, all they are is a formula with a certain amount of variables. The formula can be anything you want and the variable is the user input.

So for example, let’s say you charge 20 dollars for every hour you work, but also require an upfront cost of $100. That would look like:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]Cost = 20X + 100[/ht_message]

Where X is the number you input. This can be applied to a variety of situations and is most comparable to using a formula in Excel or Google Sheets.

What Websites Would Need This?

Not every website will need to make its own calculator in WordPress.

Generally, if you do business in a field where the pay is dependent on certain factors, a calculator is useful. For example, if you are a painter, you would not charge every client the same amount. Houses come in different sizes, so it would be based on the square footage of the house and other factors.

This is why most jobs of this nature will have to give you an estimate instead of a flat price. You can add a calculated fields form with all of the pricing information to help customers get a rough idea of the costs.

There are a variety of businesses like this, but there are other uses.

For example, if you run a fitness website, you may want to share the Body Mass Index (BMI) formula or how to calculate your recommended calorie intake. Basically, if you need to use math, these forms are valuable.

Installing Calculated Fields Form

The Calculated Fields Form plugin allows you to add a custom calculator field in WordPress. It can be customized to do just about anything when it comes to adding these forms. Addition, subtraction, multiplication, division, and more can be used to craft real formulas that users can take advantage of.

This is a must-have for any business that has multiple factors to consider when calculating a payment. And the best part is that it is easy to use.

Let’s start by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for Calculated Fields Form in the available search box. This will pull up additional plugins that you may find helpful.

Calculated Fields Form

Scroll down until you find the Calculated Fields Form plugin and click on the “Install Now” button and activate the plugin for use.

Install Now

Creating Your Form

On the left-hand admin panel click on Calculated Fields Form and select the Calculated Fields Form option.

Calculated Fields Form

You will see 5 default forms that the plugin provides. They include a variety of functions like a pregnancy calculator. You may find them useful or you may not. Regardless, you can use, edit, clone, or delete them at any time.

Most likely, you are interested in making your own custom forms, so let’s get right into it.

You will see a New Form section. Enter a name and click on the “Add” button.

Add

The form you created will be added to the list of existing forms at the top of the page. Click on the “Settings” button to begin customizing it.

Settings

The form starts off with 3 elements. You can add more as necessary. To do so, simply select the form element you want to add in the Add a Form section.

Select Element

If you click on the “Calculated Form” option, you can customize the appearance of the form. This includes things like alignment, but you can go even further beyond by adding custom CSS. If the design of the form is not your main concern, you can skip this section for now.

Calculated Form

Next, you will see a field named “Number.” This is a default number entry field for the visitors. Click on it. You can change the field label, the size, the format of the numbers (digits, number, percent, etc.), a min and max, predefined value, and more.

Field Type

This might sound like a lot, but it’s pretty simple. For example, say you want to create an entry field for the visitor that asks for their weekly income. You would name the field label “Weekly Income” and fill in the rest of the settings.

How to Create a Formula

The Calculated Value element is where all the magic happens. And when I say magic, I really mean math. This is where you can enter your formula you want your field to calculate.

When you click on the Calculated Value element, you will see a Set Equation text box. This is where you can enter an equation.

enter Equation

By default, the equation is meant to double any number a visitor would enter. In my example, I will change it to multiply the weekly income by 4 to find the monthly income of the individual.

Note: Obviously, you are going to want to enter your own formula. The plugin will not make it work the way you want it to, it must be entered correctly. Thus you may need to refamiliarize yourself with some of the order of operations (PEMDAS).

In my case, I simply need to take the field element that the user can edit and multiply it by four, thus my equation looks like this:[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]fieldname2*4[/ht_message]

Each field name you add will have a different number associated with it, thus you need to locate the proper name. To do so, click on the element and you will see the name section.

Field Name

Once you are done editing the settings click on the “Save Changes” button.

Save Changes

Adding Your Calculated Fields Form

Now all that’s left is to actually place the form. The plugin utilizes shortcodes to accomplish this. You can find the shortcode next to the form list from the previous step.

Copy the shortcode.

Shortcode

Go to any post or page and paste the shortcode. You can then preview the changes on your website.

Calculated Fields Form

Congratulations on setting up the Calculated Fields Form plugin. You can create a variety of forms that visitors may find useful.

Check Your Work

This plugin can add a lot of great features to your website, but one thing it does not do is correct your mistakes. If you enter the information wrong, it will simply give the result as you typed it. This could be something as simple as putting a “+” instead of a “*,” but it can cause big trouble.

This is especially true if this is used for pricing.

If your estimates come out too high as a result or come out much lower than intended, you could create confusion for someone looking to hire you. Thoroughly test the forms you create.

What are you using calculated field forms for?

The post How to Add a Custom Calculator in WordPress with Calculated Fields Form appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/custom-calculator-wordpress-calculated-fields-form/feed/ 1
How to Set Up a Post Like Button in WordPress for Visitors https://www.greengeeks.com/tutorials/post-like-button-wordpress/ https://www.greengeeks.com/tutorials/post-like-button-wordpress/#respond Tue, 19 May 2020 21:33:53 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=34652 As you probably know by now, even though minimalism is very popular, people are still looking for ways to spice up the content they create. […]

The post How to Set Up a Post Like Button in WordPress for Visitors appeared first on GreenGeeks.

]]>
As you probably know by now, even though minimalism is very popular, people are still looking for ways to spice up the content they create. One of the more popular ways to do this right now is to add a like button to your posts. Let’s talk about the best way to do this in WordPress.

The Power of a Like Button

We have all seen it a few times when scrolling through content on certain websites. Yes, there are usually share buttons, or Facebook like buttons, or even other ratings systems put in place. This is all meant to help you interact with the post or page after you have read the content.

When you click on the WordPress like button located within a post, you are letting the author know that you enjoyed the content. This also acts as a driver for other readers, as they see the social interaction and all the likes. This will prompt them to read the content more often because they see so many people have clicked on the like button within the post.

Also, when handled correctly, this can work as a fantastic way to increase social media shares of all your content. Inserting a like button within your WordPress post next to the social media sharing buttons can help increase shares. Or, you can choose to display the like button in WordPress in a different area of the page.

Either way, having a like button on your posts is both visually appealing, and will help your content by giving it a boost with your readers.

There are a few ways you can accomplish this. Yes, you can always build your own like button system by using your own code. However, that will take a lot of time and work.

Today I am going to show you how to set up a like button plugin that you can configure and easily add to any post in your WordPress site. Let’s take a look at the plugin I have selected.

WP ULike

WP ULike plugin

The WP ULike plugin is a lightweight, fast, stylish way to get a like button inserted on your website in no time at all. It comes complete with several eye-catching widget styles. It also has numerous configuration options that will allow you to layout, setup, and style the like button as you see fit.

This is one of the best WordPress like button plugins available for a number of reasons. The plugin allows you to add a like button on posts, comments, activities, forum topics, products, and more.

Note: There is a pro version of the plugin as well. For added functionality, you can check it out if you want to. However, this demonstration is for the free version. The free download will give you everything you need to add a beautiful like button to your website.

This particular WordPress like button plugin is also compatible with almost every plugin and page builder out there. This includes Elementor, which is the number one WordPress page builder on the Internet.

It is packed full of features. Some of the most popular ones include:

  • Display a popup of likes
  • Simple and stylish settings
  • User friendly
  • Detailed statistics and reports
  • Supports custom post types
  • Customize the plugin using code and webhooks
  • Lightweight, fast, and responsive
  • Ajax feature that updates data
  • Visitors don’t have to register to use
  • Shortcode
  • Gutenberg block
  • BuddyPress and bbPress compatible

Note: Yes, the plugin does add a block in the Gutenberg block editor for you to use.

Statistics

Not only does the WP ULike plugin allow you to configure and style a fantastic like button for your website posts, but it also gives you the ability to track statistics. With the built-in, comprehensive statistics tools that are provided, you can easily track what your users love and what they don’t.

Note: The pro version gives you the ability to add a dislike button as well. These statistics would also show in your dashboard.

You can check statistics and reports in several different ways including:

  • Tables
  • Charts
  • Pie Charts

Basically, this plugin gives you everything you need and more to integrate a like button on your website. Let’s take a look at how to get the plugin installed and then configure it together.

Install and Activate Plugin

In order to set up and add a like button to your WordPress posts, you first need to install and activate the plugin. You can do this by going to the plugins page located in your WordPress admin dashboard. Simply search the plugin name and install it from there.

Install and activate like button plugin

Once the plugin has been installed and activated, it will automatically show you a “Welcome Page.”

Like button plugin welcome page

Feel free to read through that if you want. Otherwise, let’s start configuring the plugin. Click on WP Like > Configuration. This will take you to the main settings and configuration page for the plugin.

Click on wp ulike then click on configuration

From here we can configure the like button plugin and set it up together.

Configure the Like Button

At this point, you should be on the main configuration page. You will see a box-like setup, that includes 6 total tabs on the left side of the setup page.

Note: You are already on the “Configuration” tab, and the five sub-tabs beneath it are what we will go through below.

These sub-tabs include:

  • General
  • Content Types
  • Integrations
  • Translations
  • Developer Tools

Let’s run through these together and get you set up.

General

The general tab will have some general choices you need to make regarding how you want the like button plugin to convert and act on your website. Please, fill these out how you see fit for your particular website.

General tab

Content Types

This is where you are going to select the templates and layouts of your like button. The free version allows you to do this for posts, comments, BuddyPress, and bbPress.

Note: BuddyPress or bbPress would need to be installed for that part to apply.

Go ahead and make the selections you want under each category available. You will be able to select a template, button type, positioning, logging method, and more.

Like button content types tab

Note: You can also click on the “Here” link and see available templates that the pro version of the plugin has.

Integrations

Select the integration options you want from this tab. There are only two boxes to view and configure how you want.

Integrations tab

Translations

You can select your text for different plugin responses that users may see. Text can be whatever you want.

Translations tab

Developer Tools

If you know and understand how to write and add custom CSS code, then you can configure and customize the plugin even more from this tab.

Developer tools tab for like button

Make sure you click on the “Save” button after you have gone through and made all your choices. That’s it! You have successfully set up and configured the like button plugin for WordPress.

Final Thoughts

Setting up a like button for your WordPress website is not difficult. You simply need to know the plugin to use and how to set it all up to get it running. Using the WP ULike plugin is a fantastic way to get this operation moving forward.

Not only does this add a component to your posts that allow more interaction, but it should also add value when it comes to social sharing of your content.

Have you had success using a like button on your WordPress site? Is there another plugin you prefer to use?

The post How to Set Up a Post Like Button in WordPress for Visitors appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/post-like-button-wordpress/feed/ 0