How to Create GDPR Compliant Forms in WordPress

Do you want to create GDPR compliant forms in WordPress? European Union’s new GDPR law requires explicit user consent to store personal information, so users can have more personal control on their data stored on websites. In this article, we will show you how to… Read More »

The post How to Create GDPR Compliant Forms in WordPress appeared first on WPBeginner.

Do you want to create GDPR compliant forms in WordPress? European Union’s new GDPR law requires explicit user consent to store personal information, so users can have more personal control on their data stored on websites. In this article, we will show you how to easily create GDPR compliant forms in WordPress.

How to add GDPR compliant forms in WordPress

What is GDPR?

The General Data Protection Regulation (GDPR) is a European Union (EU) law that became effective on May 25th, 2018. The purpose of this new law is to give EU citizens control over their personal data and change how companies and businesses handle data privacy around the world.

For more details, see our ultimate guide to WordPress and GDPR compliance which will answer all your GDPR related questions in plain English.

A typical WordPress site may collect user’s personal information in a number of ways. One of which is by adding forms to the site. Most forms collect personal information, and you may want to make sure that your WordPress forms are in compliance with the GDPR.

What is Required to Make a Form GDPR Compliant

In order to make your WordPress forms GDPR compliant, you will need to add the following features:

  • Ask users to give explicit consent for storing and using their personal information.
  • Allow users to request access to their own personal information stored on your website.
  • Allow users to request deletion of their data from your website.

Having said that, let’s take a look at how to easily create GDPR compliant WordPress forms.

How to Make a GDPR Compliant Form in WordPress

We recommend using WPForms to make GDPR compliant WordPress forms. It is the best contact form plugin for WordPress and comes with built-in GDPR enhancement features including:

  • 1-click GDPR Agreement field for your forms
  • GDPR compliant data retention best practices
  • Easy entry management system to quickly find, export, or delete user data upon request

Here is how you can easily create a GDPR compliant form in WordPress using WPForms.

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

Upon activation, you need to visit WPForms » Settings page and scroll down to the GDPR section. There, you need to check the box next to GDPR Enhancements option.

Enable GDPR enhancements

Enabling GDPR Enhancements option will reveal two more GDPR related settings.

The first one, ‘Disable User Cookies’ will stop WPForms from storing user sessions. This cookie contains a random unique identifier that helps WPForms add features like related entries, form abandonment, and geolocation. Disabling it will also disable those features.

The second option ‘Disable User Details’ will stop WPForms from storing user IP addresses and browser information.

Both of these settings are optional, and you can check them if you feel that you don’t need these features.

Don’t forget to click on the ‘Save Settings’ button store your changes.

WPForms is now ready to create a GDPR compliant forms in WordPress. You can now go to WPForms » Add New page to create a new form.

You will be asked to enter a title for your form and select a template. These templates are ready-made forms that you can use as a starting point. In this example, we are creating a simple contact form.

Form title and template

This will launch the WPForms builder interface. You will see your form preview in the right column, and on the left you will see all the fields that you can add to your form.

GDPR Agreement field in WPForms

Click on the ‘GDPR Agreement’ field to add it to your form. You will now see it appear at the bottom of your form. You can click on it to change its settings.

GDPR agreement field settings

You can change the title of the form field, agreement text, and use the description box to add details like a link to your privacy policy or terms and conditions pages.

Note: The GDPR Agreement field is always a required field, and it cannot be pre-checked to comply with the GDPR law. You can only add one GDPR agreement field to each form.

Once you are satisfied with the form, click on the save button on top to store your changes. You can now close the form builder.

Adding your GDPR compliant form to WordPress posts and pages

WPForms allows you to easily add forms anywhere on your website. Simply create a new page / post or edit an existing one. On the post edit screen, you will notice the new ‘Add Form’ button.

Add form button

Clicking on it will bring up a popup where you can select the form you created earlier. Simply click on the ‘Add form’ button again, and you will now see the contact form shortcode in your post editor.

Select and insert form in a WordPress post or page

You can now save or publish your post/page and click on the preview button to see your GDPR ready WordPress form in action.

WordPress form with GDPR agreement field

Managing Data Access and Deletion Requirements with WPForms

One of the requirements for GDPR compliance is to give users access and allowing them to request deletion of their data.

To do that, you can create a ‘Data access/delete form’ and add it to your privacy policy page. Users who wish to access their stored data or want it to be deleted can use that form to send you a request.

WPForms comes with an excellent entry management system that allows you to quickly find any data submitted via your forms.

You can access all form entries by visiting WPForms » Entries page and selecting the form you wish to view from the top left corner of the screen.

Managing data in WPForms

WPForms will show you all entries submitted using that form. You can search for a form entry by entering a name, email, ip address, or keyword.

You can also delete individual entries or click on the view button to see all data stored for that entry. On the single entry page, you can even export that single entry as a CSV file.

Managing a single entry

We hope this article helped you learn how to easily create GDPR compliant forms in WordPress. You may also want to see our article on how to track user engagement in WordPress using Google Analytics.

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

The post How to Create GDPR Compliant Forms in WordPress appeared first on WPBeginner.

How to Create GDPR Compliant Forms in WordPress

Do you want to create GDPR compliant forms in WordPress? European Union’s new GDPR law requires explicit user consent to store personal information, so users can have more personal control on their data stored on websites. In this article, we will show you how to… Read More »

The post How to Create GDPR Compliant Forms in WordPress appeared first on WPBeginner.

Do you want to create GDPR compliant forms in WordPress? European Union’s new GDPR law requires explicit user consent to store personal information, so users can have more personal control on their data stored on websites. In this article, we will show you how to easily create GDPR compliant forms in WordPress.

How to add GDPR compliant forms in WordPress

What is GDPR?

The General Data Protection Regulation (GDPR) is a European Union (EU) law that became effective on May 25th, 2018. The purpose of this new law is to give EU citizens control over their personal data and change how companies and businesses handle data privacy around the world.

For more details, see our ultimate guide to WordPress and GDPR compliance which will answer all your GDPR related questions in plain English.

A typical WordPress site may collect user’s personal information in a number of ways. One of which is by adding forms to the site. Most forms collect personal information, and you may want to make sure that your WordPress forms are in compliance with the GDPR.

What is Required to Make a Form GDPR Compliant

In order to make your WordPress forms GDPR compliant, you will need to add the following features:

  • Ask users to give explicit consent for storing and using their personal information.
  • Allow users to request access to their own personal information stored on your website.
  • Allow users to request deletion of their data from your website.

Having said that, let’s take a look at how to easily create GDPR compliant WordPress forms.

How to Make a GDPR Compliant Form in WordPress

We recommend using WPForms to make GDPR compliant WordPress forms. It is the best contact form plugin for WordPress and comes with built-in GDPR enhancement features including:

  • 1-click GDPR Agreement field for your forms
  • GDPR compliant data retention best practices
  • Easy entry management system to quickly find, export, or delete user data upon request

Here is how you can easily create a GDPR compliant form in WordPress using WPForms.

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

Upon activation, you need to visit WPForms » Settings page and scroll down to the GDPR section. There, you need to check the box next to GDPR Enhancements option.

Enable GDPR enhancements

Enabling GDPR Enhancements option will reveal two more GDPR related settings.

The first one, ‘Disable User Cookies’ will stop WPForms from storing user sessions. This cookie contains a random unique identifier that helps WPForms add features like related entries, form abandonment, and geolocation. Disabling it will also disable those features.

The second option ‘Disable User Details’ will stop WPForms from storing user IP addresses and browser information.

Both of these settings are optional, and you can check them if you feel that you don’t need these features.

Don’t forget to click on the ‘Save Settings’ button store your changes.

WPForms is now ready to create a GDPR compliant forms in WordPress. You can now go to WPForms » Add New page to create a new form.

You will be asked to enter a title for your form and select a template. These templates are ready-made forms that you can use as a starting point. In this example, we are creating a simple contact form.

Form title and template

This will launch the WPForms builder interface. You will see your form preview in the right column, and on the left you will see all the fields that you can add to your form.

GDPR Agreement field in WPForms

Click on the ‘GDPR Agreement’ field to add it to your form. You will now see it appear at the bottom of your form. You can click on it to change its settings.

GDPR agreement field settings

You can change the title of the form field, agreement text, and use the description box to add details like a link to your privacy policy or terms and conditions pages.

Note: The GDPR Agreement field is always a required field, and it cannot be pre-checked to comply with the GDPR law. You can only add one GDPR agreement field to each form.

Once you are satisfied with the form, click on the save button on top to store your changes. You can now close the form builder.

