Tag - Step

How to Create a Photo Contest in WordPress (Step by Step)


Do you want to run a photo contest in WordPress? Photo contests are a great way to build user engagement and quickly get lots of new visitors to your website.

Photo contests require users to submit a photo to join the contest or giveaway. Active user participation makes them highly engaging and quite fun.

You can run photo contests on almost any kind of website including business websites, online stores, WordPress blog, etc.

In this article, we’ll show you step by step instructions to easily create a photo contest in WordPress.

Easily create a photo contest in WordPress

Step 1. Install and Activate RafflePress

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

You’ll need at least their Pro plan to access the image submit feature.

RafflePress is the best WordPress giveaway / contest plugin on the market. It allows you to easily run viral contests on your website, so you can increase your traffic, email subscribers, and social media followers.

It comes with built-in social actions and integrates with all top email marketing platforms.

Note: RafflePress plugin was built our team, so we can use it on WPBeginner. Due to popular request, we have released it as a plugin for everyone.

Once you have activated RafflePress, the plugin will add a new menu item labeled RafflePress to your WordPress admin sidebar. Clicking on it will take you to the plugin’s settings.

First, you’ll need to enter your plugin license key. You can find this information under your account on the RafflePress website.

Add RafflePress license key

Simply enter the license key and click the ‘Verify license’ button. RafflePress will verify and store your licensing information.

After that, you can move on to create your photo contest.

Step 2. Create Your First Contest

After setting up the plugin, you need to visit RafflePress » Add New page to create your first contest.

RafflePress will launch its contest builder interface. First, you need to enter a title for this campaign and then select a template.

Add a title and select template for your campaign

The templates are pre-made campaigns based on your business goals. You can start with a template and customize it to match your needs. You can also choose the classic template to start with a basic campaign.

We’ll go ahead and select the Classic Template.

On the next screen, click on the prize title to enter your prize details and image.

Enter prize details

After that, you need to select the contest duration under the Start and End time. You can select the date, time, and timezone for your contest duration.

Campaign duration

So far so good.

Now, let’s add some actions. These are the things you want users to do in order to join your contest giveaway.

Switch to the ‘Actions’ tab and you will see a list of actions that you can add to your contest.

For a photo contest giveaway, you would want to add ‘Submit an image’ action.

Submit an image action

Simply click to add the action to your contest. RafflePress will now show you action settings in the left column.

Image action settings

You can provide a title for the action and select the number of entries users will be rewarded for completing it.

You can also make an entry mandatory and even allow users to submit daily entries. Below that, you can provide additional instructions on how users can participate.

Now let’s add some more actions to your contest. This will enable you to stay in touch with those users and build a following.

RafflePress allows you to add social media actions like visit Facebook page, send a tweet, follow on Instagram, and more.

You can also connect your email marketing service to grow your email list.

Step 3. Design Your Photo Contest

RafflePress gives you easy to use design tools to customize the appearance of your photo contest widget.

Simply switch to the Design tab, and you will see options to choose a layout, button color, and fonts for your campaign.

Design your photo contest

If you plan to run the photo contest as a standalone landing page vs embedding it in a blog post, page, or a sidebar widget, then you can also choose the page background color.

RafflePress allows you to add your giveaway to any WordPress post or page. You can also create a custom landing page for your photo contest by using any of the top WordPress page builders and adding your giveaway contest widget there. (more on this later).

Step 4. Configure Contest Settings

After tweaking the design options, switch to the ‘Settings’ tab under the builder to review other settings.

They are all very self-explanatory, but we’ll go through them one by one.

General settings

First, you’ll review the general settings. If you wanted to create a standalone photo contest page, then you can do that here. Provide a name for your campaign page under the Page Permalink option without any spaces.

You can also show and hide the number of entries, contest winners, and the powered by link.

Next, switch to the ‘Giveaway Rules’ tab. This is where you’ll list the rules for joining the giveaway. You can start by clicking on the ‘Generate Rules’ button to automatically generate rules using a sample template.

Generate contest rules

After that, switch to the email verification. From here you can tun email verification on and off. Turning this on would make it compulsory for users to confirm their email address.

Email verification

If you want to add Google Analytics or other tracking codes like Facebook pixel, then switch to the ‘Success Tracking’ tab. Here you can add those codes and track users for on-site and off-site retargeting.

Success tracking

Next comes the Success Redirect tab. This is where you can tell RafflePress to redirect users to a specific page after they have joined the contest.

Success redirect

Finally, you can turn the social login feature On/Off from the social logins tab.

That’s all you have completed the photo contest setup. Don’t forget to click on the Save button to store your campaign.

Step 5. Add Photo Contest Widget to Your Website

RafflePress offers multiple ways to add your contest campaign anywhere on your website.

You can simply edit a post or page or create a new one, and then add the RafflePress block to the Gutenberg editor.

Add RafflePress block

After that, you need to select the giveaway contest you created earlier. RafflePress block will now load a preview of your giveaway widget inside the WordPress content editor.

Giveaway contest widget

You can also add your giveaway by using the shortcode. This comes in handy when you want to display the contest in a sidebar widget, add it to your page builder layout, or use it in the Classic Editor.

Simply edit your giveaway and switch to the ‘Publish’ tab in the builder interface. From here, click on the shortcode option and RafflePress will show the shortcode you can use.

Copy shortcode

Copy the shortcode and edit the post or page where you want to display the giveaway. Simply paste the shortcode inside the post editor and you are done.

If you want to display it in a sidebar widget, then go to Appearance » Widgets page and add a Text widget to your sidebar.

Add shortcode widget

After that, simply paste the shortcode inside the widget settings and click the save button.

You can now visit your website to see the photo contest widget in the sidebar.

Photo contest widget in sidebar

Step 6. Publicize Your Photo Contest Giveaway

For a successful photo contest, you’ll need to plan ahead. Start promoting the event beforehand through social media, a blog post, and your email newsletter.

You can also add a countdown timer banner to create FOMO effect and build anticipation.

We recommend adding the contest widget to your sidebar because it allows users to see it before the contest begins.

Step 7. Announcing The Photo Contest Winners

Once you have added the photo contest giveaway to your website, it would automatically go live at the date and time you choose.

After that, you can go to RafflePress » Giveaways and click on the Image Entries link below your photo contest campaign.

Image entries

You’ll now see all the images submitted to the contest. You can pick the winners or let RafflePress choose a winner randomly.

Again go back to the RafflePress » Giveaways page and click on the Need Winners link next to your giveaway.

Random winners

RafflePress will now randomly select a winner for your giveaway.

Winner selected

You can now notify the winner via email and let them know how to claim their prize.

We hope this article helped you learn how to easily create a photo contest in WordPress. You may also want to see our other practical tips to quickly get more traffic to your WordPress blog.

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.



Source link

How to Find and Fix Broken Links in WordPress (Step by Step)


Everyone agrees that broken links are bad for user experience. But did you know that broken links can significantly hurt your WordPress SEO rankings?

Yes, it’s proven that having broken internal links on your website negatively impacts SEO rankings.

In this article, we will show you how to easily find and fix broken links in WordPress, so you can improve your user experience and SEO rankings.

Finding and fixing broken links in WordPress

What is a Broken Link?

A broken link, also known as dead link, is a link that no longer works. Broken links can happen for many reasons, but the most common reason is when a page is either deleted or moved to a different location which causes the server to show a 404 not found error.

