How to Embed Medium Blog Posts in WordPress

Do you want to embed Medium article posts on WordPress?

Medium is a popular blogging platform that allows you to easily publish articles on the internet. However, you may want to display those posts on your WordPress website as well.

In this article, we’ll show how to easily embed Medium article posts in WordPress.

Why Embed Medium Article Posts in WordPress?

Medium is a popular blogging platform that allows you to easily publish articles on the internet.

However, one downside of using Medium is that it doesn’t give you the same flexibility as a WordPress website.

For this reason, you may want to embed your Medium articles on WordPress.

WordPress is more flexible, you can use it to make any type of website and monetize your content any way you see fit.

How to Embed Medium Articles in WordPress

Normally, WordPress uses the oEmbed format to embed third party content from supported websites like YouTube, Twitter, and more.

Unfortunately, Medium doesn’t support oEmbed format, which makes it difficult to embed Medium articles in WordPress. There used to be plugins that allowed users to display their Medium articles on a WordPress blog, but they either don’t work, or they’re no longer maintained due to low demand.

So now, the only way to embed your Medium articles in WordPress is by using the RSS block or widget.

First, you need to find your Medium publication’s RSS feed. Usually, it is located at a URL like this:

https://ift.tt/lh9Mcpf

If you are using a custom domain for your Medium publication, then your RSS feed would be located at:

https://ift.tt/WhBGsL0

Next, you need to edit the WordPress post or page where you want to embed Medium posts and add the RSS block to the content area.

After that, add your Medium RSS feed URL in the block settings.

WordPress will then fetch your recent Medium articles and display them. Under the block settings, you can choose to show excerpt, featured image, author, and date options.

The problem with this method is that you can’t embed a specific Medium article by itself. The block will automatically show you the latest Medium posts only.

If you would like more flexibility and freedom, then perhaps you should consider migrating your Medium articles to WordPress.

How to Migrate Medium Articles to WordPress

Migrating your Medium articles to WordPress would allow you to take advantage of all the flexibility and features of WordPress.

WordPress is the most popular website builder on the market. It powers more than 43% of all websites on the internet.

For more details, see our article on why you should use WordPress to make your website.

Step 1. Set Up Your WordPress Website

If you haven’t already done so, then you’ll need to set up a WordPress website first.

There are two types of WordPress websites: WordPress.com which is a blogging platform, and WordPress. org which is also called self-hosted WordPress. For more details, see our article on the difference between WordPress.com vs WordPress.org.

We recommend using self-hosted WordPress as it gives you complete freedom to build your website however you choose.

To get started, you’ll need a domain name and a WordPress hosting account.

Fortunately, Bluehost has agreed to offer WPBeginner users a free domain name and a generous discount on hosting. Basically, you can get started for $2.75 per month.

→ Click Here to Claim This Exclusive Bluehost Offer ←

After signup, Bluehost will send login details to your email address which will allow you to login to your Bluehost dashboard.

You’ll notice that Bluehost has already installed WordPress for you.

You can now go ahead and simply login to your new WordPress website.

Step 2. Import Your Medium Articles to WordPress

Before you can import your Medium articles to WordPress, you’ll need them in the format supported by WordPress.

Medium doesn’t provide a tool to do that by default. But it does allow you to export your content in an unsupported format.

Simply login to your Medium account and click on your profile photo. From here, click on the Settings link.

This will take you to the settings page where you need to scroll down to the ‘Download Your Information’ section.

Click on the ‘Download zip’ button to export your Medium data.

On the next page, you need to click on the export button. Medium will then prepare your download and send a link to you via email.

After you have downloaded the export file, you need to visit the Medium to WordPress Importer tool. It is a free online tool that converts your medium export file into a WordPress-compatible format.

First, you need to provide your Medium profile URL, your name, and email address.

If your blog is using a custom domain on Medium, then you need to enter your custom domain URL.