Adding your GDPR compliant form to WordPress posts and pages

WPForms allows you to easily add forms anywhere on your website. Simply create a new page / post or edit an existing one. On the post edit screen, you will notice the new ‘Add Form’ button.

Add form button

Clicking on it will bring up a popup where you can select the form you created earlier. Simply click on the ‘Add form’ button again, and you will now see the contact form shortcode in your post editor.

Select and insert form in a WordPress post or page

You can now save or publish your post/page and click on the preview button to see your GDPR ready WordPress form in action.

WordPress form with GDPR agreement field

Managing Data Access and Deletion Requirements with WPForms

One of the requirements for GDPR compliance is to give users access and allowing them to request deletion of their data.

To do that, you can create a ‘Data access/delete form’ and add it to your privacy policy page. Users who wish to access their stored data or want it to be deleted can use that form to send you a request.

WPForms comes with an excellent entry management system that allows you to quickly find any data submitted via your forms.

You can access all form entries by visiting WPForms » Entries page and selecting the form you wish to view from the top left corner of the screen.

Managing data in WPForms

WPForms will show you all entries submitted using that form. You can search for a form entry by entering a name, email, ip address, or keyword.

You can also delete individual entries or click on the view button to see all data stored for that entry. On the single entry page, you can even export that single entry as a CSV file.

Managing a single entry

We hope this article helped you learn how to easily create GDPR compliant forms in WordPress. You may also want to see our article on how to track user engagement in WordPress using Google Analytics.

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

The post How to Create GDPR Compliant Forms in WordPress appeared first on WPBeginner.

How to Add a GDPR Comment Privacy Opt-in Checkbox in WordPress

Do you want to add a comment privacy optin checkbox in WordPress? European Union’s new GDPR law requires explicit consent for storing user’s personal information. If you have comments enabled on your website, then you need to add a comment privacy checkbox to comply with… Read More »

The post How to Add a GDPR Comment Privacy Opt-in Checkbox in WordPress appeared first on WPBeginner.

Do you want to add a comment privacy optin checkbox in WordPress? European Union’s new GDPR law requires explicit consent for storing user’s personal information. If you have comments enabled on your website, then you need to add a comment privacy checkbox to comply with the new law. In this article, we will show you how to add a GDPR comment privacy opt-in checkbox in WordPress.

How to add comment privacy optin checkbox in WordPress

When and Why Add a Comment Privacy Optin Checkbox in WordPress?

Recently, a new European Union law called GDPR (The General Data Protection Regulation) has become effective. The purpose of this law is to give EU citizens control over their personal data and change the data privacy approach of organizations across the world.

To learn more, see our ultimate guide to WordPress and GDPR compliance which answers all your questions in plain English.

WordPress recently addressed GDPR compliance in the latest 4.9.6 release. If you haven’t updated yet, then you need to immediately update to the latest WordPress version.

One of the ways WordPress stores and uses personal information is in the comment form. When a user leaves a comment on your website, their name, email address, and website information is stored in a browser cookie. This cookie allows WordPress to automatically fill in user’s information in the comment form on their next visit.

With WordPress 4.9.6, the default WordPress comment form will now show a comment privacy opt-in checkbox. All WordPress themes that use the default WordPress comment form will now automatically show this checkbox.

Comment privacy checkbox in default WordPress comment form

If your site is showing the comment privacy checkbox, then you don’t need to read further. However if the comment checkbox is not showing on your site, then you need to continue reading, and we will show you how to add comment privacy checkbox in WordPress.

Adding Comment Privacy Optin Checkbox in WordPress

First, you need to make sure that you are using the latest version of WordPress and your theme. Simply go to Dashboard » Updates page to check for updates.

Check for WordPress and theme updates

If an update is available for your current theme or WordPress, then go ahead and install it. Next, check your website’s comment form to see if the update added the comment privacy checkbox.

If both your theme and WordPress are up to date, and you still can’t see the comment privacy checkbox, then this means that your WordPress theme is overriding the default WordPress comment form.

You can ask your theme author to fix this issue by opening a support ticket. You can also try to fix it yourself until your theme author releases an update.

There are two ways you can add the comment privacy checkbox to your WordPress theme. We will show you both methods, and you can try the one that works for you.

Both methods require you to add code to your WordPress theme files. If you haven’t done this before, then see our guide on how to copy and paste code in WordPress.

Method 1. Add comment privacy checkbox to your theme’s comment form

This method is recommended because it tries to protect your theme’s comment form style and layout.

First, you will need to find the code used to override the default WordPress comment form. Normally, you can find it in the comments.php or functions.php file in your theme folder.

You will be looking for a code using the 'comment_form_default_fields' filter. This filter is used by themes to override the default WordPress comment form.

It will have lines for all of your comment form fields in a specific format. Here is an example code to give you an idea of what you would be looking for:

$comments_args = array(
	        // change the title of send button 
	        'label_submit'=> esc_html(__('Post Comments','themename')),
	        // change the title of the reply section
	        'title_reply'=> esc_html(__('Leave a Comment','themename')),
	        // redefine your own textarea (the comment body)
	        'comment_field' => ' 
	        <div class="form-group"><div class="input-field"><textarea class="materialize-textarea" type="text" rows="10" id="textarea1" name="comment" aria-required="true"></textarea></div></div>',

	        'fields' => apply_filters( 'comment_form_default_fields', array(
			    'author' =>'' .
			      '<div><div class="input-field">' .
			      '<input class="validate" id="name" name="author" placeholder="'. esc_attr(__('Name','themename')) .'" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
			      '" size="30"' . $aria_req . ' /></div></div>',

			    'email' =>'' .
			      '<div><div class="input-field">' .
			      '<input class="validate" id="email" name="email" placeholder="'. esc_attr(__('Email','themename')) .'" type="email" value="' . esc_attr(  $commenter['comment_author_email'] ) .
			      '" size="30"' . $aria_req . ' /></div></div>',

			    'url' =>'' .
			      '<div class="form-group">'.
			      '<div><div class="input-field"><input class="validate" placeholder="'. esc_attr(__('Website','themename')) .'" id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
			      '" size="30" /></div></div>',
			    )
		    ),
	    );

	comment_form($comments_args); 	?> 

In this code, you can notice that comment_form_default_fields filter is used to modify the author, email, and URL fields. Inside the array, it uses the following format to display each field:

'fieldname' => 'HTML code to display the field', 
'anotherfield' => 'HTML code to display the field', 

We will add the comment privacy optin checkbox field towards the end. Here is what our code will look like now:

$comments_args = array(
	        // change the title of send button 
	        'label_submit'=> esc_html(__('Post Comments','themename')),
	        // change the title of the reply section
	        'title_reply'=> esc_html(__('Leave a Comment','themename')),
	        // redefine your own textarea (the comment body)
	        'comment_field' => ' 
	        <div class="form-group"><div class="input-field"><textarea class="materialize-textarea" type="text" rows="10" id="textarea1" name="comment" aria-required="true"></textarea></div></div>',

	        'fields' => apply_filters( 'comment_form_default_fields', array(
			    'author' =>'' .
			      '<div><div class="input-field">' .
			      '<input class="validate" id="name" name="author" placeholder="'. esc_attr(__('Name','themename')) .'" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
			      '" size="30"' . $aria_req . ' /></div></div>',

			    'email' =>'' .
			      '<div><div class="input-field">' .
			      '<input class="validate" id="email" name="email" placeholder="'. esc_attr(__('Email','themename')) .'" type="email" value="' . esc_attr(  $commenter['comment_author_email'] ) .
			      '" size="30"' . $aria_req . ' /></div></div>',

			    'url' =>'' .
			      '<div class="form-group">'.
			      '<div><div class="input-field"><input class="validate" placeholder="'. esc_attr(__('Website','themename')) .'" id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
			      '" size="30" /></div></div>',

// Now we will add our new privacy checkbox optin

				'cookies' => '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"' . $consent . ' />' .
	                                         '<label for="wp-comment-cookies-consent">' . __( 'Save my name, email, and website in this browser for the next time I comment.' ) . '</label></p>',
			    )
		    ),
	    );

	comment_form($comments_args); 	?> 

Privacy checkbox in a custom WordPress comment form

Method 2. Replacing your theme’s comment form with WordPress default

This method simply replaces your theme’s comment form with the default WordPress comment form. Using this method can affect your comment form’s appearance, and you may have to use custom CSS to style your comment form.

Edit your theme’s comments.php file and look for the line with the comment_form() function. Your theme will have a defined arguments, function, or a template inside it to load your theme’s custom comment form. Your comment_form line will look something like this:

<?php comment_form( custom_comment_form_function() ); ?>


You will need to replace it with the following line:


<?php comment_form(); ?>

Don’t forget to save your changes and visit your website. You will now see the default WordPress comment form with the comment privacy optin checkbox.

Default WordPress comment form

We hope this article helped you learn how to add the GDPR comment privacy optin checkbox in WordPress. You may also want to see our tips on getting more comments on your WordPress blog posts.

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 GDPR Comment Privacy Opt-in Checkbox in WordPress appeared first on WPBeginner.

How to Add Your Etsy Store in WordPress

Recently one of our readers asked if it’s possible to connect an Etsy store to WordPress. Having your Etsy shop integrated with your WordPress site can help you sell more products online. In this article, we will show you how to add your Etsy store… Read More »

The post How to Add Your Etsy Store in WordPress appeared first on WPBeginner.

Recently one of our readers asked if it’s possible to connect an Etsy store to WordPress. Having your Etsy shop integrated with your WordPress site can help you sell more products online. In this article, we will show you how to add your Etsy store in WordPress.

How to add your Etsy store in WordPress

Why Add Your Etsy Store in WordPress?

Etsy shops are somewhat limited in features when compared to other popular eCommerce platforms like Shopify or WooCommerce. Mainly because Etsy is an online marketplace for creative goods, while WooCommerce and Shopify are complete eCommerce platforms.

Etsy shops have strict product guidelines with limited payment options, which may not be available in many countries. You also don’t have the ability to add advanced features to your Etsy Shop like you can do with a WooCommerce online store.

However, Etsy offers you more exposure to a niche clientele looking for handcrafted, artistic, and unique products. It is very easy to use, and you don’t have to spend much time on finding customers because they are already there.

If you want to expand your business, then you may want to use WordPress to create a website to better showcase your Etsy shop products.

That being said, let’s take a look at how to easily add your Etsy store in WordPress.

Adding Your Etsy Store in WordPress

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

Upon activation, you need to go to Settings » Etsy Shop page and enter your Etsy API key to connect your shop with the plugin.

Note: If you don’t have an Etsy API key, then simply follow the link to get one from your Etsy store.

Add Etsy API key

Once you click on the link, it will ask you to create a new app. You need to add the name for your app, describe your app, and add your WordPress site URL. After that, you need to select the best choices for your application and click on the Create App button below.

Create a new app

You will now see a success message with your Etsy API key. Go ahead and copy the key from here.

Copy Etsi API key

Next, you need to go back to your WordPress admin area and paste the Etsy API key. Once done, click on the Save Changes button, and the plugin will validate your API key and connect to your Etsy shop.

Add valid Etsy API key

After connecting your Etsy store successfully, you can display and sell products from your Etsy shop right on your WordPress blog.

To add the Etsy store products in WordPress, you need to create a new page in WordPress or edit an existing page. On this page, you need to add the following shortcode to your page edit area.

[etsy-shop shop_name="MyShopUSDesign" section_id="55895579"]

Don’t forget to replace the shop name and section ID in this shortcode with your Etsy shop name and ID.

To get these two details, you need to go to your Etsy store and click on Shop Manager from top right corner of the screen.

Note: Make sure that you are already logged in to your Etsy account.

Open shop manager

On this page, you need to click the link in the left menu to access your shop.

Go to shop name

First, you need to copy the name of your shop and then click on the Edit Shop button to find the section ID.

Edit shop for section ID

From here, you need to click on Listings tab located in the left menu.

Go to listings

On this page, you will be asked to select the section in which you have added your products. You can select the Sections from the dropdown as displayed in the screenshot below.

Select the section

The section ID of your shop will be displayed in the page URL when your selected section is loaded. Go ahead and copy this section ID to replace in the shortcode.

Etsy section ID

After adding the shortcode with your shop name and section ID, you can visit the post/page to see your Etsy store in WordPress.

My Etsy Store

You can add the same shortcode to multiple posts or pages in WordPress to display your Etsy shop. To show different listings, you need to change the section ID in the shortcode. However, the shop name can remain same.

We hope this article helped you learn how to add your Etsy store in WordPress. You may also want to see our guide on how to create an online marketplace using WordPress, so you can create your own Etsy like eCommerce marketplace.

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 Your Etsy Store in WordPress appeared first on WPBeginner.

How to Upload a HTML Page to WordPress without 404 Errors

Do you want to upload a HTML page to your WordPress site? Sometimes you may need to add a static HTML page and make it accessible along with your WordPress site. In this article, we will show you how to properly upload a HTML page… Read More »

The post How to Upload a HTML Page to WordPress without 404 Errors appeared first on WPBeginner.

Do you want to upload a HTML page to your WordPress site? Sometimes you may need to add a static HTML page and make it accessible along with your WordPress site. In this article, we will show you how to properly upload a HTML page to your WordPress site without causing 404 errors.

How to Upload HTML Page to WordPress Site

Why Upload HTML Pages to WordPress?

WordPress comes with a built-in content type to add pages to your website. Often WordPress themes add pre-designed page templates to display your pages.

There are even WordPress landing page plugins that allow you to create beautiful page templates with a drag and drop builder.

This means that in most cases, you shouldn’t need to upload a HTML page to your WordPress site.

However, sometimes a user may have static HTML pages from their old website or a static template that they really like and want to use. In these scenarios, you will need to upload your HTML page to WordPress.

Since, WordPress comes with its own SEO friendly URL structure, it can cause a 404 error if you simply uploaded your HTML page and tried to access it.

That being said, let’s take a look at how to upload a HTML page to your WordPress site without causing 404 errors.

Uploading HTML Page to WordPress Site

Before you upload your HTML page to the WordPress site, you need to make sure that the ‘index.html’ file is renamed to ‘index.php’.

HTML Template File

After that, you need to add all files including the HTML page, CSS, and other folders to a Zip archive.

Windows users can right-click and select Send to » Compressed Zip Folder option to create a zip file. Next, simply drag and drop all files and folders for your HTML page to the zip file.

Zip Archive HTML Page

Mac users can select the parent folder containing all files and folders, and then right-click to select ‘Compress folder’ option.

Create zip file in Mac

Next, you need to go to the cPanel of your WordPress hosting account. In the cPanel, you need to scroll down to the Files section and then click on the File Manager app.

Open File Manager

Once you are in File Manager, you need to navigate to the website root folder which is usually called public_html and contains all your WordPress files folders. From there, you need to click on the Folder link from the top menu to create a new empty folder.

Create a New Folder

A popup will open where you need to add a name for the new folder. Use a name that you want to use as the URL of your HTML page and then click on the Create New Folder button.

Create new folder in cPanel

After creating the folder successfully, you need to open it and click on the Upload button from the top menu to select and upload the zip file you created earlier from your computer. You’ll see the progress bar while the zip file uploads to your site.

Upload Zipped Template File

Once uploaded, you need to select the zip file and then click on Extract button from the top menu.

Extract Files

You will be asked where to extract the files. Simply select the same new folder that you created and click on the Extract File(s) button.

Extract Files in New Folder

File Manager will now extract the zip file, and you will be able to see files in your folder.

Note: You can now delete the zip file from here. It doesn’t affect your HTML page or any other folders that are extracted.

Extracted Folder

Now you can visit this page in the browser by using the name of the folder (For example, yourwebsite.com/example). If your server doesn’t support the redirection, then you may see a 404 error. It happens because your ‘index.php’ file is not redirected on loading the URL in browser.

It is one of the common WordPress errors and can be fixed easily.

Using the File Manager app, you need to edit .htaccess file in your website’s root folder and add the following code:

RewriteRule ^(.*)index\.(php|html?)$ /$1 [R=301,NC,L]

This code will redirect your ‘index.php’ file and load it in the browser. If you are using a case-sensitive name for a file or folder, then the above code will also redirect that to show you the content.

We hope this article helped you learn how to upload an HTML page to your WordPress site without 404 error. You may want to see our comparison of WordPress vs static HTML to learn which one is better for your business. Also for creating landing pages, we recommend taking a look at the best WordPress drag & drop 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.

The post How to Upload a HTML Page to WordPress without 404 Errors appeared first on WPBeginner.

Real Browser Integration Testing with Selenium Standalone, Chrome, and ASP.NET Core 2.1

Buckle up kids, this is nuts and I’m probably doing it wrong. 😉 And it’s 2am and I wrote this fast. I’ll come back tomorrow and fix the spelling. I want to have lots of tests to make sure my new podcast site is working well. As mentioned before, I’ve …