On WordPress sites, broken links typically occur when moving a site to new domain name, or when deleting a post or page without proper redirection.

Sometimes broken links can also happen due to a typo, and they can go unnoticed for months if not years.

This is why it’s extremely important to regularly monitor broken links on your site and fix them, so you can keep them from hurting your SEO rankings.

In this guide, we will share top four methods to find broken links in WordPress. After that, we will show you an easy way to fix those broken links.

Here’s a table of content for easy navigation:

Ready? Let’s get started.

SEMRush is one of the best SEO tool on the market. It allows you to easily monitor your website’s SEO rankings and overall health.

It also includes a powerful site audit tool that crawls your website to find common errors and prepare a detailed report for you.

First, you’ll need to sign up for a SEMRush account.

It is a paid service, but they do offer a limited free account which allows you to crawl up to 100 pages on one domain name. Paid plan limits start from 100,000 pages a month.

Once you are logged in, you need to click on the ‘Site Audit’ link from the left menu.

This will bring you to the Site Audit page. From here, click on the ‘New Site Audit’ button at the top to add your website.

Adding a new site audit in SEMRush

You will be asked to enter your domain name. After that, you will be asked to configure site audit settings. You can select the number of pages to crawl and choose a crawl source.

Site Audit settings

Click on the start crawling button to continue.

SEMRush will now begin crawling your website for the site audit. This may take a few minutes depending on how many pages you selected for the crawl.

Once finished, you can click on your domain Under the Site Audit section to view your report.

SEMRush broken links

To see the broken links on your site, you will need to click on the ‘Broken’ link under the report overview.

Broken links report in SEMRush

You can now click on the Export button at the top right corner of the screen to download your crawl report. You will need it when fixing broken links on your website (more on this later in the article).

Ahrefs is an excellent all-in-one SEO tool for marketers, businesses, and SEO professionals. It offers detailed SEO insights into your own website or any of your competitors.

You can use it for keyword research, competition analysis, organic and paid keyword ideas, and site health monitoring including broken links.

First, you’ll need to sign up for an Ahrefs account. It is a paid service with plans starting from $99 per month. They also offer a full featured 7 day trial for $7.

Once you are logged into your Ahref’s dashboard, you need to enter your domain name under the Site Explorer tool.

Ahrefs site explorer tool

Site explorer tool will now crawl your website to prepare reports. This may take some time depending on how much content you have on your website.

Once finished, you’ll see an overview of your site explorer results. From here, you need to click on the Pages » Best by Links menu and then sort your report by 404 status.

Broken links

You can now export your report in CSV format to fix the broken links on your WordPress site.

Google Search Console is a free tool offered by Google to help webmasters manage their site’s visibility in search results. It also notifies you about errors including 404 errors which are caused by a broken link.

For more details, see our ultimate Google Search Console guide with step by step set up instructions.

After you have logged in to your Google Search Console account, click on the ‘Coverage’ link from the left menu.

Google Search index coverage report

You’ll find 404 errors either under Errors or Excluded tabs. Clicking on them will show you a list of errors or issues Google encountered while visiting your website.

Excluded broken links

Clicking on the 404 error will show you all the links on your website that are broken links and return a 404 error.

You can now click on the download button to get the list of all 404 errors on your website. You’ll need this to fix broken links on your website.

For this method, we’ll be using the Broken Link Checker plugin. However, this method is not recommended because it is resource-intensive and will slow down your website. Managed WordPress hosting companies like WP Engine already block users from installing this plugin on their servers.

The plugin checks for broken links on your website including both internal and external links that are resulting in a 404 error.

First, you’ll need to install and activate the Broken Link Checker plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will start working in the background to find links in your posts, pages, and comments. You can now go to Tools » Broken Links page to view the full report.

Broken Links Report in WordPress

If you have been running your WordPress blog for a long time, then this report will include broken links to third-party websites as well.

You will have to manually sort the list to find broken links on your website.

You will need to keep Broken Link Checker active on your website until you fix broken links. After that, you can deactivate the plugin because it will keep checking for broken links which will slow down your server.

We have shown you four different methods to find broken links in WordPress. Now let’s talk about how to easily fix broken links in WordPress.

The best way to fix a broken link is to redirect it to another page. For example, if you moved the contents of an article to a different address, then you will need to redirect it to the newer article.

Similarly, if an article does not exist anymore, then you would want to point users to a similar page that is closely related to the contents of the old article.

You can do this by setting up 301 redirects.

First, you will 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 page to set up redirects. You need to add the old broken link in the ‘Source URL’ field and the new URL in the ‘Target URL’ field.

Set up redirects for broken links

After that, click on the ‘Add redirect’ button to save your changes.

You can now test this by visiting the old broken link, and you’ll be redirected to the new page.

Repeat the process for all broken links on your website.

For more information, see our guide on how to set up redirects in WordPress for beginners.

We hope this article helped you learn how to easily find and fix broken links in WordPress. You may also want to see our actionable tips on how to optimize your images for web, and our pick of the best WordPress membership plugins to create a membership site.

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.



Source link

How to Change Your WordPress Site URLs (Step by Step)


Do you need to change your WordPress URL? Whether you’re moving from HTTP to HTTPs, changing your domain name, migrating from local server to live site, or transferring to a subdomain, you will need to know how to change your WordPress site URL.

The WordPress address and site address are extremely important fields because they reference the address of your website on the internet and the location of your website files.

In this article, we will share four different ways to easily change your WordPress site URLs (step by step). This guide will specially come in handy when you are fixing common WordPress errors or moving a WordPress site.

Easily change your WordPress site URLs

Why Change WordPress Site URLs?

There are many reasons why you might need or want to change your WordPress URL. For example:

Apart from that, you may need to change the WordPress address settings if you are seeing too many redirects error in WordPress or when troubleshooting another WordPress error.

WordPress Address vs Site Address

When changing WordPress site URL, you will need to update two separate settings: WordPress Address and Site Address.

This can be confusing for many beginners because they don’t know what’s the difference between the two settings.

Your WordPress Address (URL) is the address where WordPress files and folders are stored including your admin pages, media files, plugins, themes, etc.

Your Site Address (URL) in WordPress is the public facing part of your website. This is what your visitors will type in to reach your website. This is also the link that you put on your business cards.

For majority of users, the WordPress Address and Site Address URL will be the exact same link.

However in some cases, large companies may host their WordPress site on a different server because their corporate website has many other applications, and they want to isolate where each app is hosted.

But for majority of users, these two WordPress URLs need to stay the same.

That being said, let’s take a look at how to easily change WordPress site URLs. We will show you the following methods, and you can choose the one that works best for you.

Ready? let’s get started.

Method 1. Change WordPress Site URLs from Admin Area

This method is the easiest. If you can already access the WordPress admin area, then we recommend using this method.

Simply login to your WordPress website and go to Settings » General page. From here you can change WordPress site URLs under the ‘WordPress Address’ and ‘Site Address’ options.

Change WordPress site URLs in the admin area

WordPress Address and Site Address are usually the same address.

Don’t forget to click on the ‘Save Changes’ button to store your settings. You can now visit your website to make sure that everything is working OK.

Method 2. Change WordPress Site URLs Using functions.php File

This method is recommended for users who cannot access the admin area of their WordPress website.