Now, if you are using your Medium profile URL, then you’ll be asked to upload the Medium export file you downloaded in the earlier step.

Next, click on the ‘Export My Medium Website’ button to continue.

The Medium to WordPress Importer will now prepare your export file. Once finished, it will show you a success message with a button to download your WordPress-ready Medium export file.

You can now download the file to your computer.

After that, switch to your WordPress website and go to the Tools » Import page.

You will see a list of importers available for different platforms. You need to scroll down to WordPress and then click on the ‘Install Now’ link.

WordPress will now fetch and install the importer plugin.

Once finished, you need to click on ‘Run Importer’ to launch it.

On the next screen, click on the ‘Upload file and import’ button to continue.

The WordPress importer will now upload your Medium export file and analyze it.

On the next screen, it will ask you to assign authors.

You can import the author from your Medium website, create a new author, or assign all content to your existing WordPress user.

Don’t forget to check the box next to ‘Download and import file attachments’ option. It will attempt to get images from your Medium website into your WordPress media library.

You can now click on the Submit button to run the importer. Upon completion, you will see a success message.

Congratulations, you have successfully imported content from Medium to WordPress!

You can now go to the posts page in your WordPress admin area to double check if all your content is there.

Step 3. Import Images from Medium to WordPress

The WordPress importer tries to import images from your Medium articles to the WordPress media library. However, it may fail due to the way Medium displays images in your articles.

To see all the images that have been imported successfully, simply go to the Media » Library page.

If some or all of your images failed to import, then you will need to import them again.

To do that, you first need to install and activate the Auto Upload Images plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to update the posts containing the external images. This update will trigger the plugin to fetch and store the external images in the article.

You can also bulk update all articles at once to quickly import all images. For detailed instructions, see our step by step tutorial on how to import external images in WordPress.

Step 4. Setting up Redirects for Medium Articles

If your Medium publication uses a medium.com URL, then you cannot setup redirects.

However, if you were using a custom domain for your Medium publication, then you can set up custom redirects in WordPress.

First, you will need to get all URLs of your Medium articles and save them in a text file. After that, you need to start setting up redirects for all your articles.

There are multiple ways to set up redirects in WordPress. You can follow the instructions in our beginner’s guide to creating redirects in WordPress for detailed instructions.

Step 5. Deciding What to Do With Your Medium Articles

Now, having the same articles on two different websites will affect their search engine optimization (SEO) since Google will consider them duplicate content. That means that your new WordPress site may not get any search engine traffic.

To avoid this, you can simply deactivate your Medium account. Deactivating an account keeps all your data on Medium, but it becomes publicly unavailable.

Simply click on your Profile icon under your Medium account and then select Settings.

From settings page, scroll down to the Security section.

Then, click on the Deactivate Account link at the bottom of the page.

Bonus Step: Promoting Your Medium Articles on WordPress

Now that you have migrated your articles from Medium to WordPress, here are a few tools to promote your articles.

1. All in One SEO – The best WordPress SEO plugin to easily optimize your blog posts for search engines.

2. SeedProd – Enjoy the endless design options with the best WordPress page builder. It allows you to easily create beautiful landing pages for your website.

3. WPForms – Make your website interactive by adding beautiful contact forms. WPForms is the best WordPress contact form plugin with a drag and drop interface to create any kind of form you need.

4. OptinMonster – The best conversion optimization software on the market. OptinMonster allows you to easily convert website visitors into subscribers and customers.

5. MonsterInsights – Start tracking your website visitors from day one. MonsterInsights is the best Google Analytics plugin for WordPress. It allows you to see your most popular content and where your users are coming from.

For more, see our expert pick of the must have WordPress plugins for all websites.

We hope this article helped you learn how to embed Medium article posts on WordPress. You may also want to see our guide on how to get a free email domain, or our expert pick of the 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 Embed Medium Blog Posts in WordPress first appeared on WPBeginner.

June 16, 2022 at 04:00PM