I find your lack of tests disturbingBuckle up kids, this is nuts and I'm probably doing it wrong. ;) And it's 2am and I wrote this fast. I'll come back tomorrow and fix the spelling.

I want to have lots of tests to make sure my new podcast site is working well. As mentioned before, I've been updating the site to ASP.NET Core 2.1.

Here's some posts if you want to catch up:

I've been doing my testing with XUnit and I want to test in layers.

Basic Unit Testing

Simply create a Razor Page's Model in memory and call OnGet or WhateverMethod. At this point you are NOT calling Http, there is no WebServer.

public IndexModel pageModel;


public IndexPageTests()
{
var testShowDb = new TestShowDatabase();
pageModel = new IndexModel(testShowDb);
}

[Fact]
public async void MainPageTest()
{
// FAKE HTTP GET "/"
IActionResult result = await pageModel.OnGetAsync(null, null);

Assert.NotNull(result);
Assert.True(pageModel.OnHomePage); //we are on the home page, because "/"
Assert.Equal(16, pageModel.Shows.Count()); //home page has 16 shows showing
Assert.Equal(620, pageModel.LastShow.ShowNumber); //last test show is #620
}

Moving out a layer...

In-Memory Testing with both Client and Server using WebApplicationFactory

Here we are starting up the app and calling it with a client, but the "HTTP" of it all is happening in memory/in process. There are no open ports, there's no localhost:5000. We can still test HTTP semantics though.

public class TestingFunctionalTests : IClassFixture<WebApplicationFactory<Startup>>

{
public HttpClient Client { get; }
public ServerFactory<Startup> Server { get; }

public TestingFunctionalTests(ServerFactory<Startup> server)
{
Client = server.CreateClient();
Server = server;
}

[Fact]
public async Task GetHomePage()
{
// Arrange & Act
var response = await Client.GetAsync("/");

// Assert
Assert.Equal(HttpStatusCode.OK, response.StatusCode);
}
...
}

Testing with a real Browser and real HTTP using Selenium Standalone and Chrome

THIS is where it gets interesting with ASP.NET Core 2.1 as we are going to fire up both the complete web app, talking to the real back end (although it could talk to a local test DB if you want) as well as a real headless version of Chrome being managed by Selenium Standalone and talked to with the WebDriver. It sounds complex, but it's actually awesome and super useful.

First I add references to Selenium.Support and Selenium.WebDriver to my Test project:

dotnet add reference "Selenium.Support"

dotnet add reference "Selenium.WebDriver"

Make sure you have node and npm then you can get Selenium Standalone like this:

npm install -g [email protected]

selenium-standalone install

Chrome is being controlled by automated test softwareSelenium, to be clear, puts your browser on a puppet's strings. Even Chrome knows it's being controlled! It's using the (soon to be standard, but clearly defacto standard) WebDriver protocol. Imagine if your browser had a localhost REST protocol where you could interrogate it and click stuff! I've been using Selenium for over 11 years. You can even test actual Windows apps (not in the browser) with WinAppDriver/Appium but that's for another post.

Now for this part, bare with me because my ServerFactory class I'm about to make is doing two things. It's setting up my ASP.NET Core 2. 1 app and actually running it so it's listening on https://localhost:5001. It's assuming a few things that I'll point out. It also (perhaps questionable) is launching Selenium Standalone from within its constructor. Questionable, to be clear, and there's others ways to do this, but this is VERY simple.

If it offends you, remembering that you do need to start Selenium Standalone with "selenium-standalone start" you could do it OUTSIDE your test in a script.

Perhaps do the startup/teardown work in a PowerShell or Shell script. Start it up, save the process id, then stop it when you're done. Note I'm also doing checking code coverage here with Coverlet but that's not related to Selenium - I could just "dotnet test."

#!/usr/local/bin/powershell

$SeleniumProcess = Start-Process "selenium-standalone" -ArgumentList "start" -PassThru
dotnet test /p:CollectCoverage=true /p:CoverletOutputFormat=lcov /p:CoverletOutput=./lcov .\hanselminutes.core.tests
Stop-Process -Id $SeleniumProcess.Id

Here my SeleniumServerFactory is getting my Browser and Server ready.

SIDEBAR NOTE: I want to point out that this is NOT perfect and it's literally the simplest thing possible to get things working. It's my belief, though, that there are some problems here and that I shouldn't have to fake out the "new TestServer" in CreateServer there. While the new WebApplicationFactory is great for in-memory unit testing, it should be just as easy to fire up your app and use a real port for things like Selenium testing. Here I'm building and starting the IWebHostBuilder myself (!) and then making a fake TestServer only to satisfy the CreateServer method, which I think should not have a concrete class return type. For testing, ideally I could easily get either an "InMemoryWebApplicationFactory" and a "PortUsingWebApplicationFactory" (naming is hard). Hopefully this is somewhat clear and something that can be easily adjusted for ASP.NET Core 2.1.x.

My app is configured to listen on both http://localhost:5000 and https://localhost:5001, so you'll note where I'm getting that last value (in an attempt to avoid hard-coding it). We also are sure to stop both Server and Brower in Dispose() at the bottom.

public class SeleniumServerFactory<TStartup> : WebApplicationFactory<Startup> where TStartup : class

{
public string RootUri { get; set; } //Save this use by tests

Process _process;
IWebHost _host;

public SeleniumServerFactory()
{
ClientOptions.BaseAddress = new Uri("https://localhost"); //will follow redirects by default

_process = new Process() {
StartInfo = new ProcessStartInfo {
FileName = "selenium-standalone",
Arguments = "start",
UseShellExecute = true
}
};
_process.Start();
}

protected override TestServer CreateServer(IWebHostBuilder builder)
{
//Real TCP port
_host = builder.Build();
_host.Start();
RootUri = _host.ServerFeatures.Get<IServerAddressesFeature>().Addresses.LastOrDefault(); //Last is https://localhost:5001!

//Fake Server we won't use...this is lame. Should be cleaner, or a utility class
return new TestServer(new WebHostBuilder().UseStartup<TStartup>());
}

protected override void Dispose(bool disposing)
{
        base.Dispose(disposing);
        if (disposing) {
            _host.Dispose();
_process.CloseMainWindow(); //Be sure to stop Selenium Standalone
        }
    }
}

But what does a complete series of tests look like? I have a Server, a Browser, and an (theoretically optional) HttpClient. Focus on the Browser and Server.

At the point when a single test starts, my site is up (the Server) and an invisible headless Chrome (the Browser) is actually being puppeted with local calls via WebDriver. All this is hidden from to you - if you want. You can certainly see Chrome (or other browsers) get automated, but what's nice about Selenium Standalone with hidden/headless Browser testing is that my unit tests now also include these complete Integration Tests and can run as part of my Continuous Integration Build.

Again, layers. I test classes, then move out and test Http Request/Response interactions, and finally the site is up and I'm making sure I can navigate, that data is loading. I'm automating the "smoke tests" that I used to do myself! And I can make as many of this a I'd like now that the scaffolding work is done.

public class SeleniumTests : IClassFixture<SeleniumServerFactory<Startup>>, IDisposable

{
public SeleniumServerFactory<Startup> Server { get; }
public IWebDriver Browser { get; }
public HttpClient Client { get; }
public ILogs Logs { get; }

public SeleniumTests(SeleniumServerFactory<Startup> server)
{
Server = server;
Client = server.CreateClient(); //weird side effecty thing here. This call shouldn't be required for setup, but it is.

var opts = new ChromeOptions();
opts.AddArgument("--headless"); //Optional, comment this out if you want to SEE the browser window
opts.SetLoggingPreference(OpenQA.Selenium.LogType.Browser, LogLevel.All);

var driver = new RemoteWebDriver(opts);
Browser = driver;
Logs = new RemoteLogs(driver); //TODO: Still not bringing the logs over yet
}

[Fact]
public void LoadTheMainPageAndCheckTitle()
{
Browser.Navigate().GoToUrl(Server.RootUri);
Assert.StartsWith("Hanselminutes Technology Podcast - Fresh Air and Fresh Perspectives for Developers", Browser.Title);
}

[Fact]
public void ThereIsAnH1()
{
Browser.Navigate().GoToUrl(Server.RootUri);

var headerSelector = By.TagName("h1");
Assert.Equal("HANSELMINUTES PODCAST\r\nby Scott Hanselman", Browser.FindElement(headerSelector).Text);
}

[Fact]
public void KevinScottTestThenGoHome()
{
Browser.Navigate().GoToUrl(Server.RootUri + "/631/how-do-you-become-a-cto-with-microsofts-cto-kevin-scott");

var headerSelector = By.TagName("h1");
var link = Browser.FindElement(headerSelector);
link.Click();
Assert.Equal(Browser.Url.TrimEnd('/'),Server.RootUri); //WTF
}

public void Dispose()
{
Browser.Dispose();
}
}