Simply connect to your WordPress site using an FTP client and go to /wp-content/themes/your-theme-folder/.

Edit WordPress functions file

From here you need to locate the functions.php file and edit it using a plain text editor like Notepad or TextEdit.

Next, you need to add the following code at the bottom:


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

Don’t forget to replace https://example.com with your own site URLs. You can now save your changes and upload the file back to your website hosting using FTP.

You can now visit your website to see if everything is back to normal.

The advantage of this method is that it updates the site URLs in the database. WordPress updates the database option for site URLs every time your functions file is loaded.

Once everything gets back to normal, don’t forget to remove the two lines of code from your WordPress functions file.

Method 3. Change WordPress Site URLs Using wp-config.php File

This method is only recommended if you are unsure which WordPress theme you need to edit or cannot find the functions.php file.

For this method, you will be adding the site URLs to your WordPress configuration file called wp-config.php. This file is located in the root folder of your website and contains important WordPress settings.

Simply connect to your website using an FTP client and edit the wp-config file. You need to add the following code just above the line that says ‘That’s all, stop editing! Happy publishing’.


define( 'WP_HOME', 'https://example.com' );
define( 'WP_SITEURL', 'https://example.com' );

Don’t forget to replace https://example.com with your own domain name.

You can now save your changes and upload them back to your server. After that, visit your website to make sure that everything is working fine.

Method 4. Change WordPress Site URLs in the Database Using phpMyAdmin

Another way to update WordPress site URLs is by changing them directly in your WordPress database.

First, you need to make a WordPress database backup. This step is really important and will help you undo database changes in case anything goes wrong.

After that, you need to go to your web hosting account’s dashboard and click on the phpMyAdmin icon under the Databases section.

Note: Our screenshot is from Bluehost but most other WordPress hosting companies will also have the ability for you to edit database settings.

phpMyAdmin

Once you click the link, it will launch the phpMyAdmin app, which provides a web-based interface to edit MySQL databases. To learn more about it, see our guide on how to WordPress database management with phpMyAdmin

Inside phpMyAdmin interface, you need to click on your WordPress database from the left column. The app will now display tables inside your WordPress database.

Edit options table

Next, you need to scroll down to the options table. By default the database prefix is wp_ but since you can change WordPress database prefix, your screenshot may have a different prefix.

PhpMyAdmin will now display the rows inside the options table. You need to locate the rows where option_name is siteurl and home.

Edit siteurl and home values

Next, click on the pencil icon on the left to edit each row and change the option_value field to the new site URL. After that, click on the tiny Go button at the bottom right corner to save your database changes.

Edit option_value

You can now visit your website to see if everything is working fine.

Frequently Asked Questions (FAQs)

Over the years we have helped hundreds of thousands of users create a WordPress website, start a blog, or start an online store. In this time, we have answered many different questions related to changing WordPress URLs. Below are some of the most frequently asked questions.

Why are my WordPress Address and Site Address fields greyed out?

If the WordPress address (URL) is greyed out on the settings page of your admin area, then it means that the URLs are hard coded in the wp-config.php file.

WordPress Address URL Greyed Out

To change your WordPress URL, you will need to follow method 3 in our article to edit the wp-config.php file and change the URL accordingly.

How to recover WordPress after url address change in settings?

Sometimes non-techy users can accidentally change WordPress URL and Site Address settings from the WordPress admin area. To recover from that, you will have to follow our guide above to change the WordPress URLs back using functions.php, wp-config, or the database method.

Is there a WordPress change URL plugin that can bulk update URLs in all blog posts, pages, and other content areas?

Yes, you can either use the Velvet Blues Update URLs plugin or the Better Search Replace plugin.

When you change your WordPress URL, you will need a way to bulk update links through your WordPress posts, pages, and other areas in your database. The above plugins are a huge time saver.

Aside from using them to update URLs when moving websites, we also use them for various other platform migrations such as moving from WordPress.com to WordPress.org, Blogger to WordPress, Weebly to WordPress, etc.

We hope this article helped you easily change the WordPress site URLs. You may also want to see our guide on the must have WordPress plugins, and how to speed up 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.



Source link

How to “Easily” Add Anchor Links in WordPress (Step by Step)


We occasionally use anchor links in our longer WordPress posts to help users quickly jump to the section they want to read.

Anchor links are often used in the table of content sections because they help users move up and down a lengthier article without reloading the page. It can also help with SEO as Google may show them below your search listings for easy navigation (more on this later).

In this step by step guide, we will explain what are anchor links and show you how to easily add anchor links in WordPress.

Adding anchor links in WordPress

Ready? Let’s start with a live example of anchor links.

Below is a list of all the topics we will cover in this guide. Go ahead and click on any of these links, and you’ll be taken to that specific section.

An anchor link is a type of link on the page that brings you to a specific place on that same page. It allows users to jump to the section they’re most interested in.

Take a look at the animated screenshot below:

Anchor link preview

As you can see, clicking on the anchor link takes the user to the specific section on the same page.

Anchor links are commonly used in lengthier articles as the table of content which allows users to quickly jump to the sections they want to read.

Why and when you should use anchor links?

An average user spends less than a few seconds before deciding if they want to stay or leave your website. You have just those few seconds to convince users to stay.

The best way to do that is to help them quickly see the information they’re looking for.

Anchor links make this easier by allowing users to skip the rest of the content and jump directly to the part that interests them. This improves user experience and helps you win new customers / readers.

Anchor links are also great for WordPress SEO. Google can display an anchor link in the search results as a “jump to link”.

Jump to link in search results

Sometimes Google can also display several links from that page as jump to links, and this is proven to increase the click-through rate in search results. In other words, you get more traffic to your website.

Multiple jump to links below a search result

Having said that, let’s take a look at how to easily add anchor links in WordPress.

If you just want to add a few anchor links in your article, then you can easily do so manually.

Basically you need to add two things for an anchor text to work as intended.

  1. Create an anchor link with a # sign before the anchor text.
  2. Add the id attribute to the text where you want the user to be taken.

Let’s start with the anchor link part.

Step 1. Creating an anchor link

First you need to select the text that you want to link and then click on the insert link button in the WordPress Gutenberg editor.

Add a link in WordPress

This will bring up the insert link popup where you usually add the URL or look for a post or page to link.

However, for an anchor link, you’ll simply use # as prefix and enter the keywords for the section you want the user to jump to.

Creating anchor link

After that click on the enter button to create the link.

Some helpful tips on choosing what text to use as your anchor # link:

  • Use the keywords related to the section you are linking to.
  • Don’t make your anchor link unnecessarily long or complex.
  • Use hyphens to separate words and make them more readable.
  • You can use capitalization in anchor text to make it more readable. For example: #Best-Coffee-Shops-Manhattan.

Once you add the link, you will be able to see the link you have created in the editor. However, clicking on the link doesn’t do anything.

That’s because the browsers cannot find the anchor link as an ID.

Let’s fix that by pointing browsers to the area, section, or text that you want to show when users click on the anchor link.

Step 2. Add the ID attribute to the linked section

In the content editor, scroll down to the section that you want the user to navigate to when they click on the anchor link. Usually, it is a heading for a new section.

Next, click to select the block and then in the block settings click on the Advanced tab to expand it. You can simply click on the ‘Advanced’ tab under the heading block settings.

HTML Anchor