How to Fix a Slow Loading WordPress Dashboard (Step by Step)

Is your WordPress dashboard loading too slow?

Having a slow loading WordPress dashboard is annoying, and it hurts overall productivity when it comes to creating content and managing your website. Also the underlying cause of a slow WordPress dashboard can also impact your website conversions.

In this article, we’ll show you how to easily fix a slow loading WordPress dashboard, step by step.

What Causes a Slow Loading WordPress Dashboard?

A slow loading WordPress dashboard can be caused by a number of reasons, but the most common one is limited server resources.

Most WordPress hosting providers offer a set number of resources for each hosting plan. These resources are enough to run most websites.

However, as your WordPress website grows, you may notice slight performance degradation or slower loading across the board. That’s because more people are now accessing your website and consuming server resources.

For the front end section of your website which is what your visitors likely see, you can easily install a WordPress caching plugin to overcome WordPress speed and performance issues.

However, the WordPress admin area is uncached, so it requires more resources to run at the optimal level.

If your WordPress dashboard has become annoyingly slow, then this means a WordPress plugin, a default setting, or something else on the site is consuming too many resources.

That being said, let’s take a look at how to troubleshoot and fix the slow loading WordPress admin dashboard.

Here is an overview of the steps we’ll cover in this article.

• Install WordPress Updates
• Update the PHP Version Used by Your Hosting Company
• Increase PHP Memory Limit
• How to Test Performance of WordPress Admin Area
• Monitor WordPress Plugins for Performance
• Install a WordPress Caching Plugin
• Tweak Admin Screens & Disable WordPress Dashboard Widgets
• Fix Slow Loading WooCommerce Dashboard
• Block Access to WordPress Admin and Login Pages
• Control Autosave Intervals
• Switch to Better WordPress Hosting

1. How to Test Performance of WordPress admin area

Before making any changes, it’s important to measure the speed of your WordPress admin area, so you can get an objective measurement of any improvement.

Normally, you can use website speed test tools to check your website’s speed and performance.

However, the WordPress admin area is behind a login screen, so you cannot use the same tools to test it.

Luckily, many modern desktop browsers come with built-in tools to test the performance of any web page you want.

For example, if you’re using Google Chrome, then you can simply go to the WordPress dashboard and open the Inspect tool by right-clicking anywhere on the page.

This will split your browser screen and you will see the Inspect area in the other window either at the bottom or side of your browser window.

Inside the Inspect tool, switch to the Lighthouse tab and click on the Generate Report button.

This will generate a report similar to the Web Vitals report generated by Page Speed Insights.

From here, you can see what’s slowing down your WordPress admin area. For instance, you can see which JavaScript files are taking up more resources and affecting your server’s initial response time.

2. Install WordPress Updates

The core WordPress team works hard on improving performance with each WordPress release.

For instance, the block editor team tests and improves performance in each release. The performance team works on improving speed and performance across the board.

If you are not installing WordPress updates, then you are missing out on these performance improvements.

Similarly, all top WordPress themes and plugins release updates that not only fix bugs but also address performance issues.

To install updates, simply go to Dashboard » Updates page to install any available updates.

For more details, see our guide on how to properly update WordPress (infographic).

3. Update the PHP Version Used by Your Hosting Company

WordPress is developed using an open-source programming language called PHP. At the time of writing this article, WordPress requires at least PHP version 7.4 or greater. The current stable version available for PHP is 8.1.6.

Most WordPress hosting companies maintain the minimum requirements to run WordPress, which means they may not be using the latest PHP version out of the box.

Now, just like WordPress, PHP also releases new versions with significant performance improvements. By using an older version, you are missing that performance boost.

You can view which PHP version is used by your hosting provider by visiting the Tools » Site Health page from your WordPress dashboard and switching to the ‘Info’ tab.

Luckily, all reliable WordPress hosting providers offer an easy way for customers to upgrade their PHP version.