Here's a build, unit test/selenium test with code coverage actually running. I started running it from PowerShell. The black window in the back is Selenium Standalone doing its thing (again, could be hidden).

Two consoles, one with PowerShell running XUnit and one running Selenium

If I comment out the "--headless" line, I'll see this as Chrome is automated. Cool.

Chrome is loading my site and being automated

Of course, I can also run these in the .NET Core Test Explorer in either Visual Studio Code, or Visual Studio.

image

Great fun. What are your thoughts?


Sponsor: Check out JetBrains Rider: a cross-platform .NET IDE. Edit, refactor, test and debug ASP.NET, .NET Framework, .NET Core, Xamarin or Unity applications. Learn more and download a 30-day trial!



© 2018 Scott Hanselman. All rights reserved.
     

The Ultimate Guide to WordPress and GDPR Compliance – Everything You Need to Know

Are you confused by GDPR, and how it will impact your WordPress site? GDPR, short for General Data Protection Regulation, is an European Union law that you have likely heard about. We have received dozens of emails from users asking us to explain GDPR in… Read More »

The post The Ultimate Guide to WordPress and GDPR Compliance – Everything You Need to Know appeared first on WPBeginner.

Are you confused by GDPR, and how it will impact your WordPress site? GDPR, short for General Data Protection Regulation, is an European Union law that you have likely heard about. We have received dozens of emails from users asking us to explain GDPR in plain English and share tips on how to make your WordPress site GDPR compliant. In this article, we will explain everything you need to know about GDPR and WordPress (without the complex legal stuff).

WordPress and GDPR Compliance

Disclaimer: We are not lawyers. Nothing on this website should be considered legal advice.

To help you easily navigate through our ultimate guide to WordPress and GDPR Compliance, we have created a table of content below:

Table of Content

What is GDPR?

The General Data Protection Regulation (GDPR) is a European Union (EU) law taking effect on May 25, 2018. The goal of GDPR is to give EU citizens control over their personal data and change the data privacy approach of organizations across the world.

What is GDPR?

You’ve likely gotten dozens of emails from companies like Google and others regarding GDPR, their new privacy policy, and bunch of other legal stuff. That’s because the EU has put in hefty penalties for those who are not in compliance.

Fines

Basically after May 25th, 2018, businesses that are not in compliance with GDPR’s requirement can face large fines up to 4% of a company’s annual global revenue OR €20 million (whichever is greater). This is enough reason to cause wide-spread panic among businesses around the world.

This brings us to the big question that you might be thinking about:

Does GDPR apply to my WordPress site?

The answer is YES. It applies to every business, large and small, around the world (not just in the European Union).

If your website has visitors from European Union countries, then this law applies to you.

But don’t panic, this isn’t the end of the world.

While GDPR has the potential to escalate to those high level of fines, it will start with a warning, then a reprimand, then a suspension of data processing, and if you continue to violate the law, then the large fines will hit.

GDPR Fines and Penalties

The EU isn’t some evil government that is out to get you. Their goal is to protect consumers, average people like you and me from reckless handling of data / breaches because it’s getting out of control.

The maximum fine part in our opinion is largely to get the attention of large companies like Facebook and Google, so this regulation is NOT ignored. Furthermore, this encourage companies to actually put more emphasis on protecting the rights of people.

Once you understand what is required by GDPR and the spirit of the law, then you will realize that none of this is too crazy. We will also share tools / tips to make your WordPress site GDPR compliant.

What is required under GDPR?

The goal of GDPR is to protect user’s personally identifying information (PII) and hold businesses to a higher standard when it comes to how they collect, store, and use this data.

The personal data includes: name, emails, physical address, IP address, health information, income, etc.

GDPR Personal Data

While the GDPR regulation is 200 pages long, here are the most important pillars that you need to know:

Explicit Consent – if you’re collecting personal data from an EU resident, then you must obtain explicit consent that’s specific and unambiguous. In other words, you can’t just send unsolicited emails to people who gave you their business card or filled out your website contact form because they DID NOT opt-in for your marketing newsletter (that’s called SPAM by the way, and you shouldn’t be doing that anyways).

For it to be considered explicit consent, you must require a positive opt-in (i.e no pre-ticked checkbox), contain clear wording (no legalese), and be separate from other terms & conditions.

Rights to Data – you must inform individuals where, why, and how their data is processed / stored. An individual has the right to download their personal data and an individual also has the right to be forgotten meaning they can ask for their data to be deleted.

This will make sure that when you hit Unsubscribe or ask companies to delete your profile, then they actually do that (hmm, go figure). I’m looking at you Zenefits, still waiting for my account to be deleted for 2 years and hoping that you stop sending me spam emails just because I made the mistake of trying out your service.

Breach Notification – organizations must report certain types of data breaches to relevant authorities within 72 hours, unless the breach is considered harmless and poses no risk to individual data. However if a breach is high-risk, then the company MUST also inform individuals who’re impacted right away.

This will hopefully prevent cover-ups like Yahoo that was not revealed until the acquisition.

Data Protection Officers – if you are a public company or process large amounts of personal information, then you must appoint a data protection officer. Again this is not required for small businesses. Consult an attorney if you’re in doubt.

GDPR Data Protection Officer

To put it in plain English, GDPR makes sure that businesses can’t go around spamming people by sending emails they didn’t ask for. Businesses can’t sell people’s data without their explicit consent (good luck getting this consent). Businesses have to delete user’s account and unsubscribe them from email lists if the user ask you to do that. Businesses have to report data breaches and overall be better about data protection.

Sounds pretty good, in theory at least.

Ok so now you are probably wondering what do you need to do to make sure that your WordPress site is GDPR compliant.

Well, that really depends on your specific website (more on this later).

Let us start by answering the biggest question that we’ve gotten from users:

Is WordPress GDPR Compliant?

Yes, as of WordPress 4.9.6, the WordPress core software is GDPR compliant. WordPress core team has added several GDPR enhancements to make sure that WordPress is GDPR compliant. It’s important to note that when we talk about WordPress, we’re talking about self-hosted WordPress.org (see the difference: WordPress.com vs WordPress.org).

Having said that, due to the dynamic nature of websites, no single platform, plugin or solution can offer 100% GDPR compliance. The GDPR compliance process will vary based on the type of website you have, what data you store, and how you process data on your site.

Ok so you might be thinking what does this mean in plain english?

Well, by default WordPress 4.9.6 now comes with the following GDPR enhancement tools:

Comments Consent

WordPress Comments Opt-in for GDPR

By default, WordPress used to store the commenters name, email and website as a cookie on the user’s browser. This made it easier for users to leave comments on their favorite blogs because those fields were pre-populated.

Due to GDPR’s consent requirement, WordPress has added the comment consent checkbox. The user can leave a comment without checking this box. All it would mean is that they would have to manually enter their name, email, and website every time they leave a comment.

Data Export and Erase Feature

WordPress Data Handling - GDPR

WordPress offers site owners the ability to comply with GDPR’s data handling requirements and honor user’s request for exporting personal data as well as removal of user’s personal data.

The data handling features can be found under the Tools menu inside WordPress admin.

Privacy Policy Generator

WordPress Privacy Policy Generator for GDPR

WordPress now comes with a built-in privacy policy generator. It offers a pre-made privacy policy template and offer you guidance in terms of what else to add, so you can be more transparent with users in terms of what data you store and how you handle their data.

These three things are enough to make a default WordPress blog GDPR compliant. However it is very likely that your website has additional features that will also need to be in compliance.

Areas on Your Website that are Impacted by GDPR

As a website owner, you might be using various WordPress plugins that store or process data like contact forms, analytics, email marketing, online store, membership sites, etc.

Depending on which which WordPress plugins you are using on your website, you would need to act accordingly to make sure that your website is GDPR compliant.

A lot of the best WordPress plugins have already gone ahead and added GDPR enhancement features. Let’s take a look at some of the common areas that you would need to address:

Google Analytics

Like most website owners, you’re likely using Google Analytics to get website stats. This means that it is possible that you’re collecting or tracking personal data like IP addresses, user IDs, cookies and other data for behavior profiling. To be GDPR compliant, you need to do one of the following:

  1. Anonymize the data before storage and processing begins
  2. Add an overlay to the site that gives notice of cookies and ask users for consent prior to tracking