After that, you need to add the same text that you added as the anchor link under the ‘HTML Anchor’ field. Make sure that you add the text without the # prefix.

You can now save your post and see your anchor link in action by clicking on the preview tab.

What if the section you want to show is not a heading but just a regular paragraph or any other block?

In that case, you need to click on the three-dot menu on the block settings and select ‘Edit as HTML’.

Edit as HTML

This will allow you to edit the HTML code for that particular block. You need to select find the HTML tag for the element you want to point to. For example, <p> if it is a pagraph, or <table> if it is a table block, and so on.

Now, you need to add your anchor as the ID attribute to that tag, like the following code:


<p id="best-coffee-shops-manhattan">

You will now see a notice that this block contains unexpected or invalid content. You need to click on the convert to HTML to preserve the changes you made.

Convert to HTML

How to Manually Add Anchor Link in Classic Editor

If you are still using the older classic editor for WordPress, then here is how you can add the anchor link.

Step 1. Create the anchor link

First, select the text that you want to change into the anchor link and then click on the ‘Insert Link’ button.

Adding an anchor link in Classic Editor

After that, you need to add your anchor link with a # sign prefix followed by the slug you want to use for the link.

Step 2. Add the ID attribute to the linked section

The next step is to point the browsers to the section you want to show when users click on your anchor link.

For that, you’ll need to switch to the ‘Text’ mode in the classic editor. After that scroll down to the section that you want to show.

Adding anchor ID in Classic Editor

Now locate the HTML tag you want to target. For example, <h2>, <h3>, <p>, and so on.

You need to add the ID attribute to it with your anchor link’s slug without the # prefix, like this:


<h2 id="best-coffee-shops-manhattan">

You can now save your changes and click on the preview button to see your anchor link in action.

How to Manually Add Anchor Links in HTML

If you are used to writing in the Text mode of the old Classic Editor in WordPress, then here is how you would manually create an anchor link in HTML.

First, you need to create the anchor link with a # prefix using the usual <a href=""> tag, like this:


<a href="#best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</a>

Next, you need to scroll down to the section that you want to show when users click on the link.

Usually, this section is a heading (h2, h3, h4, etc.), but it could be any other HTML element or even a simple paragraph <p> tag.

You need to add the ID attribute to the HTML tag, and then add the anchor link slug without the # prefix.


<h2 id="best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</h4>

You can now save your changes and preview your website to test the anchor link.

This method is suitable for users who regularly publish long-form articles and need to create table of contents with anchor links.

The first thing you need to do is install and activate the Easy Table of Contents plugin. For more details, see our step by step guide on how to install a WordPress plugin.

This plugin allows you to automatically generate a table of contents with anchor links. It uses headings to guess the content sections, and you can customize it fully to meet your needs.

Upon activation, simply go to Settings » Table of Contents page to configure plugin settings.

Easy Table of Contents plugin settings

First, you need to enable it for the post types where you want to add table of contents. By default, the plugin is enabled for pages, but you can also enable it for your posts as well.

You can also enable the auto-insert option. This allows the plugin to automatically generate the table of contents for all articles, including the older articles that match the criteria.

If you only want to automatically generate table of contents for specific articles, then you can leave this option unchecked.

Next, scroll down a little to select where you want to display the table of contents and when you want it to be triggered.

Select where and when to display table of contents

You can review other advanced settings on the page and change them as needed.

Don’t forget to click on the ‘Save Changes’ button to store your settings.

If you enabled the auto-insert option, then you can now view an existing article with the specified number of headings.

You’ll notice that the plugin will automatically display a table of contents before the first heading in the article.

If you wanted to manually generate table of contents for specific articles, then you need to edit the article where you want to display a table of contents with anchor links.

On the post edit screen, scroll down to the ‘Table of Contents’ tab below the editor.

Manually add table of contents with anchor links

From here, you can check the ‘Insert table of contents’ option and select the headings you want to include as anchor links.

You can now save your changes and preview your article. The plugin will automatically display a list of anchor links as your table of contents.

Table of contents preview

For more detailed instructions, see our article on how to add table of contents in WordPress.

We hope this article helped you learn how to easily add anchor links in WordPress. You may also want to see our tips on how to properly optimize your blog posts for SEO and our pick of the best WordPress page builder 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.



Source link

How to Add a Search Bar to WordPress Menu (Step by Step)


Do you want to add a search bar to your WordPress navigation menu?

By default, WordPress lets you add a search section on your website sidebar, footer, and other widget-ready areas. However, many users prefer to have the WordPress search box in the navigation menu because it is easily noticeable on the top.

In this article, we will show you how to easily add a search bar to your WordPress menu without having any coding knowledge.

Adding a Search Bar to WordPress Menu

Why You Should Add a Search Bar in Menu?

A site search makes it easy for your users to find what they’re looking for without leaving your website. It helps improve user experience on your website and boosts engagement.

This is why most usability experts recommend adding a search option in the navigation menu, so users can easily find it.

However, the default WordPress search widget is limited to only widget-ready areas.

Luckily, there are many different WordPress search plugins which let you add the search bar to different locations on your site including menus.

For this tutorial, we have chosen the Ivory Search free plugin. It allows you to create new custom search forms and enhance the default WordPress search.

With that said, let’s take a look at how to add a search bar to your WordPress menu.

Adding a Search Bar to WordPress Menu

First thing you need to do is to install and activate the Ivory Search plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Ivory Search » Search Forms page to create a new search form.

Ivory Search Include Options

The plugin automatically adds the default search form, so you can quickly review its settings and add it to your WordPress menu.

Search settings allow you to select which content on your website should be included in the site search.

The ‘Includes’ section lets you choose which post types, posts, pages, category, custom fields, etc. should be included in the search query. You need to review the options and click the Save Form button.

Next, there is the ‘Excludes’ section, which lets you define the content that you don’t want to show in search results. Once done, click the Save Form button again to store your settings.

Ivory Search Exclude Options

The ‘AJAX’ section lets you enable AJAX functionality for your search form.

Ivory WordPress Search Bar AJAX Settings

The ‘Options’ section lets you define how many results to show per search page along with other advanced settings.

Define Search Results Per Page in Ivory Search Plugin

Now your custom WordPress search form is ready. Once again, don’t forget to save your settings.

After that, the next step is to add the search form to your navigation menu. Simply go to Ivory Search » Settings page to configure the search bar to your WordPress menu.

On this page, you will see the ‘Select Menu’ tab. From here, you can simply toggle the menu where you would like to add the search bar.

Select WordPress Menu to Show Search Bar

This list of menus (Primary Menu and Footer Menu) belongs to your WordPress template. If you change the template of your site, then the list will be automatically updated with the available menus from your template.

After that, you can choose the search style from the Form Style accordion below.

The plugin allows you to display the search form in five different styles: Default, dropdown, sliding, full width, and popup.

Ivory Search Form Styles

If you like, you can further customize the options by going to the ‘Settings’ section below ‘Menu Search’.

From there, you can add your search form to the header, footer, manage mobile display for search, and more. These settings will also help in controlling the search results for your users.

Ivory Search More Settings

Once you are satisfied, make sure to save your settings. After that, you can head over to your website to see the search bar in the WordPress navigation menu.

Search Bar in WordPress Menu Preview