For instance, if you are on Bluehost, then you can simply login to your hosting control panel and click on the Advanced tab in the left column.

From here, you need to click on the MultiPHP Manager icon under the Software section.

On the next page, you need to select your WordPress blog and then select the PHP version that you want to use.

For other hosting companies, see our complete guide on how to update your PHP version in WordPress.

4. Increase PHP Memory Limit

Your web hosting server is like any other computer. It needs memory to efficiently run multiple applications at the same time.

If there is not enough memory available for PHP on your server, then it would slow down your website and may even cause it to crash.

You can check the PHP memory limit by visiting Tools » Site Health page and switching to the Info tab.

You’ll find PHP memory limit under the Server section. If it is less than 500M, then you need to increase it.

You can increase PHP memory limit by simply entering the following line in your wp-config.php file.

define( 'WP_MEMORY_LIMIT', '512M' );

For more details, see our article on increasing the PHP memory limit in WordPress.

5. Monitor WordPress Plugins for Performance

Some WordPress plugins may run inside the WordPress admin area. If plugin authors are not careful, their plugins can easily consume too many resources and slow down your WordPress admin area.

One way to find out about such plugins is by installing and activating the Query Monitor plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item to your WordPress toolbar.

Clicking on it will show performance results for the page you are currently viewing on your website.

This will bring up the Query Monitor console.

Here you need to switch to ‘Queries by Component’ tab on the left side. From here, you can see the performance impact of plugins and find out which one is taking up too many resources.

You can now temporarily disable the slow plugins and see if that improves performance.

If it does, then you can reach out to plugin author and seek support or find an alternative plugin.

6. Install a WordPress Caching Plugin

WordPress caching plugins not only improve your website speed, but they can also help you fix a slow loading admin dashboard.

A good WordPress caching plugin helps you optimize page load speed, CSS and JavaScript delivery, your WordPress database, and more.

This frees up resources on your WordPress hosting server that your WordPress admin area can utilize for improved performance.

We recommend using WP Rocket. It is the best WordPress caching plugin on the market. It works out of the box and makes it super easy to optimize your WordPress performance.

For more details, see our guide on how to properly install and setup WP Rocket in WordPress.

7. Tweak Admin Screens & Disable WordPress Dashboard Widgets

WordPress automatically loads some widgets on the dashboard screen. This includes Quick Draft, Events and News, Site Health, and more.

Some WordPress plugins add their own widgets to the dashboard screen as well. If you have a lot of these widgets loading on your dashboard, it could slow things down.

You can turn off these widgets by simply clicking on the Screen Options button and unchecking the box next to the widgets.

Similarly, you can use the Screen Options menu to show and hide sections on different admin screens.

For instance, you can choose the columns you want to see on the posts screen.

8. Fix Slow WooCommerce Admin Dashboard

If you run an online store using WooCommerce, then there are some specific WooCommerce features that can affect the performance of your WordPress admin area.

For instance, you can turn off the WooCommerce dashboard widget by clicking on the Screen Options menu.

Similarly, you can change the information displayed on the Products page.

After a while, your WooCommerce store may add unnecessary data to your WordPress database.

If you are already using WP Rocket, then you can simply switch to the Database tab under plugin settings. From here, you can delete transients and optimize your WordPress database with a click.

9. Lock WordPress Admin Area and Login Pages

Random hackers and DDoS attacks are common internet nuisances that can affect WordPress websites.

These automated scripts access WordPress login pages and attempt to login hundreds of times in a short amount of time.

They may not be able to gain access to your WordPress website, but they would still be able to slow it down.

One easy way to block these scripts is by locking your WordPress admin directory and login pages.

If you are on Bluehost, then you can simply go to your hosting control panel and switch to the Advanced Tab. From here, you need to click on the Directory Privacy icon.

Next, you need to locate wp-admin directory (usually found inside public_html folder).

Then simply click on the Edit button next to it.

Next, you will be asked to provide a name for your protected directory.