Both of these are fairly difficult to do if you’re just pasting Google Analytics code manually on your site. However, if you’re using MonsterInsights, the most popular Google Analytics plugin for WordPress, then you’re in luck.

They have released an EU compliance addon that helps automate the above process. MonsterInsights also has a very good blog post about all you need to know about GDPR and Google Analytics (this is a must read, if you’re using Google Analytics on your site).

MonsterInsights EU Compliance Addon

Contact Forms

If you are using a contact form in WordPress, then you may have to add extra transparency measures specially if you’re storing the form entries or using the data for marketing purposes.

Below are the things you might want to consider for making your WordPress forms GDPR compliant:

  • Get explicit consent from users to store their information.
  • Get explicit consent from users if you are planning to use their data for marketing purposes (i.e adding them to your email list).
  • Disable cookies, user-agent, and IP tracking for forms.
  • Make sure you have a data-processing agreement with your form providers if you are using a SaaS form solution.
  • Comply with data-deletion requests.
  • Disable storing all form entries (a bit extreme and not required by GDPR). You probably shouldn’t do this unless you know exactly what you’re doing.

The good part is that if you’re using WordPress plugins like WPForms, Gravity Forms, Ninja Forms, Contact Form 7, etc, then you don’t need a Data Processing Agreement because these plugins DO NOT store your form entries on their site. Your form entries are stored in your WordPress database.

Simply adding a required consent checkbox with clear explanation should be good enough for you to make your WordPress forms GDPR compliant.

WPForms, the contact form plugin we use on WPBeginner, has added several GDPR enhancements to make it easy for you to add a GDPR consent field, disable user cookies, disable user IP collection, and disable entries with a single click.

GDPR Form Fields in WPForms

Email Marketing Opt-in Forms

Similar to contact forms, if you have any email marketing opt-in forms like popups, floating bars, inline-forms, and others, then you need to make sure that you’re collecting explicit consent from users before adding them to your list.

This can be done with either:

  1. Adding a checkbox that user has to click before opt-in
  2. Simply requiring double-optin to your email list

Top lead-generation solutions like OptinMonster has added GDPR consent checkboxes and other necessary features to help you make your email opt-in forms compliant. You can read more about the GDPR strategies for marketers on the OptinMonster blog.

WooCommerce / Ecommerce

If you’re using WooCommerce, the most popular eCommerce plugin for WordPress, then you need to make sure your website is in compliance with GDPR.

The WooCommerce team has prepared a comprehensive guide for store owners to help them be GDPR compliant.

Retargeting Ads

If your website is running retargeting pixels or retargeting ads, then you will need to get user’s consent. You can do this by using a plugin like Cooke Notices.

Best WordPress Plugins for GDPR Compliance

There are several WordPress plugins that can help automate some aspects of GDPR compliance for you. However, no plugin can offer 100% compliance due to the dynamic nature of websites.

Beware of any WordPress plugin that claims to offer 100% GDPR compliance. They likely don’t know what they’re talking about, and it’s best for you to avoid them completely.

Below is our list of recommended plugins for facilitating GDPR compliance:

  • MonsterInsights – if you’re using Google Analytics, then you should use their EU compliance addon.
  • WPForms – by far the most user-friendly WordPress contact form plugin. They offer GDPR fields and other features.
  • Cookies Notice – popular free plugin to add an EU cookie notice. Integrates well with top plugins like MonsterInsights and others.
  • Delete Me – free plugin that allow users to automatically delete their profile on your site.
  • OptinMonster – advanced lead generation software that offers clever targeting features to boost conversions while being GDPR compliant.
  • Shared Counts – instead of loading the default share buttons which add tracking cookies, this plugin load static share buttons while displaying share counts.

We will continue to monitor the plugin ecosystem to see if any other WordPress plugin stands out and offer substantial GDPR compliance features.

Final Thoughts

Whether you’re ready or not, GDPR will go in effect on May 25, 2018. If your website is not compliant before then, don’t panic. Just continue to work towards compliance and get it done asap.

The likelihood of you getting a fine the day after this rule goes in effect are pretty close to zero because the European Union’s website states that first you’ll get a warning, then a reprimand, and fines are the last step if you fail to comply and knowingly ignore the law.

The EU is not out to get you. They’re doing this to protect user’s data and restore people’s trust in online businesses. As the world goes digital, we need these standards. With the recent data breaches of large companies, it’s important that these standards are adapted globally.

It will be good for all involved. These new rules will help boost consumer confidence and in turn help grow your business.

We hope this article helped you learn about WordPress and GDPR compliance. We will do our best to keep it updated as more information or tools get released.

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.

Additional Resources

Legal Disclaimer / Disclosure

We are not lawyers. Nothing on this website should be considered legal advice. Due to the dynamic nature of websites, no single plugin or platform can offer 100% legal compliance. When in doubt, it’s best to consult a specialist internet law attorney to determine if you are in compliance with all applicable laws for your jurisdictions and your use cases.

WPBeginner founder, Syed Balkhi, is also the co-founder of OptinMonster, WPForms, and MonsterInsights.

The post The Ultimate Guide to WordPress and GDPR Compliance – Everything You Need to Know appeared first on WPBeginner.

How to Add Magnifying Zoom for Images in WordPress

Do you want to add an Amazon like magnifying zoom for images in WordPress? Zooming images allow users to see details that they would not see in a normal sized image. In this article, we will show you how to easily add magnifying zoom for… Read More »

The post How to Add Magnifying Zoom for Images in WordPress appeared first on WPBeginner.

Do you want to add an Amazon like magnifying zoom for images in WordPress? Zooming images allow users to see details that they would not see in a normal sized image. In this article, we will show you how to easily add magnifying zoom for images in WordPress.

How to Add Magnifying Zoom for Images in WordPress

Adding Magnifying Zoom for WordPress Images

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

Upon activation, you need to visit WP Image Zoom page in your WordPress admin. From here, you can manage the zoom settings for your images.

WP Image Zoom

In the General Settings tab, you can enable features like zoom on WooCommerce product images, thumbnails, mobile devices, attachment pages, category pages, and more. It also allows you to remove the lightbox, so your users can smoothly zoom images.

General Settings

If you are not removing lightbox for images, then you can scroll down for further settings like enabling zoom inside a lightbox.

Note: You can see supported lightboxes to make sure that the zoom works fine inside a lightbox.

Enable Lightbox Zoom

Once you are done adjusting the settings on this page, don’t forget to click on the Save Changes button.

Next, you need to visit the Zoom Settings tab. It has 4 easy steps to add magnifying zoom for your images.

First, you need to select the shape of the lens to zoom images. You can choose from circle, square, and zoom window lens shape.

Select Zoom Lens Shape

After choosing your lens, go to the next step and preview an image with the selected lens to see how it works. The plugin has a preview image that you can use to test your changes.

Preview Zoom Image

You can come back and live preview this image after making any changes to the configuration below.

In the next step, you can select cursor type, set animation easing effect, enable the zoom on mouse hover or mouse click, and define a zoom level. Some of these features are only available for the pro version of the plugin.

General Configuration

Now you can go to the Lens configuration tab for settings like lens size, lens color, lens border options, and more. These settings are effective only if you selected the circle or square lens in Step 1.

Lens Configuration

Next, you can visit the Zoom Window configuration tab. This tab is enabled only if you selected the Zoom Window Lens in Step 1.

From here, you can change the width and height of zoom window, positioning, distance from the main image, borders, and more.

Zoom Window Configuration

Lastly, you can add custom text to the image and choose text size, color, and alignment.

Custom Text Configuration

Don’t forget to click on the Save Changes button to store your settings. You can always look at the preview image to see how the magnifier will work on your blog images with these settings.

Save Changes

The above settings will enable magnifying zoom on your WooCommerce product images. To enable zoom for your images on WordPress posts and pages, you need to follow the steps below.

Enabling Magnifying Zoom for Images on Posts and Pages

By default, the magnifying zoom is not enabled for images on your posts and pages. You need to do it manually after adding an image to your content.

Once you add the image to your post or page, simply click to select it and then click on the magnifying icon in the toolbar. This icon will apply the zoom settings on your image.

Add Zoom to Posts / Pages Images

After that, head over to the post to see magnifying zoom feature enabled for the selected image. You need to repeat this step each time you want to add the zoom effect to an image.

Apply Zoom Post / Page Images

We recommend using high-quality images for the zoom feature to look great. High-quality images are normally larger in file size and take longer to load which will affect your website speed and performance. To solve this issue, you need to optimize your images for the web before uploading them to WordPress.