We hope this article helped you learn how to add a search bar to a WordPress menu. You may also want to see our list of most useful tips to speed up WordPress and boost performance.

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 Search Bar to WordPress Menu (Step by Step) appeared first on WPBeginner.



Source link

How to Add Infinite Scroll to your WordPress Site (Step by Step)


Do you want to add infinite scroll to your WordPress blog?

Infinite scroll is a web design technique which automatically loads your next page content when users reach the bottom of a page. It allows users to see more content on your blog without clicking on the pagination or ‘Load More’ button.

In this article, we will show you how to easily add infinite scroll on your WordPress blog (step by step).

Adding Infinite Scroll to Your WordPress Blog Easily

What is Infinite Scroll?

Infinite scroll is a web design trend which uses AJAX page load instead of numeric page navigation to automatically load your next page content and display it at the end of current page. Infinite scrolling makes it easier to browse more content by simply scrolling down. It loads content continuously and infinitely as users keep scrolling.

Traditionally, users would have to click on ‘next,’ ‘previous’ buttons or page numbers to see older blog articles.

When using AJAX short for Asynchronous Javascript and XML, webpages can communicate with the server without reloading the entire page. It enables web apps to process user requests and deliver data without refresh.

The best examples of infinite scroll design are the popular social media sites such as Facebook, Twitter, Instagram, Pinterest, and more. If you are using any of them, then you know how content loads endlessly on your social media timeline.

Is Infinite Scrolling Suitable for Every Website?

Many content websites on the internet are using infinite scroll technique to improve the browsing experience and increase engagement. This leads many beginners to ask the questions like is it suitable for every website, or is it good for my site?

Infinite scrolling is excellent for sites that present content in a timeline or feed, like the social media apps. It offers a fantastic browsing experience to the users looking for time-based content.

Next, infinite scroll design is perfect for mobile and touch devices. For mobile users, scrolling is more user-friendly than taping on tiny page links.

Touchscreen Web Interaction

The most significant advantage of infinite scroll technique is a smooth browsing experience. Users don’t need to click on the pagination links manually. Content loads quickly with scrolling and keeps users engaged.

But on the other side, it can also make your site navigation harder. With continuous loading, it is hard to figure out where (on which page) a blog article is. Some users even find it overwhelming to see many articles all at once.

Another disadvantage of infinite scroll design is that you cannot have a footer. Even if you have it, it will be hidden under endless articles continuously loading. Many sites add essential links on the footer, so not having it can disappoint some users.

Perhaps the most concerning issue with infinite scrolling is that it can slow down your website or even crash the server. When we added infinite scroll to one of our smaller blogs, we experienced server crash after users scrolled unnecessarily causing memory exhaustion on a small WordPress hosting account. We recommend that you use managed WordPress hosting if you’re looking to try infinite scrolling.

Now that you know the pros and cons of infinite scroll design, you can decide whether you need to add it to your blog or not.

If you have decided to add infinite scrolling to your WordPress blog, then you can do it easily. We will be showing you multiple plugins that you can use, so you can choose the one that best suits your needs.

Adding Infinite Scroll to Your WordPress Blog with Catch Infinite Scroll

First thing you need to do is install and activate the Catch Infinite Scroll plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, WordPress will add a new menu item labeled ‘Catch Infinite Scroll’ to your WordPress admin panel. You need to click on it to configure the plugin settings.

Catch Infinite Scroll Settings

First, you can choose a trigger option for loading articles. The plugin lets you load content automatically as users scroll down the page or add a ‘Load More’ button.

Load on Scroll or Click - Catch Infinite Scroll Plugin Settings

You should select the ‘Scroll’ option to trigger autoload with scrolling. Alternatively, you can select the ‘Click’ option if you want to add a load more button.

Next, you can see the navigation selector, next selector, content selector, and item selector. You don’t need to change anything on these options because default options work quite well.

After that, there is an Image option where you can add content loader icon. By default, it has a loader GIF image. If you have a better picture, then you can change it.

Upload a New Loading Image for WordPress Infinite Scroll

‘Finish Text’ option includes the message which will be shown once a user completes viewing your articles. By default, the text says ‘No more items to display.’ You can easily edit this text as needed.

Articles Loading Finished - Finish Text Option Catch Infinite Scroll

Once done, click on the Save Changes button.

That’s it! The infinite scrolling is now active on your blog. You can visit your blog and see the infinite scrolling in action.

WordPress Infinite Scroll Preview

Alternative WordPress Plugins to Add Infinite Scroll in WordPress

Catch Infinite Scroll works well with most of the WordPress themes; however, it can fail with some themes. In such a scenario, you can use any of the following infinite scroll WordPress plugins.

1. Ajax Load More

Ajax Load More settings

Similar to Catch infinite Scroll, Ajax Load More plugin also lets you add endless scroll and clickable Load More buttons to your WordPress site.

The plugin offers more customization options, including many page loading icon styles, button styles, etc. For a detailed guide, you can see our tutorial on creating a load more posts button in WordPress using Ajax Load More plugin.

However, the plugin has some learning curve for beginners. It has an advanced interface with many options, including repeater template, shortcode builder, WordPress queries, and more.

It will require some coding skills to apply infinite scrolling with this plugin.

2. YITH Infinite Scrolling

YITH Infinite Scrolling is a simple alternative to Ajax Load More or Catch Infinite Scroll plugin.

Similar to Catch Infinite Scroll plugin, it has minimal options to set up scroll-based web interaction on your site. You just need to install and activate the plugin and enable infinite scrolling.

YITH Infinite Scrolling Plugin Settings

Anyone, including beginners, can easily set up infinite scrolling using this plugin. However, it doesn’t have a ‘Load More’ button option, which is included in the other two plugins mentioned above.

We hope this article helped you to learn how to add infinite scroll design to your WordPress blog. You may also want to see our guide on how to add scroll-depth tracking 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 Infinite Scroll to your WordPress Site (Step by Step) appeared first on WPBeginner.



Source link

How to Add a Mortgage Calculator in WordPress (Step by Step)


Recently one of our readers asked about adding a mortgage calculator in WordPress.

A mortgage calculator is a useful tool for real estate websites because it allows visitors to see if they can afford the property they’re looking at.

In this article, we will show you how to easily add a mortgage calculator in WordPress.

Adding a Mortgage Calculator in WordPress

What is a Mortgage Calculator? Who Needs It on Their Website?

A mortgage calculator is a tool that allows users to get estimates for their mortgage payment, with interest rate and amortization period.

With a mortgage calculator, your website visitors can select a monthly payment or period, and the mortgage calculator form will calculate the costs based on a given interest rate.

If you are making a real website with IDX property listings, then a mortgage calculator will help you get more leads and increase user engagement on your website.

That being said, let’s take a look at how to easily create a mortgage calculator in WordPress.

Creating a WordPress Mortgage Calculator – (Step by Step)

Adding a mortgage calculator in WordPress used to be quite difficult. Either you had to add a piece of code to your site or install a third-party mortgage calculator service.

Now, with Formidable Forms, you can easily create a mortgage calculator with a drag and drop interface.

Formidable Forms Advanced WordPress form plugin

Formidable Forms is the most advanced WordPress form builder plugin on the market. It allows you to create advanced forms like an online quiz, web directory, job listings, calculators and more.

Formidable makes it easy to build advanced forms without writing code. You can use features like conditional logic, advanced calculations, file uploads, repeater fields, dynamic pre-filled fields, and more.