Click on the Save button to continue. The control panel will save your options and you’ll need to click on the Go Back button to continue.

After that, you will need to create username and password for the protected folder.

Now, when you visit your WordPress admin area, you will be prompted to enter username and password.

For more details, see our tutorial on how to password protect the WordPress admin directory.

Password Protect WordPress Login Page

Next, you would want to block access to WordPress login page. For this, you’ll need to manually edit .htaccess file on your website and generate a password file.

First, connect to your WordPress website using an FTP client or the File Manager app inside your hosting control panel.

After that, go to the root folder of your website (the root folder is where you can see the wp-admin, wp-includes, and wp-content folders).

Here you need to create a new file and name it .htpasswd.

Next, you need to visit this online tool to generate a .htpasswd string.

You need to use the same username and password that you used for the WordPress admin directory.

Then click on the Generate button.

The tool will generate a username and password string under the output box.

You need to copy and paste this string inside the .htpasswd file you created earlier.

Next, you need to edit the .htaccess file and copy and paste the following code inside it.

### BEGIN BASIC BLOCK
<Files wp-login.php>
AuthType Basic
AuthName "Protected Folder"
AuthUserFile /home/username/public_html/yourwebsite/.htpasswd
Require user jsmith
Satisfy All
</Files>
### END BASIC BLOCK

Don’t forget to replace jsmith with your own username and change AuthUserFile value with the path to your .htpasswd file. You can find it inside the File Manager app.

You can now visit your WordPress login page to see the password protection in action.

10. Manage WordPress Autosave Intervals

The WordPress block editor comes with built-in autosave feature. It allows you to easily restore your content in case you close the editor without saving your changes.

However, if multiple users are working on your website during peak traffic, then all those autosave requests will slow down WordPress admin area.

Now autosave is a crucial feature and we don’t recommend turning it off. However, you can slow it down to reduce the performance impact.

Simply add the following line to your wp-config.php file.

define( 'AUTOSAVE_INTERVAL', 120 )

This line simply tells WordPress to run autosave once every 2 minutes (120 seconds) instead of 1.

Reduce Heartbeat API Calls

WordPress uses something called the heartbeat API to send Ajax calls to a server without reloading a page. This allows WordPress to show other authors that a post is being edited by another user, and it enables plugin developers to show you notifications in real-time.

By default, the API pings back every 60 seconds. If multiple authors are working on your website at the same time, then these server calls can become resource-intensive.

If you are already using WP Rocket, then it will automatically reduce heartbeat API activity to pingback every 120 seconds.

Alternately, you can also use their standalone plugin called Heartbeat Control to reduce Heartbeat API calls.

We recommend reducing them to at least 120 seconds or more.

11. Upgrade or Switch to Better WordPress Hosting

All WordPress performance issues depend on the infrastructure provided by your WordPress hosting providers.

This limits your ability to improve performance to the resources offered by your hosting provider.

The above tips will certainly help you reduce load on your WordPress server, but it may not be enough for your hosting environment.

To improve performance even more, you can move your WordPress site to a new host and sign up with a different hosting provider.

We recommend using Bluehost, as one of the top WordPress hosting companies. Their shared hosting plans come with built-in caching which improves WordPress performance.

However, as your website grows you may need to upgrade your hosting plan.

High traffic sites would benefit from moving to a managed WordPress hosting platform like WP Engine or SiteGround.

At WPBeginner, we use SiteGround to host our website.

We hope this article helped you learn how to fix a slow loading WordPress dashboard. You may also want to see our complete WordPress security handbook or see our pick of the best WordPress plugins to grow your 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 Fix a Slow Loading WordPress Dashboard (Step by Step) first appeared on WPBeginner.

June 15, 2022 at 04:00PM

How to Display WordPress Form Entries on Your Site

Do you want to show your WordPress form entries on the front end of your site?

Displaying form entries on the front end allows you to show important information to your visitors. You can use it to show positive reviews, create directories, display event calendars, and more.