We hope this article helped you learn how to add magnifying zoom for images in WordPress. You may also want to see our article on how to fix common image issues 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 Magnifying Zoom for Images in WordPress appeared first on WPBeginner.

Installing PowerShell Core on a Raspberry Pi (powered by .NET Core)

Earlier this week I set up .NET Core and Docker on a Raspberry Pi and found that I could run my podcast website quite easily on a Pi. Check that post out as there’s a lot going on. I can test within a Linux Container and output the test results to the …

PowerShell Core on a Raspberry Pi!Earlier this week I set up .NET Core and Docker on a Raspberry Pi and found that I could run my podcast website quite easily on a Pi. Check that post out as there's a lot going on. I can test within a Linux Container and output the test results to the host and then open them in VS. I also explored a reasonably complex Dockerfile that is both multiarch and multistage. I can reliably build and test my website either inside a container or on the bare metal of Windows or Linux. Very fun.

As primarily a Windows developer I have lots of batch/cmd files like "test.bat" or "dockerbuild.bat." They start as little throwaway bits of automation but as the project grows inevitably more complex.

I'm not interested in "selling" anyone PowerShell. If you like bash, use bash, it's lovely, as are shell scripts. PowerShell is object-oriented in its pipeline, moving lists of real objects as standard output. They are different and most importantly, they can live together. Just like you might call Python scripts from bash, you can call PowerShell scripts from bash, or vice versa. Another tool in our toolkits.

PS /home/pi> Get-Process | Where-Object WorkingSet -gt 10MB


NPM(K) PM(M) WS(M) CPU(s) Id SI ProcessName
------ ----- ----- ------ -- -- -----------
0 0.00 10.92 890.87 917 917 docker-containe
0 0.00 35.64 1,140.29 449 449 dockerd
0 0.00 10.36 0.88 1272 037 light-locker
0 0.00 20.46 608.04 1245 037 lxpanel
0 0.00 69.06 32.30 3777 749 pwsh
0 0.00 31.60 107.74 647 647 Xorg
0 0.00 10.60 0.77 1279 037 zenity
0 0.00 10.52 0.77 1280 037 zenity

Bash and shell scripts are SUPER powerful. It's a whole world. But it is text based (or json for some newer things) so you're often thinking about text more.

[email protected]:~ $ ps aux | sort -rn -k 5,6 | head -n6

root 449 0.5 3.8 956240 36500 ? Ssl May17 19:00 /usr/bin/dockerd -H fd://
root 917 0.4 1.1 910492 11180 ? Ssl May17 14:51 docker-containerd --config /var/run/docker/containerd/containerd.toml
root 647 0.0 3.4 155608 32360 tty7 Ssl+ May17 1:47 /usr/lib/xorg/Xorg :0 -seat seat0 -auth /var/run/lightdm/root/:0 -nolisten tcp vt7 -novtswitch
pi 1245 0.2 2.2 153132 20952 ? Sl May17 10:08 lxpanel --profile LXDE-pi
pi 1272 0.0 1.1 145928 10612 ? Sl May17 0:00 light-locker
pi 1279 0.0 1.1 145020 10856 ? Sl May17 0:00 zenity --warning --no-wrap --text

You can take it as far as you like. For some it's intuitive power, for others, it's baroque.

[email protected]:~ $ ps -eo size,pid,user,command --sort -size | awk '{ hr=$1/1024 ; printf("%13.2f Mb ",hr) } { for ( x=4 ; x<=NF ; x++ ) { printf("%s ",$x) } print "" }'

0.00 Mb COMMAND
161.14 Mb /usr/bin/dockerd -H fd://
124.20 Mb docker-containerd --config /var/run/docker/containerd/containerd.toml
78.23 Mb lxpanel --profile LXDE-pi
66.31 Mb /usr/lib/xorg/Xorg :0 -seat seat0 -auth /var/run/lightdm/root/:0 -nolisten tcp vt7 -novtswitch
61.66 Mb light-locker

Point is, there's choice. Here's a nice article about PowerShell from the perspective of a Linux user. Can I install PowerShell on my Raspberry Pi (or any Linux machine) and use the same scripts in both places? YES.

For many years PowerShell was a Windows-only thing that was part of the closed Windows ecosystem. In fact, here's video of me nearly 12 years ago (I was working in banking) talking to Jeffrey Snover about PowerShell. Today, PowerShell is open source up at https://github.com/PowerShell with lots of docs and scripts, also open source. PowerShell is supported on Windows, Mac, and a half-dozen Linuxes. Sound familiar? That's because it's powered (ahem) by open source cross platform .NET Core. You can get PowerShell Core 6.0 here on any platform.

Don't want to install it? Start it up in Docker in seconds with

docker run -it microsoft/powershell