It comes with super useful pre-made templates for more than 20 types of forms. We will be using their mortgage calculator template as a starting point for this tutorial.

Let’s get started.

First thing you need to do is to install and activate the Formidable Forms plugin. For more details, see our step by step guide on how to install a WordPress plugin.

You’ll need at least their Business plan to use the mortgage calculator feature.

Upon activation, you need to click on the ‘Add your license key now’ option to enter your license details.

Add Your Formidable Forms Pro License Key

This will take you to the Global Settings page where you’ll need to enter your Formidable Forms license key.

Save Your Formidable Forms License key

You can find the license key in your account area on the Formidable Forms website.

Once done, you will see the license activation success message. Now you can simply refresh your page to load the premium features.

After that, go to Formidable » Forms to add a new form. There, you will see a Contact Us form already added by default. Go ahead and click on the ‘Add New’ button to create a new mortgage calculator form.

Add New Formidable Form

On the next page, you will see many pre-made templates which help you quick get started. You need to locate the mortgage calculator template under the Premium Templates section.

You will notice that there are two mortgage calculator templates available: Simple Mortgage Calculator and Advanced Mortgage Calculator.

Let’s start with the Simple Mortgage Calculator first.

Place your mouse pointer over the template, and then it will show you two buttons: Create Form and Preview.

Choose Simple Mortgage Calculator Template

You need to click on the ‘Create Form’ button. This will bring up up a popup window where you need to add a name and description, and then click on the ‘Create’ button.

Create New Simple Mortgage Calculator Form

The plugin will now load the Formidable Forms editor interface with your selected simple mortgage form calculator template.

WordPress Simple Mortgage Calculator Form Builder

From here you can simply point and click to customize each form field as needed.

For example, you can change the field label and default value for the Mortgage Amount field.

Customizing Simple Mortgage Calculator Field Options

However, you need to be careful about the last field ‘Monthly Payment’ because it includes the calculation formula as the default value.

If you are not a calculation expert, you need to leave it unchanged.

Customizing Monthly Payment Field Options Formidable Mortgage Calculator

After reviewing all your form fields, click on the Update button at the top right corner of the screen. After that you can click on the Close icon to exit the form editor.

Simple Mortgage Calculator Successfully Created

Your simple mortgage calculator is now ready. The next step is to add it to a page or post where you want to show the calculator.

Simply create a new page/post or open an existing one to add the mortgage calculator. On your page editor, click on the ‘Add New Block’ icon, and then select Formidable Forms Gutenberg block.

Add Formidable Forms Block in WordPress Page Editor

After that, you can see the Formidable Forms block added to your page editor.

Next, you need to select the Simple Mortgage Calculator form in the dropdown option, and WordPress will load the form automatically.

Adding Simple WordPress Mortgage Calculator to Page Editor

After that, you can publish or update your page, and then preview it to see how the simple mortgage calculator works.

For example, here is how it looks on our demo website.

Simple WordPress Mortgage Calculator Preview

Creating an Advanced Mortgage Calculator in WordPress

The simple mortgage calculator shown above is good for basic mortgage calculation. However, if you want to calculate taxes, insurance payments, PMI, loan to value ratio, etc, then you will need an advanced mortgage calculator for your real estate website.

With Formidable Forms, making an advanced mortgage calculator is also a quick and straightforward job.

First, you need to visit Formidable » Forms page and click on the Create New button to add a new form.

Add New Formidable Form

After that, take your mouse over the Advanced Mortgage Calculator template and click on the Create Form button.

Select Advanced Mortgage Calculator Template Formidable Forms

Next, WordPress will open a popup window where you can enter a name and description for your form and then click on the ‘Create’ button.

Advanced Mortgage Calculator Editor in Formidable Forms

Now you can customize each form field by clicking on it.

When you click a field, the Field Options will appear in the left column. From there, you can change the field label, default value, etc.

Customizing Field Options in Advanced Mortgage Calculator Form

You can review and edit the Advanced Options of Financial Analysis fields. However, if you don’t know the calculation formulas then its best to leave them untouched.

Calculation Fields in Advanced Mortgage Calculator Formidable Forms

Once you are done, click on the Update button at the top right corner, and then click the Close icon.

Your advanced mortgage calculator form is ready; you can now add it your WordPress posts, pages, sidebars, or property listing pages

On your page editor, click on the ‘Add New Block’ icon and then select Formidable Forms block.

Add Formidable Forms Block in WordPress Page Editor

Simply edit a post, page, or listing and add the Formidable Forms block to your content editor.

From the block settings, select the Advanced Mortgage Calculator form that you created earlier. After that, WordPress will automatically load the mortgage calculator on the page editor.

Add Advanced WordPress Mortgage Calculator to Page Editor

Now you can publish or update your page and preview it to see how your mortgage calculator looks. Here is how the Formidable Forms advanced mortgage calculator looks on our demo website.

Advanced WordPress Mortgage Calculator Preview

As shown in the screenshot above, the Advanced Mortgage Calculator lets your users enter the home value, loan information including amount, interest rate, amortization schedule, annual taxes, insurance, and PMI.

The plugin will then calculate the data and display monthly payments, duration, and other information.

We hope this article helped you learn how to add a mortgage calculator in WordPress. You may also want to see our list of the best email marketing services and best business phone services for small business.

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 Mortgage Calculator in WordPress (Step by Step) appeared first on WPBeginner.



Source link

How to Display Recent Tweets in WordPress (Step by Step)


Do you want to display your recent Tweets in WordPress? Integrating Twitter to your WordPress website helps increase engagement on both platforms.

Your blog visitors discover your tweets which helps you get new followers on Twitter. On the other hand, your Twitter followers discover more of your content, which increases traffic to your website.

In this article, we’ll show you how to easily display recent tweets in WordPress. We will also cover how to show selective tweets in WordPress.

How to Display Recent Tweets in WordPress

Adding Your Recent Tweets in WordPress – Step by Step

You can display your recent tweets in WordPress by simply embedding your Twitter profile or timeline.

Just like adding a YouTube video, WordPress also makes it easy to embed Twitter content like a single tweet, collection, list, likes, and moment into your website.

WordPress uses the oEmbed feature, which automatically turns any content URL into an embed code when pasted in the content area.

The most common place to display your recent tweets is usually your blog’s sidebar. Let’s start with that.

Adding Your Recent Tweets to Your WordPress Sidebar

First, you need to find and copy the URL of the Twitter profile that you want to embed. The Twitter profile URL is simply the combination of Twitter website URL and your Twitter username.

For example, the Twitter profile URL of WPBeginner is https://twitter.com/wpbeginner.

Twitter Profile URL

Next, log into your WordPress dashboard and go to Appearance » Widgets page. Simply drag and drop the text widget to your sidebar and then paste the Twitter profile URL that you copied earlier in the text area.

Paste Twitter Profile URL to WordPress text widget

Once done, it will immediately turn into a Twitter timeline widget showing recent Tweets from that particular account.

Save Your Recent Tweets Widget in WordPress

After that, you can name your widget, save it, and preview it live on your site. Here’s how our recent tweets appear on our demo website.

Recent Tweets in WordPress Demo Site - With Text Widget

As you can see in the screenshot above, this method adds your recent tweets inside a box with a vertical slider. The box includes 20 most recent tweets and the ‘Load more Tweets’ button at the end.