In this article, we’ll show you how to display WordPress form entries on your site.

Why Display WordPress Form Entries on the Frontend?

Forms are great for keeping in touch with your visitors, getting feedback and suggestions, helping users resolve their issues, and more. Displaying form entries on your WordPress website for your visitors can be helpful in certain situations.

For example, you can display testimonials and product reviews that users submit through an online form. This way, you can leverage social proof to build brand trust and boost conversions.

You can also display form entries to create a business directory, display user-submitted events on a calendar, display statistics, and show other important information collected through online forms on your website.

However, by default, when users submit a form on your WordPress website, their entries are kept private. Only the WordPress admin and other users who have permission can view the form entries.

Let’s see how you can show form entries on the front end of your WordPress website using Formidable Forms and WPForms. You can click the links below to jump ahead to your preferred section.

• Displaying WordPress Form Entries With Formidable Forms (Easy Way)
• Displaying WordPress Form Entries With WPForms (Advanced)

Displaying WordPress Form Entries by Using Formidable Forms

The easiest way of showing form entries in WordPress is using Formidable Forms. It is a popular WordPress contact form plugin and offers an all-in-one form builder with lots of features for customization.

You can create all kinds of forms like surveys, quizzes, payment forms, and advanced forms like event calendars, directories, and calculators.

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

For this tutorial, we’ll be using the Formidable Forms Pro version because it includes the Visual Views addon.

Upon activation, you can go to Formidable » Forms and click the ‘+ Add New’ button at the top.

After that, a popup will appear that will ask you to select a form type, like a contact us form, user registration form, survey, and more.

Go ahead and select your preferred form type. For the sake of this tutorial, we’ll create a contact form to collect testimonials from users.

Next, you’ll need to enter a form name and description.

When you’re done, simply click the ‘Create’ button.

Now you can use the form builder to customize your form.

Formidable offers a drag and drop builder which is super easy to use. Simply select any form field you would like to add to your form from the options on your left and place them in the form template.

After customizing your contact form, go ahead and embed it anywhere on your website.

The plugin offers multiple options to add your form. The easiest way is to click the ‘Embed’ button in the form builder at the top and then select an existing page or create a new page to add your form.

Alternatively, you can also use a Formidable Forms block or a shortcode block in the WordPress content editor to embed your forms.

Next, you can give a name to your page and preview it.

When you’re satisfied with its appearance, go ahead and publish your page.

After your form is live, and you start to get entries, then you’ll need to install and activate the Visual Views addon in Formidable Forms.

To do that, simply go to Formidable » Add-Ons from your WordPress dashboard. Next, scroll down to the ‘Visual Views’ addon and click the ‘Install’ button.

Once the addon is active, you can go to Formidable » Views from your WordPress dashboard.

After that, simply click the ‘+ Add New’ button at the top.

Next, a popup window will appear where you’ll need to select a view type. The plugin offers a grid, table, calendar, and classic view that you can use.

For this tutorial, we’ll use the ‘Grid’ view to show form entries.

After that, you will have to select a data source for your view.

Go ahead and click on the ‘Use Entries from Form’ dropdown menu and select your form. There’s also an option to enter a view name.

After selecting your data source, simply click the ‘Create a view’ button.

This will launch the view builder in Formidable Forms.

To get started, go ahead and click the ‘Layout Builder’ button.

Next, you’ll need to select a layout to display your form entries.

Simply choose a layout from the given options at the top. You can add multiple layouts to show form entries.

After selecting a layout, go ahead and click the ‘Save layout’ button.

Next, you can add content to the view builder by clicking the ‘+’ button. There are options to customize the layout of the form entries and add content before and after the form entries.

The plugin also gives options to change the typography, background color, border, and more under the Grid Style Settings panel on your left.

You’ll also see a shortcode under the View Name field, which you’ll need when showing form entries on your site.