Sweet. How about Raspbian on my ARMv7 based Raspberry Pi? I was running Raspbian Jessie and PowerShell is supported on Raspbian Stretch (newer) so I upgraded from Jesse to Stretch (and tidied up and did the firmware while I'm at it) with:

$ sudo apt-get update

$ sudo apt-get upgrade
$ sudo apt-get dist-upgrade
$ sudo sed -i 's/jessie/stretch/g' /etc/apt/sources.list
$ sudo sed -i 's/jessie/stretch/g' /etc/apt/sources.list.d/raspi.list
$ sudo apt-get update && sudo apt-get upgrade -y
$ sudo apt-get dist-upgrade -y
$ sudo rpi-update

Cool. Now I'm on Raspbian Stretch on my Raspberry Pi 3. Let's install PowerShell! These are just the most basic Getting Started instructions. Check out GitHub for advanced and detailed info if you have issues with prerequisites or paths.

NOTE: Here I'm getting PowerShell Core 6.0.2. Be sure to check the releases page for newer releases if you're reading this in the future. I've also used 6.1.0 (in preview) with success. The next 6.1 preview will upgrade to .NET Core 2.1. If you're just evaluating, get the latest preview as it'll have the most recent bug fixes.

$ sudo apt-get install libunwind8

$ wget https://github.com/PowerShell/PowerShell/releases/download/v6.0.2/powershell-6.0.2-linux-arm32.tar.gz
$ mkdir ~/powershell
$ tar -xvf ./powershell-6.0.2-linux-arm32.tar.gz -C ~/powershell
$ sudo ln -s ~/powershell/pwsh /usr/bin/pwsh
$ sudo ln -s ~/powershell/pwsh /usr/local/bin/powershell
$ powershell

Lovely.

GOTCHA: Because I upgraded from Jessie to Stretch, I ran into a bug where libssl1.0.0 is getting loaded over libssl1.0.2. This is a complex native issue with interaction between PowerShell and .NET Core 2.0 that's being fixed. Only upgraded machines like mind will it it, but it's easily fixed with sudo apt-get remove libssl1.0.0

Now this means my PowerShell build scripts can work on both Windows and Linux. This is a deeply trivial example (just one line) but note the "shebang" at the top that lets Linux know what a *.ps1 file is for. That means I can keep using bash/zsh/fish on Raspbian, but still "build.ps1" or "test.ps1" on any platform.

#!/usr/local/bin/powershell

dotnet watch --project .\hanselminutes.core.tests test /p:CollectCoverage=true /p:CoverletOutputFormat=lcov /p:CoverletOutput=./lcov

Here's a few totally random but lovely PowerShell examples:

PS /home/pi> Get-Date | Select-Object -Property * | ConvertTo-Json

{
"DisplayHint": 2,
"DateTime": "Sunday, May 20, 2018 5:55:35 AM",
"Date": "2018-05-20T00:00:00+00:00",
"Day": 20,
"DayOfWeek": 0,
"DayOfYear": 140,
"Hour": 5,
"Kind": 2,
"Millisecond": 502,
"Minute": 55,
"Month": 5,
"Second": 35,
"Ticks": 636623925355021162,
"TimeOfDay": {
"Ticks": 213355021162,
"Days": 0,
"Hours": 5,
"Milliseconds": 502,
"Minutes": 55,
"Seconds": 35,
"TotalDays": 0.24693868190046295,
"TotalHours": 5.9265283656111105,
"TotalMilliseconds": 21335502.1162,
"TotalMinutes": 355.59170193666665,
"TotalSeconds": 21335.502116199998
},
"Year": 2018
}

You can take PowerShell objects to and from Objects, Hashtables, JSON, etc.

PS /home/pi> $hash | ConvertTo-Json

{
"Shape": "Square",
"Color": "Blue",
"Number": 1
}
PS /home/pi> $hash = @{ Number = 1; Shape = "Square"; Color = "Blue"}
PS /home/pi> $hash

Name Value
---- -----
Shape Square
Color Blue
Number 1


PS /home/pi> $hash | ConvertTo-Json
{
"Shape": "Square",
"Color": "Blue",
"Number": 1
}

Here's a nice one from MCPMag:

PS /home/pi> $URI = "https://query.yahooapis.com/v1/public/yql?q=select  * from weather.forecast where woeid in (select woeid from geo.places(1) where  text='{0}, {1}')&format=json&env=store://datatables.org/alltableswithkeys"  -f 'Omaha','NE'

PS /home/pi> $Data = Invoke-RestMethod -Uri $URI
PS /home/pi> $Data.query.results.channel.item.forecast|Format-Table

code date day high low text
---- ---- --- ---- --- ----
39 20 May 2018 Sun 62 56 Scattered Showers
30 21 May 2018 Mon 78 53 Partly Cloudy
30 22 May 2018 Tue 88 61 Partly Cloudy
4 23 May 2018 Wed 89 67 Thunderstorms
4 24 May 2018 Thu 91 68 Thunderstorms
4 25 May 2018 Fri 92 69 Thunderstorms
34 26 May 2018 Sat 89 68 Mostly Sunny
34 27 May 2018 Sun 85 65 Mostly Sunny
30 28 May 2018 Mon 85 63 Partly Cloudy
47 29 May 2018 Tue 82 63 Scattered Thunderstorms

Or a one-liner if you want to be obnoxious.

PS /home/pi> (Invoke-RestMethod -Uri  "https://query.yahooapis.com/v1/public/yql?q=select  * from weather.forecast where woeid in (select woeid from geo.places(1) where  text='Omaha, NE')&format=json&env=store://datatables.org/alltableswithkeys").query.results.channel.item.forecast|Format-Table

Example: This won't work on Linux as it's using Windows specific AIPs, but if you've got PowerShell on your Windows machine, try out this one-liner for a cool demo:

iex (New-Object Net.WebClient).DownloadString("http://bit.ly/e0Mw9w")

Thoughts?


Sponsor: Check out JetBrains Rider: a cross-platform .NET IDE. Edit, refactor, test and debug ASP.NET, .NET Framework, .NET Core, Xamarin or Unity applications. Learn more and download a 30-day trial!



© 2018 Scott Hanselman. All rights reserved.
     

13 Best Content Marketing Tools and Plugins for WordPress (Expert Pick)

Are you looking for the best content marketing tools and plugins that will help you create killer content for your WordPress blog? Great content helps you increase your website traffic, get more subscribers, and grow your sales. In this article, we have hand-picked the best… Read More »

The post 13 Best Content Marketing Tools and Plugins for WordPress (Expert Pick) appeared first on WPBeginner.

Are you looking for the best content marketing tools and plugins that will help you create killer content for your WordPress blog? Great content helps you increase your website traffic, get more subscribers, and grow your sales. In this article, we have hand-picked the best content marketing tools and plugins for your WordPress site.

Best WordPress plugins and tools to create content

Why Do You Need Content Marketing Tools & Plugins?

Often businesses rely on their best guesses to create a content strategy. Each day millions of gigabytes of new content is created on the internet. All of this content competes against each other to attract a large but limited number of audience.

Relying on your best guess will not take you very far. This is why smart marketers use tools to create a better content marketing strategy that’s data-driven.

These content creation tools not only help you find what to write about, but they also help you see what your users are looking for, and how you can get more traffic for existing content.

That being said, let’s take a look at some of the best content marketing tools and plugins for your WordPress site.

1. MonsterInsights

MonsterInsights

MonsterInsights is the best Google Analytics plugin for WordPress. It allows you to properly install Google Analytics and view your website traffic reports inside WordPress dashboard.

MonsterInsights helps you see how people find and use your website. You can see your top content, top referral source, most profitable pages, and more.

Aside from keeping traffic stats, MonsterInsights also helps you track user engagement which is extremely useful in planning your content strategy.

2. Yoast SEO

Yoast SEO

Yoast SEO is the best WordPress SEO plugin. Often people don’t understand the full power of Yoast’s plugin. It’s not just a plugin to add meta tags. It is a complete content optimization suite with tons of features to help you improve your website.

For more on this topic, see our complete WordPress SEO guide with step by step instructions that will take website SEO to the next level.

3. Edit Flow

Edit Flow

Having a proper editorial workflow helps you create useful content on a regular basis. Edit Flow helps you add custom post statuses, leave editorial feedback, view editorial calendar, and execute your content strategy like a pro.

All these things come particularly handy if you are running a multi-author WordPress blog. For detailed instructions, see our guide on how to improve your editorial workflow in WordPress.

4. SEMRush

SEMRush

Used by thousands of SEO professionals, SEMRush is one of the best SEO tools on the market. It allows you to easily gather analytics and competitor insights to help improve your own SEO.

You can learn about your competitor’s top organic keywords, how they get backlinks, their advertising strategy, and more. It also helps you monitor your own keywords, backlinks, find out keywords that you can easily rank for, and tons of other useful data that you can use to improve your content strategy.

5. Ahrefs

Ahrefs

Ahrefs is another popular tool to find out why your competitors are ranking higher than you, and what you can do to outrank them in search results. It comes with keyword explorer and content research tools, which help you find out what kind of content is ranking for those keywords and why.

It has a powerful crawler that monitors the web. You can use it to track your backlinks, search rankings, competitor backlinks, paid advertising keywords, and more.

6. Canva

Canva

Not everyone can create beautiful images for their blog posts. This is where Canva comes in. It helps you create beautiful images for your blog posts like a Pro without worrying about copyright.

It comes with a powerful yet extremely simple image editing tool that runs in your browser. You can select from a large number of templates, graphics, icons, banners, and infographics to use as a starting point. Once you are done editing, simply export the image and use it in your articles.

7. Grammarly

Grammarly

Grammarly is one of the best online grammar checker tools for WordPress users. It works in any writing area, including your WordPress post editor. You can install it as a browser add-on for Google Chrome, Firefox, and even Microsoft Edge.

Upon installation, it will show an indicator at the bottom right corner of the writing area. Clicking on the indicator will show you the number of errors. Spelling, grammar, and contextual errors will be highlighted with an underline as you write.

8. reSmush.it

reSmush.it

Large images take longer to load which can negatively affect your WordPress speed and performance. You need to optimize your images for the web before uploading them to WordPress.

reSmush.it is the best WordPress image compression plugin, that can automatically reduce image file size without affecting quality. It also offers a bulk optimization option which allows you to quickly optimize older images on your website.

9. Good Writer Checkify

Good Writer Checkify

There is a lot that goes into creating a good piece of content. You need to proofread, add images, set featured image, select categories and tags, configure SEO settings, and more.

It’s easy to forget an important part of the process and end up publishing the article with mistakes.

Good Writer Checkify plugin helps you avoid silly mistakes by adding a simple blog post checklist. You can add items that you need to check before hitting the publish button. It is particularly useful if you are running a multi-author website.

10. Shared Counts

Shared Counts

Shared Counts is one of the best social media plugins for WordPress. It allows you to easily add social media sharing buttons to your blog posts. It can also display share counts for each platform as well as the total number of shares for your article.

Unlike other social media plugins which slows down your website, Shared Counts is highly optimized for speed. It comes with only the best social media websites and multiple button styles that you can use.

11. Title and Nofollow for Links

Title and Nofollow for Links

Many SEO experts recommend adding a nofollow tag to external links. However, WordPress doesn’t come with a default option to add nofollow tag. Title and Nofollow for links solves this problem by adding the title and nofollow options to the insert link popup in WordPress.

For more on this topic see our article on how to add title and nofollow to insert link popup in WordPress.

12. Revive Old Posts

Revive Old Posts

Sometimes your blog’s old articles will get neglected due to lack of time and resources. Revive Old Posts helps you solve this by automatically sharing your old articles on your social media profiles.

This helps you promote your old articles automatically while actively driving traffic to your blog. It also helps your new social media followers discover content that they may have missed before.

13. OptinMonster

OptinMonster

More than 75% of visitors abandoning your website will leave and never come back. This is where you need OptinMonster. It is the best lead generation software that helps you convert abandoning website visitors into subscribers, customers, and followers.

It comes with beautiful optin forms, that you can connect with your email marketing service or CRM software. You use it to effectively reduce bounce rate, increase user engagement, and boost email subscriptions.

We hope this article helped you find the best content marketing tools and plugins for your WordPress website. You may also want to see our actionable tips on driving 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.

The post 13 Best Content Marketing Tools and Plugins for WordPress (Expert Pick) appeared first on WPBeginner.