Embedding Twitter Feed in WordPress with Twitter Publish

Replacing the Twitter widget feature, Twitter now has Twitter Publish feature for embedding Twitter content into websites.

Twitter Publish lets you easily create the embed code for various types of Twitter content, including a tweet, collection, profile, list, moment, hashtag, etc.

Twitter Publish for Embedding Tweets into Websites

To use this method, you need to visit the Twitter Publish website and then paste your Twitter profile URL in the ‘What would you like to embed?’ box.

Enter Twitter Profile URL in Twitter Publish

Once done, click on the arrow icon.

After that, it will ask you to choose a display option: Embedded Timeline or Twitter Buttons. Choose the ‘Embedded Timeline’ as you want to show your Twitter timeline with recent tweets.

Twitter Publish Display Options

Upon selecting the display option, it will instantly create the embed code for your recent tweets. Now click on the Copy Code button.

Copy Twitter Embed Code from Twitter Publish

Next, you need to go to Appearance » Widgets from your dashboard and add the ‘Custom HTML’ widget to your sidebar area. After that, paste the embed code that you copied earlier in the HTML field.

Paste the Twitter Profile Embed Code in Custom HTML widget

Once done, save your widget and see your recent tweets live on your website.

Here’s how our Twitter feed looked on a test site.

Recent Tweets in WordPress - Demo Website

Embedding Your Recent Tweets in WordPress Blog Posts

Sometimes you may need to embed your Twitter timeline in your blog posts or your about page.

WordPress comes with a Twitter embed block for the new WordPress block editor.

Simply create a new post or edit an existing one. On the post edit screen, add the Twitter embed block in your content area.

Add Twitter Embed Block in WordPress Editor

Now you need to paste your Twitter profile URL and click the ‘Embed’ button.

Embed Twitter Timeline in WordPress Post

After that, WordPress will automatically fetch and display your recent tweets in the content area.

Twitter Profile Embedded in WordPress Post

This method adds a Twitter feed with a scrollbar in your post.

Alternatively, you can also use the Twitter Publish method, which will allow you to show recent tweets without the scrollbar.

Go to the Twitter Publish website and paste your Twitter profile URL in the ‘What would you like to embed?’ box and click the arrow next to it.

Enter Twitter Profile URL in Twitter Publish

After that, choose the ‘Embedded Timeline’ option and then copy the embed code.

Copy Embed Code for Twitter Profile

Next, you need to add the ‘Custom HTML block in your post editor to paste the embed code.

Add Custom HTML Block in WordPress Editor

Now you can paste the embed code you copied earlier.

Paste the Twitter profile Embed Code in Custom HTML Block

Once done, save your post and preview it live.

Showing Selective Tweets in WordPress

Embedding your Twitter profile will show all your recent posts on your website. What if you wanted to show the selected tweets only?

Don’t worry, there are simple solutions for that too. There are mainly 5 ways to embed selected tweets into your website.

  • Collection: Show a curated collection of tweets according to topics, interests, conversations, and more.
  • List: Display tweets by a curated group of Twitter users.
  • Likes: Show all tweets a specific Twitter user has marked as likes.
  • Moment: Show tweets from a public moment by a Twitter user.
  • Hashtag: Display tweets by anyone containing a specific hashtag.

Among these options, you can create the last four selections right from the Twitter website. Also, you can copy their respective URL and paste in your WordPress sidebar using the text widget.

For example, you can find your Twitter lists in your Twitter profile page. Select any one list you want to embed and click on it.

WPBeginner Twitter Lists

Upon clicking on the link, the list will open, and you can copy the list URL from your browser. For example, the URL of our Twitter list ‘WordPress Experts’ is https://twitter.com/wpbeginner/lists/wordpress-experts.

Now you can paste this URL in your WordPress sidebar.

Add Twitter List in WordPress Text Widget

Similarly, you can find the URLs of likes, moment, and hashtag from your Twitter profile page, and easily embed into your WordPress site.

However, you need to use Twitter’s advanced TweetDeck feature to create a collection. A Twitter collection is a list of tweets organized under a topic by a user.

Visit TweetDeck website and sign in with your Twitter account. When the TweetDeck dashboard opens, click on the ‘Add Column’ button on the left panel.

Add Column in TweetDeck Application

Next, you need to choose the ‘Collection’ option.

Choose Collection Option in TweetDeck

After that, you can name your new Twitter collection.

Create New Collection in TweetDeck

Once done, you will see a new column added to your TweetDeck dashboard.

Drag Tweets to Twitter Collection

Now, you can drag tweets from your Twitter home or any user account and create your collection.

Once you have added tweets in your collection, you can embed it into your website. Click on the Options icon and then click the Share option. After that, select the ‘Embed Collection’ option.

Embed Collection from TweetDeck

Upon clicking on Embed collection, the Twitter Publish page will open with the embed code for your Twitter collection.

Copy Embed Code for Twitter Collection

Copy the embed code, and then paste it into your website using the Custom HTML widget.

Embed Twitter Collection with Custom HTML Widget

Once done, save your widget and see your Twitter collection live on your website.

We hope this article helped you to learn how to show recent tweets in WordPress and how to show selective tweets in WordPress. You may also want to see our list of the best social media plugins for 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.



Source link

How to Create Compact Archives in WordPress (Step by Step)


By default, WordPress comes with a widget called Archives, which allows you to display monthly blog post archive links.

Now, if you started a blog few years ago, then this list becomes too long to fit in your WordPress sidebar.

You can choose to show archives as a drop-down menu, but that makes them less noticeable.

In this article, we will show you how to create compact archives that fit in anywhere you want and look much better.

Creating compact archives in WordPress

Why and When You Need Compact Archives in WordPress?

As we mentioned earlier, the default WordPress archives widget is limited in options. You can either display archives as a long list or a dropdown menu.

Due to this issue, many popular blogs don’t display archives on their website at all.

By creating compact archives, you can display them in your WordPress sidebar without taking much space. You can also display them on your about page or a dedicated Archives section.

That being said, let’s take a look at how to easily add compact archives in WordPress.

Adding Compact Archives in WordPress

First thing you need to do is install and activate the Compact Archives plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Compact Archives plugin is developed and maintained by the WPBeginner team. We use it on our own website and recently updated it to add Gutenberg block support.

The plugin offers three styles to display compact archives on your website.

Style 1. Relaxed three-letter month initials

Three letter monthly archives

Style 2. Compact Monthly Initials

Compact archives with initials only

Style 3. Numeric Block

Numeric archives

There are multiple ways to easily display them anywhere on your website.

Let’s start with the easiest one.

Adding Compact Archives in WordPress Posts or Pages

Compact Archives plugin comes with an easy to use Gutenberg block called WPBeginner’s Compact Archives.

If you’re using the new Gutenberg editor in WordPress, then simply edit the post or page where you want to display the archives and add the WPBeginner’s Compact Archives block to your post or page.

Compact Archives block

The block will now appear in the content area of your page. You can click to add a title for your compact archives block and select a style from the block settings on the right.

Compact Archives block settings

Adding Compact Archives to WordPress Sidebar

Another common place to display archive links is your blog’s sidebar. Compact Archives makes it easy to display archive links in your WordPress website without taking too much space in the sidebar.