There are more advanced options in the Grid Style Settings panel. In the advanced settings, you can limit the number of entries, page size, and more.

When you’ve customized the view, don’t forget to click the ‘Update’ button at the top.

Next, you’ll need to display your form entries on your WordPress website. To do that, copy the shortcode given under the View Name.

The shortcode will look like this:

[display-frm-data id=2410]

After that, go to any post or page where you’d like to display form entries. Once you’re in the content editor, simply add a ‘Shortcode’ block.

Now, enter the shortcode you copied earlier in the shortcode block.

After that, you can preview the page and publish it.

You can now visit your website to see the form entries in action.

Here’s what they look like on our demo website:

Displaying WordPress Form Entries by Using WPForms

Another way of displaying form entries on the front end of your WordPress website is through WPForms. However, this method requires editing code and is recommended for advanced users who have knowledge about coding.

WPForms is the best contact form plugin for WordPress and lets you create different types of forms using a drag and drop form builder.

Just note that if you want to see your form entries in the WordPress dashboard, then you’ll need the WPForms Pro version. There is also a WPForms Lite version that you can use for free, which sends email notifications of all your form entries.

First, you’ll need to install and activate the WPForms plugin. For more details, please see our guide on how to install a WordPress plugin.

Next, you will need to create an online form using WPForms. You can check out our step-by-step guide on how to create a contact form in WordPress.

Once you start to get form entries, you’ll need to enter the following code into your theme’s functions.php file or in a site-specific plugin. Please see our guide on how to easily add custom code in WordPress for more information.

/**
 * Custom shortcode to display WPForms form entries in table view.
 *
 * Basic usage: [wpforms_entries_table id="FORMID"].
 * 
 * Possible shortcode attributes:
 * id (required)  Form ID of which to show entries.
 * user           User ID, or "current" to default to current logged in user.
 * fields         Comma separated list of form field IDs.
 * number         Number of entries to show, defaults to 30.
 * 
 * @link https://wpforms.com/developers/how-to-display-form-entries/
 *
 * Realtime counts could be delayed due to any caching setup on the site
 *
 * @param array $atts Shortcode attributes.
 * 
 * @return string
 */
 
function wpf_entries_table( $atts ) {
 
    // Pull ID shortcode attributes.
    $atts = shortcode_atts(
        [
            'id'     => '',
            'user'   => '',
            'fields' => '',
            'number' => '',
                        'type' => 'all' // all, unread, read, or starred.
        ],
        $atts
    );
 
    // Check for an ID attribute (required) and that WPForms is in fact
    // installed and activated.
    if ( empty( $atts['id'] ) || ! function_exists( 'wpforms' ) ) {
        return;
    }
 
    // Get the form, from the ID provided in the shortcode.
    $form = wpforms()->form->get( absint( $atts['id'] ) );
 
    // If the form doesn't exists, abort.
    if ( empty( $form ) ) {
        return;
    }
 
    // Pull and format the form data out of the form object.
    $form_data = ! empty( $form->post_content ) ? wpforms_decode( $form->post_content ) : '';
 
    // Check to see if we are showing all allowed fields, or only specific ones.
    $form_field_ids = isset( $atts['fields'] ) && $atts['fields'] !== '' ? explode( ',', str_replace( ' ', '', $atts['fields'] ) ) : [];
 
    // Setup the form fields.
    if ( empty( $form_field_ids ) ) {
        $form_fields = $form_data['fields'];
    } else {
        $form_fields = [];
        foreach ( $form_field_ids as $field_id ) {
            if ( isset( $form_data['fields'][ $field_id ] ) ) {
                $form_fields[ $field_id ] = $form_data['fields'][ $field_id ];
            }
        }
    }
 
    if ( empty( $form_fields ) ) {
        return;
    }
 
    // Here we define what the types of form fields we do NOT want to include,
    // instead they should be ignored entirely.
    $form_fields_disallow = apply_filters( 'wpforms_frontend_entries_table_disallow', [ 'divider', 'html', 'pagebreak', 'captcha' ] );
 
    // Loop through all form fields and remove any field types not allowed.
    foreach ( $form_fields as $field_id => $form_field ) {
        if ( in_array( $form_field['type'], $form_fields_disallow, true ) ) {
            unset( $form_fields[ $field_id ] );
        }
    }
 
    $entries_args = [
        'form_id' => absint( $atts['id'] ),
    ];
 
    // Narrow entries by user if user_id shortcode attribute was used.
    if ( ! empty( $atts['user'] ) ) {
        if ( $atts['user'] === 'current' && is_user_logged_in() ) {
            $entries_args['user_id'] = get_current_user_id();
        } else {
            $entries_args['user_id'] = absint( $atts['user'] );
        }
    }
 
    // Number of entries to show. If empty, defaults to 30.
    if ( ! empty( $atts['number'] ) ) {
        $entries_args['number'] = absint( $atts['number'] );
    }
 
// Filter the type of entries all, unread, read, or starred
    if ( $atts['type'] === 'unread' ) {
        $entries_args['viewed'] = '0';
    } elseif( $atts['type'] === 'read' ) {
        $entries_args['viewed'] = '1';
    } elseif ( $atts['type'] === 'starred' ) {
        $entries_args['starred'] = '1';
    }
 
    // Get all entries for the form, according to arguments defined.
    // There are many options available to query entries. To see more, check out
    // the get_entries() function inside class-entry.php (https://a.cl.ly/bLuGnkGx).
    $entries = wpforms()->entry->get_entries( $entries_args );
 
    if ( empty( $entries ) ) {
        return '<p>No entries found.</p>';
    }
 
    ob_start();
 
    echo '<table class="wpforms-frontend-entries">';
 
        echo '<thead><tr>';
 
            // Loop through the form data so we can output form field names in
            // the table header.
            foreach ( $form_fields as $form_field ) {
 
                // Output the form field name/label.
                echo '<th>';
                    echo esc_html( sanitize_text_field( $form_field['label'] ) );
                echo '</th>';
            }
 
        echo '</tr></thead>';
 
        echo '<tbody>';
 
            // Now, loop through all the form entries.
            foreach ( $entries as $entry ) {
 
                echo '<tr>';
 
                // Entry field values are in JSON, so we need to decode.
                $entry_fields = json_decode( $entry->fields, true );
 
                foreach ( $form_fields as $form_field ) {
 
                    echo '<td>';
 
                        foreach ( $entry_fields as $entry_field ) {
                            if ( absint( $entry_field['id'] ) === absint( $form_field['id'] ) ) {
                                echo apply_filters( 'wpforms_html_field_value', wp_strip_all_tags( $entry_field['value'] ), $entry_field, $form_data, 'entry-frontend-table' );
                                break;
                            }
                        }
 
                    echo '</td>';
                }
 
                echo '</tr>';
            }
 
        echo '</tbody>';
 
    echo '</table>';
 
    $output = ob_get_clean();
 
    return $output;
}
add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

After adding the custom code to your website, you’ll need to enter the following shortcode to any page or post to show form entries.

[wpforms_entries_table id="FORMID"]

Just replace the FORMID with your form’s ID.

You can find the form ID by going to WPForms » All Forms and then looking at the Shortcode column.

To add a shortcode, simply create a new page or edit an existing one.

Next, go ahead and add a ‘Shortcode’ block.

After adding the block, simply enter your shortcode.

Now preview your WordPress page and click the ‘Publish’ button at the top.

Here’s what the preview of our form entries looked like on the front-end:

You can further customize the display using custom CSS styles as needed.

We hope that this article helped you learn how to display WordPress form entries on your site. You may also want to see our guide on how to create a custom WordPress theme, or our expert comparison of the best live chat software 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 Display WordPress Form Entries on Your Site first appeared on WPBeginner.

June 14, 2022 at 04:00PM