Simply head over to Appearance » Widgets page and add ‘Compact Archives’ widget to your sidebar.

Contact Archives widget

After that, you can provide a widget title and select a style. Don’t forget to click on the save button to store your settings.

You can now visit your website to see compact archives displayed in your blog’s sidebar.

Display Compact Archives Using a Shortcode

If you are using the older Classic WordPress editor, then you will not be able to use the block to add compact archives in WordPress posts or pages.

Don’t worry, you can still add it by using a handy shortcode.

Simply edit the post or page where you want to display the archives and add the following shortcode.

[compact_archive]

This shortcode will simply show your compact archives. The shortcode accepts the style, before, and after parameters.

To display your compact archives in the block format, you will use this shortcode:

[compact_archive style="block"]

You can also add your own HTML before or after the archives.

In the following shortcode, we have displayed the compact archive in numeric format and wrapped it around paragraph tags.

[compact_archive style="numeric" before="<p>" after="</p>"]

Displaying Compact Archives in Template Files

If you are making a custom WordPress theme or want to display archives in a theme template file, then Compact Archives comes with handy template tags that you can use.

Simply add the following template tag in your code.

<ul> <?php compact_archive(); ?> </ul>

There are also several parameters that you can adjust:


<ul>
<?php compact_archive($style='initial', $before='<li>', $after='</li>'); ?> 
</ul>

These are the same parameters that you can use with the shortcode.

For example, $style == 'initial' will display only month name initials and should fit right inside a sidebar. Using $style == 'block', will fit the main column of a page. Using $style == 'numeric', will display numeric months.

We hope this article helped you easily create compact archives in WordPress. You may also want to see our guide on how to easily create an email newsletter in WordPress to promote your website.

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.



Source link

How to Add Image Credits in WordPress (Step by Step)


Recently, some of our readers asked us about how to properly add image credits in WordPress.

Image credits are a way to let users know about the original creator of the image that you are using on your website. It shows good faith and also protects you from legal issues.

In this article, we will show you how to properly add image credits in WordPress. We will also talk more about why it is important, and what are the consequences of not doing it.

Adding image credit and attribution in WordPress

When and Why Add Image Credits in WordPress?

Images are highly engaging, and they make your blog posts look visually appealing. However, you cannot just copy any image from the web and add it to your blog posts.

All images on the internet are protected by copyright laws. You can only use them with permission from the copyright owner.

Some photographers and artists occasionally release their work under licenses that allow others to use their images. However, often these licenses require you to give proper credit to the original creator.

Why Adding Image Credit is Important?

All images on the internet are protected by copyright laws including the ones where you cannot see a copyright notice. This means you cannot use them on your website without permission.

If the image author specifically states that their photos can be re-used under licenses like creative commons, then you must add image credit and provide proper attribution to the original work.

It is really important to give proper image credit to comply with the copyright laws and avoid infringing upon someone’s rights.

It is a show of respect for other people’s work and creativity. It also protects you against legal issues and liabilities caused by violating intellectual property rights and copyright laws.

What are the Consequences of Not Giving Image Credits?

Many beginners believe that the internet is very large, and no one would even notice that they have used an image without permission.

This used to be true in the old days where you could get away with stealing images, but things are changing fast.

Now, there is an entire industry of lawyers who’re focused on recovering image copyright claims. They use reverse image search tools to send bulk cease and desist mails along with settle demand letters.

We know several bloggers and business owners who have paid hundreds of dollars in damages just for a single image.

If you are serious about growing your business online, then you need to take copyright laws seriously from day one.

Copyright laws are applicable globally. This means they apply regardless of where you or the original creator lives.

As mentioned above, the first most serious consequence is that you can be sued for violation of copyright laws. These legal troubles can cost a lot of money and may even destroy your website, and its reputation.

Copyright laws also apply to search engines like Google and web hosting companies.

The original copyright owner can file a DMCA complaint against your website to search engines which will force them to remove that content from search results.

They can also ask your hosting provider to remove the content in which case they will be legally obliged to ask you for the removal of the image. Some companies may just suspend your hosting account and inform you later.

How to Properly Add Image Credits in WordPress

WordPress lets you easily add image credits below an image. Here is how to properly add image credits in WordPress without using any extra plugin.

First, you need to upload the image to your WordPress post or page. Simply add an image block to the content editor and then click on the upload button to select an image from your computer.

Adding an image block to upload a new image in WordPress

You can also select a previously uploaded image by clicking on the media library button.

Once you select an image, it will automatically appear in the post editor. Below the image, you’ll see a prompt to ‘Write a caption’.

Write a caption

Captions can be used to describe an image or photograph. They can also be used to add image credit and give proper attribution to the original copyright owner.

Format caption credit and add links

You can add image credit text in the caption field. Some copyright owners may require you to also add a link back to the original source.

If they do, then you can simply click on the insert link button and add the link to the original file.

Once you are done, you can go ahead and save your changes.

To learn more about using captions, see our article on how to add captions to images in WordPress.

How to Find the Image Credit and License Information

Most images you’ll find on the internet do not contain licensing information. This means that you don’t have permission to use those images.

Luckily, there are many websites where you can find images to use. However, some of these image websites may require you to provide attribution or image credit.

You can find this information on the image download page. For example, this is how Flickr shows licensing information on the image page.

Licensing information for an image on Flickr

Clicking on the link will provide you more details about the license. It will also describe if you need to give credit and how to properly do that.

License information

How to Avoid Giving Image Credits in WordPress

You need to carefully read the license to understand how you are required to provide the image credit.

Most such licenses will explicitly require you to provide a link back to the original source.

Adding links to the photographer’s website or the photo is a bit problematic. In most cases, the link is not relevant to the actual content on your website. It would allow users to leave your website, and they may not come back.

This is why we recommend using royalty-free stock photo websites.

These websites curate photographs, images, and illustrations that do not require image credit. You can also use these images on business websites.

Following are our top picks for free stock photo websites:

  • Unsplash – A large collection of royalty-free photographs neatly organized in categories and tags.
  • Pixabay – One of the largest and most popular license-free images and photos
  • Public Domain Archive – A collection of images and photographs available under public domain
  • Picjumbo – Another large collection of royalty-free images
  • New Old Stock – A collection of vintage photographs that are now available under public domain

For more options, see our complete list of the best places to find free stock photos.

On WPBeginner, we extensively use Shutterstock which is a premium stock photo and illustration website.

The problem with stock images though is that these images are already used on thousands of websites. You may also struggle with finding the right image to accompany your articles.

The simplest way to fix this is by using your own original photographs and graphics. The challenge is that most users are not graphic designers.

Luckily, there are websites that allow you to easily create graphics to use on your website. These image editors come with drag and drop tools and ready-made templates to give you a good starting point.

Following are some of the best online graphic editing tools for beginners.

  • Canva – An easy to use graphic design tool for beginners to create custom logos, banners, images, infographs, charts, and more.
  • Piktochart – Easy to use tool to make beautiful presentations, banners, charts, and graphics
  • Pablo – Allows you to create beautiful graphics for social media and blogs.
  • PicMonkey – Another easy to use image editor for bloggers

We hope this article helped you learn how to add image credit in WordPress and why it is important. You may also want to see our guide on how to optimize your images for SEO and get more traffic.

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 Image Credits in WordPress (Step by Step) appeared first on WPBeginner.



Source link