CAll Us: +1 888-999-8231 Submit Ticket

Doing Product Pages Right – Hostdedi Blog

How much effort have you put into your product page? Yes, I know you found information and images from the manufacturer and added them. Sure, you named the product and maybe if you were really working on good product pages, you took an extra picture of the product in use to highlight what it really looks like to your customers.

But I know most ecommerce sites don’t even go that far.

About 10 years ago I worked in retail and one of my jobs was to add products to our site, but only after everything else was done and if the boss couldn’t find anything extra for me to do. This was shortsighted and meant that they didn’t see much business from their online store. But if you don’t put any effort into your product pages, the natural outcome is little traction with your site.

It’s important to remember that your online users can’t touch your product. They can’t ask a salesperson a question or get specific feedback on how the product worked for someone they can talk to. Customers are reliant on the information you provide them to help them make a purchase.

Today we’re going to talk about how to design a great product page. Remember, from the product name to the reviews, your product page is a landing page. Its job is to sell your products to your customers.

Product Name

If your product page is a landing and sales page, then the first thing you need to look at is the name of your product. This is the title of your page and you should spend just as much time thinking about this as you would for any blog post you want to rank well in search engines. The more descriptive your product name is, the better it is, at least up to a point.

We’ve all seen ridiculously keyword-stuffed Amazon product titles. We want to use a descriptive product name, but not crossover into the realm of these overloaded titles.

Take a look at these Mpow headphones on Amazon.

If you’re looking for waterproof Bluetooth sports headphones with controls on the headphones, the title is a great match. I think it’s getting close to being a bit long, but just by reading the product name, you get a summary of all the features that the headphones provide.

When you’re looking at your product names use the Google Keyword Planner to investigate what terms are ranking well for your product. Use these terms to help you craft a well-optimized title that will bring customers to your landing page.

Description

When it comes to your product description, the first thing to ask yourself is “what questions will myom customers have”. A description that answers your customer’s questions poorly will mean they make a purchase they’re not happy with. Then they’ll want to return it, and you may get a poor review on the product.

According to Nielsen Group, 20% of missed purchases were because a product didn’t have the information a customer was looking for in the description. If users don’t see the information they’re looking for in your product description, they’re going to turn to Google. That means you risk having them find the product at a better price elsewhere. Making your customers search to get more information is just like losing the purchase and all future purchases from your customer.

As you write your product description ask yourself what questions the customer will have about your product? Your goal is to answer the questions and deflate the objections that customers will have so that they feel confident in their purchase.

Good product descriptions are jargon-free. They’re not heavy on marketing text, but are to the point and clear. If you’re talking about 5 different feature highlights, use bullet points so that readers can scan to get the information they need quickly.

If you’ve got many of the same types of products, say dishwashers, then take the time to standardize the language across suppliers. Don’t list measurements in inches for one product and then centimetres for other products. Standardize on one method, or if you deal with international clients let them choose what measurement they want to see. You can see a great example of this with Apidura Cycling bags. They let users change between inches and centimetres for their bag measurements. This puts their users in control.

Product Images

After your product name and description, it’s important to focus on the images you provide to your customer. Remember, they can’t touch the product. They can’t tell how big it is, or exactly what shade of blue it is. They are relying entirely on you to provide this information with your images.

There are two ways to go with product images. You can choose to use a backdrop with other stuff that matches the product, or you can go with a flat white version. Keep the style consistent including the dimensions used with the final images. I think the best option is to have a combination of both of these options.

Bellroy is a great example of both methods combined. They show you several images of their products on a flat white background. They also add it with known items, like physical bills and blank cards that are the same size as credit cards. You get to see high-quality uncluttered photos to judge colour and texture, then clean photos that help you get an idea of the size of items you’re looking at.

Bellroy also provides high-quality images for each color option for a product. You don’t have to guess based on a color swatch, you can see exactly what you’re choosing as you make changes.

While this may look like a lot of work, it’s just a bit of work and a small investment. You don’t need a fancy camera. Any smartphone in the last few years will do. If you don’t have natural light, then you will need to purchase a consistent light source. You can usually find the Godox SL60W for under $200. If you’re dealing with small products and want to have an extra clean background, then look at a softbox. You can find these on Amazon for as little as $30.

With a light source and a softbox, all it takes is a bit of practice. Take a bunch of test images from different angles. If you spend a weekend playing around you’ll improve greatly so that you can get good images for Monday.

If you’re looking for a great walkthrough on product photography, check out the video below by Peter McKinnon.

Once you’ve got the images, take a few minutes to edit them for color and contrast. Most people use a sized template so that every image on the site is the same size. 

If you’re not sure what this means, it’s like having a company letterhead you always use. In this case, it’s a Photoshop file that’s 2000X2000 and every image you take goes on the same template so that your site images look uniform. 

Then once you have your images on the template looking how you want them, save them out in a web format. Look to keep them under 700kb if possible. To help with this at the final stage you can use tools like Kraken to optimize the images as you upload them.

Putting some effort into your product images will help your store stand above the competition.

Adding To Cart

Next, your add to cart button. There are a few mistakes that many sites make with this crucial interaction. First, make sure that users can see the button without scrolling across all devices. It should be obvious and a contrasting color from the rest of your site so that it stands out. You can see a good example of this on MEC below.

Note that they have a nice product image, and the purchase button is in a vibrant green and stays with the customer as they scroll on a mobile device.

You also need to make sure that it’s clear to the user something happened when they add something to the cart. Luckily WooCommerce has this as a default with a banner being displayed to a user after a product has been successfully added to the cart.

The second most important interaction after your main purchase button may be the option to add a product to a wishlist. A good spot for this is just below the main purchase CTA. I have many wish lists on Amazon for when I’m ready to revamp parts of my office. I already have my desk video setup all picked out in a wishlist. When it’s time to purchase I just need to add all those products to my cart, and then checkout.

Showing your product in use can show how easy it is to use to customers that are concerned about that. Yes, it might mean some duplicate information, but highlight the benefits and deflate the objections with your videos, just like you do with your marketing copy. Some studies suggest that a good product video increases conversion to sale by 84%. Videos are also known to have higher click through rates in search.

You can see this if we head back to Bellroy. The first thing that comes up with their products is a video of their product in use. 

Just like good product photos don’t have to be a huge investment, decent video doesn’t have to be a huge investment. The light I recommended above is a great video light. Your recent smartphone is a decent video camera. Add a lavalier microphone to this setup for $50 and you’ve got a good video setup.

Pricing

When it comes to pricing, it’s pretty straight forward. Make sure you don’t hide any price increases from your users. If the blue version is more expensive, change the price when the user selects the blue version (don’t worry both WooCommerce & Magento do this out of the box). Just under the price is also a good place to add product availability information. Don’t let your customers try to add something to the cart only to find that the product isn’t available in their chosen combination of size and color.

Social Proof: Reviews

Did you know that user reviews are 12 times more powerful at convincing people to purchase than your marketing copy is? That means you need to employ ratings on your site. Display the overall rating, usually stars, at the top near your product title and description. Then after all the product information your customers want, display the reviews you’ve gathered from users.

It’s important to make your reviews filterable, and don’t censor bad reviews. I’ve often read the bad reviews for a product to find the pain points and then purchased because I don’t care about any of the major issues with it.

One great plugin to help enhance the reviews on your site is WooCommerce Product Reviews Pro. This plugin will let you add product photos and user videos to your reviews to supercharge your social proof.

Remember, your product page is a landing page and should be optimized for search engines and to convert visitors to customers. As I said when I talked specifically about mCommerce, make sure that you A/B Test the changes you’re making to your product pages to help ensure that they’re having the effect you expect. If you can put a bit of effort into your product pages, you’ll see big rewards in your sales.

Source link

The Top 5 SEO Plugins for WordPress Compared

Whether your WordPress website is a personal blog, ecommerce store, or hosting website, choosing the right SEO plugin shouldn’t be ignored. In this post, we’re comparing the top SEO plugins for WordPress, so you can learn how to best optimize your site for search engines. Doing this the right way will improve your search visibility, page and post ranking, boost your traffic, and improve your sales. 

You may have heard about the Yoast SEO plugin by now which is currently the most popular All-In-One SEO tool for WordPress.

But, did you know that there are also other well viable options on the market as well? SEO Optimization tool Rank Math has built a huge and successful community in a short period.

This proves that while you are building your fantastic website with quality content, ready for visitors to consume, you don’t have to think about things such as; will anyone see my content or if my website is good enough.

With so many great solutions out there, driving the website traffic has never been this easy.

In this article you will learn the following:

  1. What are SEO Plugins for WordPress
  2. SEO tips everyone should use
  3. 6 Best SEO Plugins compared

Let’s get started!

What are SEO Plugins for WordPress

The great thing about SEO plugins is that even if you are not SEO-savvy, you can still take advantage of the latest SEO tweaks. They provide a great all-in-one solution for the end-user.

All you have to do is choose the Plugins option on your WordPress Dashboard, click “Add New”, type the name of the plugin in the search bar, Install, and Activate.

Most of these SEO Tools come either with a free version and optional premium version as well. Just keep in mind that none of these tools is a perfect “do-it-all” option. 

There are a lot of other things to consider when it comes to search engine optimization such as keyword research.

This brings us to the next chapter.

SEO Tips You Should Consider

Even though all-in-one SEO tools are great, there are other important things you have to do as well.

If ranking high on Google and other search engines was easy as walking, everyone in the world would have a successful website and do this.

Since that is not the reality, and the majority of published posts don’t get any traffic, here are some useful SEO tips that we recommend.

KEYWORD RESEARCH

This is the most important step to take. There are many great free and paid tools that will ease your keyword pursuits such as Ahrefs and Ubersuggest.

Once you have found a niche with relatively low competition you are ready to go. Oh and don’t forget to export as many keywords as you can for future use.

USING SOCIAL MEDIA TO YOUR ADVANTAGE

You have published a few posts and pages, so what do you do next? Share all your post on all major social media websites such as Facebook, Instagram, Youtube, and Pinterest.

Join all major groups, follow the biggest profiles, and don’t forget to take part in discussions as often as possible.

To rank your page on the first page of search engines, you shouldn’t forget to build links from other websites and use internal links.

Since links are an important ranking factor and each acquired backlink is viewed differently by Google, do not sleep on this.

Now, let’s see which plugins made our top list.

Our Top 5 favorite SEO Plugins for WordPress

1. Yoast SEO

[ embed video https://www.youtube.com/watch?v=FUmVHHvsLsw ]

PRICING: Free/Premium(from $104.50)
ACTIVE INSTALLATIONS: 5+ million
WP SCORE: 4.9 out of 5

KEY FEATURES: 

  • Keyword optimization
  • Readability check
  • Redirect feature
  • Google Search Console integration
  • Automatic creation of XML sitemap
  • Excluding the “noindex” types of content from being indexed in search engine results
  • Title and meta description templates
  • Duplicate content detection
  • Regular updates
  • Open Graph data for sharing posts on social media

Yoast SEO is the most popular SEO tool for WordPress, and for a reason. It has over 5 million active installations and over 25.000 five star user reviews.

It comes as a free and premium version. While the premium option comes with extra things like redirect manager, internal link suggestions and block, content insights. The free option is great as well.

It is the complete SEO tool that helps websites to rank higher in search engines, and the Yoast team provides regular support on wordpress.org forums(Premium Users).

Anyone new or old to WordPress should at least give the free Yoast version a try.

2. Rank Math

[ embed video https://www.youtube.com/watch?time_continue=1&v=NgeaqIy2OB0&feature=emb_logo ]

PRICING: Free/Premium(coming in Fall 2020)
ACTIVE INSTALLATIONS: 500.000+
WP SCORE: 4.9 out of 5

KEY FEATURES: 

  • Easy to follow Setup Wizard
  • User-Friendly Interface
  • Google Webmaster Central Integration(In progress)
  • Keyword Comparison & Google Trends Tool(TBA)
  • Google Crawl Errors
  • Contextual Help (tooltips, notices, help tabs, etc)
  • Image SEO
  • Schema rich snippets and article schema
  • News Sitemap for Submitting Websites on Google News(TBA)
  • Ping Search Engines
  • Manage meta tags such as noindex, noarchive and such

Rank Math is the new player in the SEO website optimization game and the fastest-growing as well. Some would argue that it’s also the most powerful.

This fantastic tool lets you optimize your website for search engines and social media. Unlike Yoast, Rank Math is still a free tool packed with premium options which otherwise, you would have to pay for.

The premium version is gonna be released very soon with more features that are announced on their official Facebook page. If you are still doubting whether you should switch from Yoast to Rank Math, don’t worry, you can do this easily by the 1-click migration wizard which comes integrated by default.

3. All-In-One SEO Pack

PRICING: Free/Premium(from $57)
ACTIVE INSTALLATIONS: 2+ million
WP SCORE: 4.7 out of 5

KEY FEATURES: 

  • XML Sitemap support 
  • RSS Sitemap
  • Google AMP support
  • Google Analytics support
  • Schema.org Markup
  • Support for SEO on Custom Post Types
  • ONLY free plugin to provide SEO Integration for e-Commerce sites, including WooCommerce
  • Nonce Security built into All in One SEO Pack
  • Generates META tags automatically
  • Built-in API so other plugins/themes can access and extend its functionality

If you don’t want to use Yoast or Rank Math, consider the All-in-One SEO Pack as your third option. As with the before-mentioned plugins, it also does the same thing, and it has a clean and user-friendly interface.

It offers a wide range of features, both free and paid tools to which help your website. One of the neat features this plugin offers is that you can use it to edit .htaccess file without FTP and edit your robots.txt file which is suited even for complete beginners.

As with Yoast and Rank Math, it also supports AMP (Google-friendly mobile version of your website). You can also optimize the WooCommerce store for SEO, and it’s packed with additional addons as well.

Clean, simple, and more affordable than Yoast. 

4. SEOPress

[ embed video https://www.youtube.com/watch?v=9XMXBHBdva0 ]

PRICING: Free/Premium for $39
ACTIVE INSTALLATIONS: 100.000+
WP SCORE: 4.9 out of 5

KEY FEATURES: 

  • Redirections and 404 monitoring
  • Google Analytics stats in your WordPress dashboard
  • Video XML Sitemap
  • Titles & metas
  • XML sitemap
  • HTML sitemap
  • Backlinks from integration with Majestic
  • Keyword suggestions for your content via Google’s Suggestion tool
  • Google Structured Data Types: product, recipe, review, FAQ, course, article, event, local business, and video
  • Google Page Speed integration

SEOPress is a popular, fast, and simple SEO friendly plugin tool for website optimization. This is all thanks to its affordable price, clean interface that comes with a comprehensive set of features.

As with other SEO plugin tools in this list, expect to find open graph support, image, and content, XML sitemaps, meta title, and description features integrated within the plugin.

This means that you don’t have to slow down your website with other plugins that do one specific thing since SEOPress provides that in one affordable package. 

What differentiates this plugin from others in its price range is a unique feature of discovering new keywords via Google’s Suggestion tool.

5. SEO Framework

[ insert image from Slack ]

PRICING: Free/Premium(from $7)
ACTIVE INSTALLATIONS: 100.000+
WP SCORE: 4.9 out of 5

KEY FEATURES: 

  • Duplicated content protection
  • XML Sitemap(Basic & Google News)
  • SEO Management for Robots direction, 301 redirects, and Canonical URLs
  • SMO manage­ment for Open Graph, oEmbed, RSS manage­ment
  • Includes structured data for breadcrumbs, corporate contact, blog posts, site links, search box
  • Automation for the title, robots, Facebook tags, Twitter card, and structured data generation
  • Google Search Console integration 
  • Bing webmasters tools 
  • Pinterest Analytics
  • Google AMP

SEO Framework is the only plugin on the list which claims to be a white hat SEO tool and it’s a great alternative to Yoast and Rank Math.

More lightweight than others and can intelligently generate critical SEO meta tags. This is achieved by reading a user’s WordPress environment in any language.

Design vise, the plugin is clean, simple, and looks like a part of WordPress. What it offers differently than others in the game is a colorful scale that shows you exactly what should you do next.

You can start with SEO Framework for free without any obstructive ads harassing you while you work. I would single out two fantastic features of this plugin and those are:

  • Uses a focus subject instead of a focus keyword, encouraging you to write more naturally 
  • Without any additional plugin, SEO Framework removes spam comments

Side-by-Side Comparison

Let’s do a quick rundown of all five Seo Plugins, compare their features, and see how they stack against each other. 

While Rank Math is completely free and has clear advantages against other plugins, keep in mind that a premium version is coming out in the coming months.

Yoast Rank Math All-In-One SEO Pack  SEOPress SEO Framework
Free Version Available Yes Yes Yes Yes Yes
Annual Pricing $39/site N/A $57/site $39/site $105/two sites
Rank Tracking Yes Yes Yes Yes Yes
On-Page Optimization Premium Yes No No No
XML Sitemap Yes Yes Premium Yes Yes
Customer Support Premium Yes Premium Yes Yes

Conclusion

SEO can get hard and confusing without the right tools. While using any of the mentioned tools is great on its own, here are some other options to accompany top SEO plugins for WordPress you should check out:

If we had to choose only one from all of these plugins, that would be Yoast in case you want a right-out-of-the-box simple and easy-to-use plugin. Otherwise, Rank Math is a tremendous option for those who like to fiddle around with extra features.

Either way, your website needs SEO optimization, so it’s best to just pick one tool and stick with it, as there is something for everyone on the list.

It is alright if you don’t become an SEO expert in one day, as these things take time. Try to take it easy and have fun.

Source link

What Automatic Plugin and Theme Updates Mean for Managed WordPress Hosting

As you may have heard, WordPress 5.5 introduces a User Interface (UI) for toggling automatic plugin and theme updates.

The underlying functionality has actually existed in WordPress since automatic core updates were introduced way back in WordPress 3.7, but for the first time WordPress core is shipping with a user interface for controlling what gets updated.

What Automatic WordPress Plugin and Theme Updates Look Like

As of WordPress 5.5, WP Admin contains a column in the plugins table and on individual themes’ detail screens enabling site administrators to enable (or disable) automatic updates.

Twice a day, WordPress will check to see if newer versions of your installed plugins and/or themes are available and, if you’ve opted into automatic updates, install the latest versions.

If any plugin or theme should fail to update, WordPress will revert that change and send an email to the site’s administrator.

Should I enable automatic WordPress plugin and theme updates?

The short answer, unfortunately, is “it depends.”

If you’ve worked with WordPress for a while, you’ve probably heard (or experienced) horror stories about plugin updates going awry: broken functionality, plugin incompatibilities, or even the dreaded “White Screen of Death” (WSoD) have occurred.

For a hobby site or personal blog, these may be a minor annoyance, but for stores running on platforms like WooCommerce, this can have a significant financial impact.

Ultimately, whether or not you enable automatic updates will come down to your risk tolerance and how much you trust the developers behind your favorite plugins and themes.

Note: For Hostdedi customers, you can rest assured that we’re taking daily backups of both your sites’ code and content. We also have visual regression testing to validate that the update went smoothly. If something goes wrong, we can have your site up and running again in short-order.

With that in mind, here are some tips to reduce the chances of an unattended plugin and/or theme update going off the rails:

Use single-purpose plugins from trusted developers

There are hundreds of thousands of WordPress plugins and themes available, but they are not all built the same.

Automattic, the company behind WordPress.com, maintains several of the most popular WordPress plugins: Jetpack, WooCommerce, Akismet, and more. They also have entire teams of developers and support technicians (“Happiness Engineers”) dedicated to the ongoing development of these plugins.

Likewise, companies like iThemes, Yoast, Sandhills Development, and Awesome Motive have built extremely popular plugins and products installed on millions of WordPress sites, but tend to run smaller teams that may be focused on multiple products concurrently.

Not all plugins have this same level of attention, though. In fact, many WordPress plugins are the result of a single developer scratching a particular itch and sharing their work with the world. The developer may not be interested in providing support, or may not have plans to update the plugin moving forward.

If you’re running a plugin that’s maintained by bigger names in the WordPress community, the chances of a plugin update completely breaking your site is likely far smaller than a small developer who may not have the bandwidth for handling support requests nor a solid QA process.

Your best bet is often to stick to plugins and themes from known entities. You might also consider incentivizing the developers of the plugins and themes you depend on; the plugin may have been free to install, but maintenance of a free plugin still takes time.

Similarly, try to avoid using plugins that try to do too much: the less an individual plugin is responsible for, the less likely it is to break in new and spectacular ways or have conflicts with other plugins.

Never modify plugins or themes directly

Sometimes a plugin does almost everything we want or a theme is almost perfect, and it can be tempting to tweak a value in the source and call it a day.

Unfortunately, the next time that plugin or theme gets updated, these changes are wiped away as WordPress replaces the entire plugin/theme directory with the newly-downloaded version.

A better approach is to extend the plugin or theme using actions and filters (collectively “hooks”) to make adjustments without touching the third-party code.

In the case of themes, we can further extend and/or override parts of the theme by creating a child theme.

Follow the development of critical plugins

If there are a handful of plugins that are crucial to your business, it may not be a bad idea to subscribe to any updates the developers might publish.

For instance, a WooCommerce store owner would likely benefit from subscribing to the WooCommerce Developer Blog — even if you’re not a developer, these blogs often hold details about the new features (and potential conflicts) in future releases.

Some of the larger communities (including WooCommerce) have dedicated Slack teams, where users can interface directly with the plugin developers.

Create (and Test!) Regular Backups

Sometimes, things will go wrong; whether an update goes awry, a site gets hacked, or an editor accidentally deletes a very important post, it’s always a good idea to have backups readily available.

For Hostdedi customers, you can rest assured that we’re taking daily backups of both your sites’ code and content. If something goes wrong, we can have your site up and running again in short-order.

If you want to have a second backup of your site (or first, if your host doesn’t offer backups), you may consider a plugin like UpdraftPlus or BlogVault, which let you schedule backups to external services.

It’s not enough just to create the backup, though; on a semi-regular basis, you should be restoring site backups to a development or staging environment to make sure everything you’re expecting to see is present. Don’t wait until you’re restoring a broken site to discover that some crucial data wasn’t included in your archives!

Automate the Testing of Updates

There’s a big movement towards automation these days, and you can take advantage of these tools and techniques to make sure your sites are always behaving as you expect.

For example, you might use a service like Reflect to write a series of automated tests for your site. Specify key URLs, tell the service where to click and what to look for, and instruct it to run the tests every few hours. Should the tests ever fail, you’ll get an email alerting you to the fact that something has gone wrong.

Of course, if you’re running tests every 12 hours but plugin updates are happening somewhere between those intervals, you may find that your site is broken for hours before you even know about it!

This is where your web host comes in: if you’re on any sort of Managed WordPress hosting plan, your host should be proactive in letting you know if updates are breaking your site.

For example: at Hostdedi, we don’t simply apply every plugin update as it becomes available. Instead, we perform what’s known as Visual Regression Testing before each and every plugin update. Here’s how it works:

First, we determine a set of important, representative URLs on a site: the homepage, shopping carts, product catalogs, blog posts, etc.

Next, we create a copy of your site within our network, and take screenshots of these key URLs; these serve as the “before” snapshots.

Once we have a set of screenshots, we upgrade the plugin on the cloned site, then take fresh screenshots of those same URLs to get our “after” images.

Finally, with both before and after screenshots in-hand, we compare these images to see if anything has changed on any of the pages and/or if any errors have popped up; if nothing has changed, we go ahead and upgrade the plugin on the production site. If however we do detect differences, we alert you (and show our work) so you can decide whether or not to upgrade the plugin in question.

What’s the point of Managed WordPress hosting if I have automatic updates?

Whether you opt for WordPress’ native automatic updates or the more sophisticated offerings included in your Hostdedi Managed WordPress/WooCommerce hosting, keeping your site performant, secure, and online extends beyond just keeping things up-to-date.

Every day, we’re tweaking configurations and building new features to squeeze every bit of performance out of our platforms, built by people who know WordPress inside and out. From auto-scaling to Content Delivery Networks (CDNs), our platform is designed from the ground-up for speed, security, and ease of use. At the same time, we’re partnering with industry leaders to deliver the best of the WordPress community for a low, monthly price and backing it all up with best-in-class, 24/7 support.

Whether you opt to use WordPress core’s automatic updates or trust us to handle them for you, know that Hostdedi is there for you every step of the way.

Source link

Use WordPress Testing Tools to Build Your Plugin & Run Unit Tests in Github Actions

We’ve been talking a bunch about unit tests lately, starting with the basics, and then moving up to adding tests to a plugin, so you could see it in practice. We’ve also covered how to use Github Actions to deploy your site automatically to your host. Today, we’re going to take pieces from both of these concepts and combine them, so that we’re running our tests automatically with Github actions when we push new code to the repository.

The easiest way I’ve found to get started is with WP Testing Tools from Valu Digital. The team at Valu Digital has provided a fairly easy way to get your tests up and running on Github Actions. We’re only going to cover how to use their base template to start from scratch with your plugin development so that you can run tests. Adding their test setup to an existing plugin takes a bit more work.

Add WP Testing Tools Setup to an Existing Plugin

To start, clone the repository onto your local computer.

[email protected]:valu-digital/wp-testing-tools.git your-plugin-name

Next, we need to grab the plugins folder from inside the repository as that will be the base for our plugin. Migrate that folder to where you want your new plugin and rename it to match the plugin name you want to use. 

Dealing with Composer

This testing setup requires Composer, which you don’t need to be intimately familiar with today. I’ll cover Composer in detail in a future post. For now, you’ll need to run composer install to install the required dependencies for WP Testing Tools.

Unfortunately, I’ve found that the repository is missing some required Composer packages so we’ll need to make sure these are also installed with the following commands.

composer require codeception/module-rest --dev 

composer require codeception/module-phpbrowser --dev

composer require codeception/module-db --dev

composer require codeception/module-asserts --dev

composer install

Wait, I got memory errors with Composer. Help! It probably doesn’t matter and you shouldn’t get them in Github Actions so you can ignore it for now.

Now we have the proper tools installed, you can push to Github and you’ll see that the unit tests run without issue. This plugin still isn’t ready for us to build on though so let’s get to renaming the other strings in it and make it our own.

Setting Up Plugin Files

We can start by renaming the plugin header information found in plugin.php. Name it whatever suits your plugin and make the author yourself. We’ll also need to change the namespace and class entries so that we’ve named them properly for our project. I’m changing the namespace to my company name and using PluginBase as my class name for this tutorial. You can see my working renamed file below. I’ve also cleaned up the comments to make it easier to read.

<?php

/**

 * Plugin Name: Hostdedi - Github Actions Unit Tests

 * Plugin URI: https://nexcess.net

 * Description: Plugin base that runs unit tests with Github Actions

 * Author: Curtis McHale

 * Version: 0.1.0

 *

 * @package example

 */

 if (!class_exists('SfndesignPluginBase')) {

    require_once __DIR__ . '/vendor/autoload.php';

 }

SfndesignPluginBase::init();

Now in composer.json, we have a few things to change around as well. Make sure that you’re listed as the author of the plugin and change the links to Github Issues and Source to match your repository. You’ll also need to change the namespace of your plugin under the autoload entry. I’m using my company name so mine says Sfndesign. You can see my changed composer.json file below.

{

  "name": "sfndesign/pluginbase",

  "description": "Actions Plugin",

  "type": "wordpress-plugin",

  "license": "GPL-2.0-or-later",

  "authors": [

    {

      "name": "Curtis McHale",

      "email": "[email protected]",

      "role": "developer"

    }

  ],

  "require-dev": {

    "valu/wp-testing-tools": "^0.4.0",

    "lucatume/wp-browser": "~2.2",

    "codeception/module-rest": "^1.2",

    "codeception/module-phpbrowser": "^1.0",

    "codeception/module-db": "^1.0",

    "codeception/module-asserts": "^1.3"

  },

  "autoload": {

    "psr-4": {

      "Sfndesign\": "src/"

    }

  },

  "scripts": {

    "wp-install": "wp-install --full --env-file .env --wp-composer-file composer.wp-install.json",

    "wpunit": "codecept run wpunit",

    "functional": "codecept run functional",

    "test": [

      "@wpunit",

      "@functional"

    ]

  },

  "config": {

    "optimize-autoloader": true

  },

  "support": {

    "issues": "https://github.com/example/example/issues",

    "source": "https://github.com/example/example"

  }

}

Now we need to change the name of the Example.php file found in the src directory. I’m going to call it PluginBase.php to stick with the format we’ve been using. Next, open that file and change the namespace to Sfndesign and the class name to PluginBase. You can see the adjusted file below.

<?php

namespace Sfndesign;

class PluginBase {

    public static function init() {

        define( 'EXAMPLE', 'initialized' );

        add_action('the_title', function () {

            return 'EXAMPLE TITLE MOD';

        });

    }

}

Now that we’ve made these adjustments we need to run composer update again so that Composer registers the new autoload paths that are needed with our renamed files.

Finally, to make sure the whole thing is working well, I find it easier to change their initial test found in tests/ExampleTest.php to something that will return true no matter what. You can see this code below.

 public function testInit()

    {

        $this->assertTrue(true);

    }

Now that we’re set up, you can initialize your plugin as a git repository and then push it to Github. Once you’ve done this you should see an action running under the Actions tab for your repository and everything will come back green because your unit test has been run.

Throughout the last few posts, we’ve written tests and used Github Actions to automate parts of our process. Now, it’s up to you to use these tools in your client projects. You won’t write tests later, so make sure you start your projects with tests from the beginning. If you want to go even deeper with testing there is an excellent course by Fränk Klein that explains Unit Testing in WordPress. It’s already on my list to go over so that I can get better at my testing practices.

Source link

What is the Best Contact Form Plugin for WordPress?

Contact forms are needed on almost all websites. Luckily, there are a number of easy-to-use WordPress form plugins on the market.

A contact form is a way to gain feedback from customers or allow them to contact you directly through your site. The most commonly used form plugins all have a pretty similar set of features and integrations. 

  • Allows you to view form entries
  • Works with a captcha service
  • Works with Zapier
  • Works with Mailchimp and other marketing services

The marketplace has shifted a fair bit from the contact form options that used to be available for free and feature complete form plugin options. There are now so many solid options to pick from that choosing a contact form plugin for your site all comes down to which one you prefer and how well it works for you. 

Ask yourself these questions to work out which form plugin solution is the right one for you.

  • Do I need the paid version of this plugin or will the free version work? 
  • Will I need more add-on and features for my forms down the line?

Caldera Forms

Caldera Forms is a solid, free form plugin that has more options than most. Caldera Forms is developed by Saturday Drive, the same company behind Ninja Forms. Caldera Forms has an easy to use drag-drop interface for building forms. You could use Caldera Forms for building a simple contact form, a simple booking form, a credit card payment form, or a rating form.

  • One of the best free form plugins
  • It contains all of the features you will need
  • Easy to use

Everest Forms

Everest Forms plugin has a complete set of features and is another option worth checking out on your site. WPEverest is the company behind Everest Forms.

  • Drap and drop
  • Clean UI
  • Easy to use

Forminator

Forminator is a pretty new form plugin from WPMU DEV. It offers a very complete set of features in the free version. 

  • Drag and drop form blocks
  • Complete set of integrations with common services
  • Includes a block for the block editor
  • Email routing
  • Front-end post submissions
  • Multi-fie upload field

The only feature that is not in the free version of the Forminator plugin is the e-signature feature which offered in the Pro version. Forminator is worth checking out.

  • Feature complete
  • Is not a limited form plugin
  • Solid for a free plugin

weForms

weForms is another solid plugin that comes with a huge range of features built-in. BoldGrid is the company behind weForms. If you are using the block editor then weForms comes with a block.

  • It just works
  • Easy UI
  • Has a number of built-in features

Metform

The MetForm plugin works with Elementor which means that you can control the form from within the Elementor page builder on your site. Wpmet is the company behind MetForm.

  • Clean UI
  • Works in Elementor which means you can edit forms in Elementor
  • Has a number of integrations built-in

Contact Coldform

One the easiest to use simple form plugin options for a contact form is Contact Coldform. Jeff Star is the plugin developer behind the Contact Coldform plugin.

  • Easy to use
  • Works well
  • Basic and does exactly what it says

Gutenberg Forms

If you are using the block editor on your site then one of the recommended form plugin for the block editor is Gutenberg Forms.

  • Works with the block editor
  • Native in the block editor
  • Easy of use

Contact Forms by Gutenforms

If you are using the block editor on your site then another recommended form plugin for the block editor is Contact Forms by Gutenforms.

  • Simple forms
  • Block editor compatible
  • Simple to use

Honorable mentions for more well-known form plugins for WordPress include Gravity Forms, Ninja Forms, and Formidable Forms. Ninja Forms and Formidable forms both have versions which are on WordPress.org. Gravity Forms is a premium form plugin which comes with many features and add-on plugins for extra features and integrations. Ninja Forms and Formidable Forms also come with add-on features and all have pretty similar levels of features and add-ons, and well-priced plans.

Please take the time to test drive any of the contact form plugins we’ve mentioned on your staging site. After you have tested the form plugin of your choice, you can now begin creating all of the needed forms on your site.

Source link

Git Hooks – Hostdedi Blog

Git is a powerful version control system that we’ve barely scratched the surface on over our last few posts. Today, we’re going to look at the automation power that Git can give you with Git Hooks.

Every repository gets hooks built in when you use the git init command. When a repository is initialized you get a hidden .git directory and inside that is a directory called hooks that will contain all your hooks. Open any git repository you have handy and use ls -a to see the hidden directory, then open it up in your favorite code editor.

To start you’ll see a bunch of files with .sample file extensions. These are exactly what they say, sample scripts that you could use in your projects. The files are named to correspond with the hook they run on. So post-commit.sample runs on the post-commit hook.

You can use pretty much any language to write a hook. The file is parsed according to the shebang notation at the top of the file. If you wanted to use node you’d use #! /usr/bindi/env node and your file will be parsed as a node file.

Before we dive into what you can do with git hooks, let’s take a look at some of the hooks that are available to you.

Types of Git Hooks

Commit Workflow Hooks

pre-commit is run before you even enter your commit message and it can be bypassed with git commit --no-verify.

prepare-commit-msg can be used to edit the default message you see in your commit message. Use it to give instructions to developers about what type of commit message they should be leaving. It can also be used to automate the contents of where the message is automatically generated for you, like merges or to add an issue number to your commit message automatically.

commit-msg can be used to validate the commit message for your project. Maybe you don’t want anyone to be able to put in a commit message that simply says “dealing with white space”. You can use this hook to detect the presence of the words white space and then exit and provide a warning to the user that they need to have a better commit message.

post-commit runs after all the commit hooks above. It’s most useful for a notification that a commit has been made.

Client Hooks

post-checkout runs after you’ve run a successful git checkout command. If you had a set of large files used on the site but didn’t want them in source control, you could use this command to move the files for you.

pre-push runs during a git push command before any objects are transferred to the remote repository.

Server Hooks

pre-receive runs when a client has pushed code to a remote repository. This can be used to check the code that is being pushed to make sure that it meets the criteria of your project before you accept the push.

post-receive runs after your remote repository has received the updates. This could be used to call a web hook which triggers a deployment process or notifying a chat room that a commit has been received and is ready for review.

Many of the hooks above can be set to run only on specific branches. That may mean when you use a post-receive hook only when someone has pushed code to the main branch that’s supposed to be ready to deploy. A list of developers could be notified to review the code and then deploy it. This way you would always have 2 sets of eyes on a deploy which can mean catching mistakes that a single developer can easily miss.

I’ve skipped some of the hooks that are available because I’ve never seen a need to use them. One set of hooks I didn’t talk about is the email workflow hooks. If you’re not accepting patches to your code via email, then you’ll likely never need them. You can find all the available hooks in the documentation.

In practice hooks I’ve used most are:

  • pre-commit
  • pre-push
  • commit-msg
  • pre-receive
  • post-commit
  • post-receive

Now let’s do something with these hooks.

Activating a WordPress Plugin with WP Cli and Git Hooks

For one client project this year I was adding a store, and still doing a few tasks on the main site. That meant the main site did not have any of our WooCommerce plugins installed or activated. I needed to develop the WooCommerce store on one branch and only once I was ready to push it all live, did I want to move WooCommerce over to main.

To start we’ll need a new branch called store. We can get this by using git checkout -b store. This creates a new branch and checks it out for us. Now let’s get the hook ready.

First we need to create the post-checkout hook with this command touch .git/hooks/post-checkout.

Next we need to make it executable. We can do this with the chmod command from terminal chmod +x .git/hooks/post-checkout.

Now open the file in your code editor of choice and copy the code below into your post-checkout file.

#! /bin/bash

wp plugin activate woocommerce

echo "activated WooCommerce"

wp plugin activate automatewoo

echo "activated AutomateWoo"

You can demo this by changing to any branch via terminal. You should see two lines telling you that WooCommerce and AutomateWoo have been activated. We know it’s working, but it’s not quite what we want because it will turn the plugins on every single time we change to any branch.

What we really want is to turn them on when we move to our store branch, and then turn them off when we are on our main branch. To do that we’ll need the hook to detect which branch we are one. Swap the contents of post-checkout with the code below.

#! /bin/bash

oldrev=$1
newrev=$2

branch_name="(git symbolic-ref HEAD 2>/dev/null)"

if [ "refs/head/store" = "$branch_name" ];then
  wp plugin activate woocommerce
 echo "activated Woo"

  wp plugin activate automatewoo
 echo "activated AutomateWoo"
fi

if [ "refs/head/main" = "$branch_name" ];then
 wp plugin deactivate woocommerce
  echo "deactivated Woo"

  wp plugin deactivate automatewoo
  echo "deactivated AutomateWoo"
fi

This code starts by assigning the branch we are checking out to the branch_name variable. Then we have two if statements. The first checks to see if we have moved to the store branch. If we have it uses WP CLI to activate WooCommerce and AutomateWoo.

The next if statement checks to see if we are on the main branch. If we are, it will deactivate the plugins with WP CLI and tell us about it in the terminal.

Controlling Git Workflows with Git Hooks

In a previous post on Git I talked about different Git workflows. One very common use case for hooks is to stop anyone from committing code directly to the main branch. You can use a hook to make sure that all code is merged from a different branch into main.

Start by renaming pre-commit.sample to pre-commit and then make it executable as I’ve described above. Next grab the code below and use it in the pre-commit file.

#! /bin/bash

username=$GIT_AUTHOR_NAME
branch="$(git symbolic-ref HEAD 2>/dev/null)"

if [ "$branch" = "refs/heads/main" ]; then
echo "WHOA that was '"${branch}"' you should not do that. Stop doing silly stuff and create your own branch and merge it."
exit 1 # if you remove this it won't block the commit but it will send the message to slack

fi

This checks to see if we’re on the main branch, and if we are, the commit is stopped. Then it prints a reminder to the user that they shouldn’t be committing directly to the main branch.

Remember many places are changing to main as their branch. Older projects may need master in place here if they haven’t updated.

You could even take this a step further and use cURL to access the API of a chat app and then complain publicly that someone tried to commit to main.

The only limitations of git hooks are your imagination. You could use them to stop someone from committing if a TODO is present in their code or to stop whitespace at the end of a file.

If you have some part of your workflow that is a continual stumbling block, look at hooks to automate it, so that you don’t have to remember.

Source link

Understanding WordPress Unit Testing Jargon

In our last post, we took a basic look at testing your code in WordPress. Today, we’re going to take another step towards writing well-tested code, by introducing you to (and helping you understand) all the jargon that gets thrown around when you talk about unit testing for WordPress.

Types of Tests

Yup, unit tests are not the only types of tests we can have for our application so let’s look at the different types of tests you may use in your work.

Unit Tests

These types of tests are the first stage in a testing system. They specifically test to ensure that the code you wrote performs as expected. Unit tests form the foundation of your tests because if your code doesn’t work properly, then later types of tests are built on a shaky foundation.

If I wanted to limit the editing of permalinks to site administrators for posts that are over two weeks old my unit test would use WP_Mock to ensure that I have a user of the proper type and a post with the proper date. Then I’d make sure that my function returned the expected true or false value.

Unit tests should have no dependencies outside of the code you’ve written. They should interact with no other system. That means our last post wasn’t a true unit test, it was an integration test because we interacted with the database as we created our user.

When you use unit tests as the foundation of your work, you help ensure that each method/function has a single responsibility because it gets progressively harder to test as you add more conditions to a single function.

Some of the tools you’ll encounter in unit testing WordPress projects are:

Integration Tests

This is the second type of testing you’ll do in your work. Integration tests make sure that the interactions between two systems function as expected. Unlike unit tests, the goal here is to see the interaction between multiple systems.

WordPress itself does more integration tests than unit tests because when most of the application was written best practices were different. The functions inside WordPress are much larger than many newer PHP CMS’s and do much more work. These bigger functions are hard to unit test properly because they do so much. That means we rely more on integration testing as we check how our code directly works with WordPress.

None of this is bad, it’s simply a product of an application that wasn’t built when testing was as common as it is now.

Another example of an integration test would be if you were building an integration with an email marketing platform. You may use unit tests to make sure you validate the email properly, and submit the form as expected. Integration tests would be used to ensure that when you submit your valid email to the email platform you deal with the response properly.

Tools for integration testing:

Mutation Testing

Mutation testing is only going to be used for projects that have some sort of test coverage already. This type of testing creates “mutants” of your code by introducing common coding errors. The goal is that your unit tests break when these errors are introduced which means you’ve caught and killed the mutant. Mutation testing tools will report back on how many mutants you’ve killed and the places in which you haven’t caught mutants.

Mutation testing can be used to measure the quality of your test coverage. If you’ve got lots of mutants alongside 100% testing coverage, you have a big problem. This means that your tests don’t catch common errors programmers make. You’ve got code breakage waiting to happen.

Essentially, you’re testing your tests.

Tools for mutation testing:

Acceptance Tests

These can also be called functional test or browser testing. Where unit tests start with your code and work outwards, acceptance tests take the view of the person using your software. With acceptance tests, you may automate the web browser to interact with your site to make sure that users see what they expect to see.

Acceptance tests are harder to maintain because a small wording change in the UI of your software can mean that the test breaks because the automation can no longer find the UI elements it expects to find. For that reason, only invest in acceptance tests for business-critical infrastructure, like the checkout process on your shopping cart.

Tools for acceptance testing:

Jargon

Now that we’ve covered the types of tests you can do, we need to make sure we understand the other language that developers will use as they write tests.

Test Doubles

The term test doubles is a generic term that refers to any time you replace a production object/function/thing for testing purposes. We did this in our previous post on Getting Started with Unit Testing in WordPress when we used WP_UnitTestCase to add a user that didn’t exist in our production database. It can be helpful to think of it like a stunt double who “stands in” for the actor when things get dangerous. Test doubles “stand-in” for our data and code to make testing easier. They should look and behave like their production counterparts but be simplified to reduce complexity when we’re testing.

Mock

Mocks are used when you don’t want to interact with the API or database. You use a mock to fake database interactions so you can test a single unit of code without adding the complexity of a database.

A mock doesn’t have to be data in a database. A tool like WP_Mock has the ability to fake the hook system inside WordPress. This lets you test to see if a hook was called in your function, without needing to interact with WordPress itself.

Below we can see an example in WP_Mock where we fake the get_permalink function. We provide the number of times we expect the function to be called, arguments we expect, and the value we expect returned.

WPMock::userFunction( 'getpermalink', array(

  'args' => 42,

  'times' => 1,

  'return' => 'https://theanswertoeverything.fourtytwo/guide

We’ll cover how to use WP_Mock in a future post.

Stubs

Stubs are hard coded values for our tests, like canned answers to the questions our test may ask. You would be using a stub if you instructed your test to assume that a user is logged in while running a test. Another test may assume that the user is logged out. Both tests would be making sure that your functions returned the proper values for the given branch in your code.

It’s very likely that you’re using stubs and mocks together. In the example above, you use a stub to assume the logged in value, and then a mock to make sure that the proper values are returned.

Dummies

Test dummies are used when you don’t care about what the code does. Maybe you use a dummy to fill in an array or parameter list so that the code works properly. Stubs are extra information that likely doesn’t matter in the context of the specific test you’re writing.

For a logged-in user, maybe part of the function your testing expects a name. Even if your current test doesn’t need that name, you need to make sure it’s filled in so that your test passes. Of course, you should also test the result of your function without that name so you’re sure that you handle failure conditions properly.

Factories

A factory is a tool that lets us populate valid objects in our data model so that we can test the data. In our last case we used a factory when we added a user to our code inside WP_UnitTestCase.

One thing to be wary of here is changing the data model in your code. If your user suddenly needs an extra field, then you’ll need to head into every test and make sure that you have added that extra field every time you’ve used a factory.

Monkey Patch

This is a catch-all term for dynamically replacing attributes and functions at runtime. WP_Mock is “monkey patching” by replacing the default WordPress functions for testing. This means that we don’t have to call into WordPress directly when we’re unit testing.

Assertions

An assertion is a boolean value which will be true unless there is an error. An example would be using assertFileEquals to check if a file has the expected content. It will return true if the file matches expectations, and you have a passing test.

BDD or TDD?

Now, what overall system are you going to approach your tests with? Does it matter more that individual functions are valid, or that the behavior the end-user sees is valid?

TDD

TDD or Test Driven Development is when you write tests to validate that the code functions as expected. Like unit tests, you’re starting with the expectation of the code and then working towards the customer/user as you go. TDD doesn’t care about the outputs, it’s only concerned that the tests function as expected.

Tests written under TDD are only going to be readable by developers that understand testing and what an assertion means.

BDD

BDD or Behavior Driven Development grew out of the shortcomings of TDD. Here you start with what the end-user expects to happen as a result of the code. You still write your tests first, but you focus them on the result of your code. BDD doesn’t care how you arrive at outputs, as long as the expected behavior is the result.

One big benefit to BDD tools like Cucumber is that the language used to write the test is easily readable by customers and developers. It’s easy enough to understand that customers can write feature requests using Cucumber after a brief introduction.

Now, which one should you use? The correct answer is probably a bit of both. TDD methods can be used to ensure that the code the developer writes runs as expected. BDD can be used to make sure that the output of that code is what the customer expects to happen.

That’s all, folks! Understanding unit testing for WordPress just got a lot easier. With all that jargon under your belt, you’ll be ready for the next post where we’ll build a plugin using TDD and BDD with all the tools at our disposal.

Source link

What Is a Platform As a Service (PaaS)?

Once upon a time, software as a service was the only as a service acronym floating around. As the industry flourished though, forks came off of it into relating spaces to create a whole slew of aaS companies in numerous technological categories.

One of those forks is PaaS.

PaaS stands for platform as a service. It’s a service that provides and maintains a platform for developing, testing, and deploying applications for developers. All of the back-end infrastructure is managed by the PaaS, so that the developers can focus on their projects.

PaaS providers are able to reduce the amount of coding you need to do by providing you with middleware to use directly on the platform, with no dependencies on operating system compatibility (aw, yis).

A PaaS makes sense to use when you have multiple developers working on the same project. Like any other team-based SaaS app, PaaS apps allow you to add multiple users in a web-based development environment to co-work remotely on the same project.

Similar to more infrastructure-focused service providers like Hostdedi, PaaS providers include the basic infrastructure required to deploy apps, such as servers, networking, storage, and reference architectures. 

However, PaaS is arguably a more complete solution for app developers, providing an environment which allows you to build, collaborate, test, deploy, and manage your applications, all in one place.

You may not be familiar with the term PaaS, but if you’re a developer, you may already be using one:

  • Beanstalk
  • Heroku
  • Microsoft Azure

Platform as a service companies do one thing: save app developers time and money by bundling and automating a bunch of the things they’re used to doing manually. Then, when you run into problems, there’s a team of experts just behind the curtain to help you out.

PaaS companies are to app developers what Hostdedi is to ecommerce site developers – an all-in-one solution with a team of experts who specialize in your field. You don’t need tier one support at this stage in the game, you need someone who’s at least as informed as you are to help solve these problems.

Check out the PaaS providers above to help build your next application, and when it’s time to launch, talk to Hostdedi about managing your ecommerce site.

Choose From multiple Managed Applications

Source link

How to Duplicate a WordPress Page or Post

WordPress includes a number of features in its core but a number of features you would think would be included fall into the realm of plugins. One such feature is the ability to duplicate an existing page, post, or custom post type on a site using WordPress. 

Luckily, there are a number of solid and easy to use plugins to enable page, post, or any custom post type to be duplicated. One of those plugins is called Yoast Duplicate Post. Using this plugin makes it easy to duplicate a site’s web page or post in WordPress.

How to Install and Activate Yoast Duplicate Post

Go about installing as you would do for any plugin from wp-admin go to:

Plugins > Add New

Then go search for Yoast Duplicate Post and then install and activate the plugin.

How to use Yoast Duplicate Post

Once the Yoast Duplicate Post plugin has been installed and activated it will add a new sub-menu item in settings within wp-admin on the site.

Settings > Duplicate Post

What to Copy

Display

Yoast Duplicate Post plugin supports page, posts, and a number of custom post types. You can also use the plugin to duplicate products and coupons in WooCommerce.

Settings > Duplicate Post > Permissions

When you have the Yoast Duplicate Post setup as you want to cover all of the post types that you might need to duplicate on a site now comes in how you would go about creating a duplicate page or post.

In the page list screen in wp-admin when you mouse over the pages on the site, select the page you want to clone. Once you have cloned the page you will see a new page that is set to be with a post status of draft with the same page title as before.

The clone will show on posts, products as well as any other post types that you might have on the site and those that have been enabled to be supported in the Yoast Duplicate Post plugin.

The Yoast Duplicate Post plugin also includes a number of filters and actions which can be found from this link. Some of the included filters include custom fields that you might not want to be copied when creating a duplicate, if you needed to alter custom fields after a duplicate was created that is also possible.

How to Install and Activate Duplicate Page

There is another plugin option to be able to duplicate a page or post and it is called Duplicate Page.

Go to Plugins > Add New

Then search for duplicate page and you find the plugin to install.

How to use Duplicate Page

The Duplicate Page plugin will add a new sub-menu item into;

Settings > Duplicate Page

You can set which editor the page or post should be created using, the duplicate post status that the new duplicate page or post will be set as, and also you can see what happens after the page or post has been duplicated for the redirect.

In either the post or page list screen, the same will apply for any custom post types that exist on the site such as products if using WooCommerce. Next to the post or page click on the Duplicate This wording and a new duplicate post or page will be created.

Why Would I Want to Duplicate a Page?

Some of the reasons why you might need to duplicate a page, post, or a product would be if you are trying to use a different plugin on a specific page and you want a copy of the page before you update and use a different shortcode on it.

If you are using WooCommerce on the site, you might have a similar product to sell, and the easiest way is to duplicate an existing product. You can use the new duplicated page to update from instead of having to input all of the data from scratch again. If you had a number of changes to make to an existing product but wanted to have a backup copy, then being able to easily clone the product will help.

Source link

Deploy WordPress with Github Actions

A while back I showed you how to deploy your WordPress site with Deploybot. I’ve used this service for years now, but when I started, it was out of my price range, so I used nothing and made many mistakes deploying my sites which cost me many lost hours and some tears.

Today, I’m going to walk you through how to use Github Actions to deploy your site automatically for no cost. The set up is more complex than Deploybot, but it’s going to be free for most projects.

This post has a bunch of working parts so set aside some time, especially if you haven’t worked with Git or SSH keys before. We’re going to cover:

  • Creating a Hosting Account
  • Getting your code into Git
  • Creating special deploy SSH keys for Github to use
  • Configuring the Github Actions YAML file
  • Using Github repository secrets to keep private information safe
  • rsync via ssh

What Are Github Actions?

Github Actions is a feature of Github that allows you to automatically perform tasks based on the state of your code. Today, we’ll look at deployment, but you could also have an action to run your unit tests or notify a Slack chat when someone makes a new PR on your project.

While they may take a bit of time and effort to set up your first time, they return the investment by letting you get back to code instead of worrying about repeating the same work over and over. 

Getting Your Site Set up

The first thing you’ll need is to create a hosting account on Hostdedi, so head over and check out the plans available. The Maker WordPress plan is a good plan if you’re hosting a few sites.

With your site set up, go to the backups and create a backup of the site before you do anything else. Make sure you download this backup as well so you have a copy on your computer…just in case.

Unzip the backup and then copy out the public_html folder to use as our git repository. You can remove the wp-config.php file because we won’t need it today.

Now that we have our copy of the repository downloaded, let’s add it to Github. To start we’ll need to create a new repository in Github. Add your title and whatever description you want, I usually don’t initialize the repository with a README because I’ll provide my own with any project-specific notes and documentation for a client project.

Next, open up Terminal and cd into the downloaded copy of WordPress so you can initialize the repository with git init. The first thing we want to do is add our .gitignore file so that we don’t add any files that may overwrite what Hostdedi needs to run your site. You can use the .gitignore file provided below.

The top eight lines are specific to Hostdedi, so make sure you copy those lines if you have your own preferred ignore configuration.

If you’re not familiar with Git, check out my post on Introduction to Git.

.htaccess

wp-config.php

wp-content/uploads/*

wp-content/cache/*

wp-content/upgrade/*

wp-content/advanced-cache.php

wp-content/object-cache.php

wp-content/mu-plugins/*

config/app_config.yml

config/database.yml

config/*.sphinx.conf

config/s3_credentials.yml

*~

*.cache

*.log

*.pid

tmp/**/*

.DS_Store

db/cstore/**

db/sphinx/**

doc/api

doc/app

doc/plugins

doc/*.dot

coverage/*

db/*.sqlite3

*.tmproj

*.sw?

*.esproj

_notes*

dwsync.xml

podcast.xml

*.kpf

*uploads/*

*.swp

*.idea

*.sublime-project

*.sublime-workspace

*/node_modules/*

tags

*.bak

cache/*

managewp/*

Now that you have the ignore file ready, use git add and git commit to add the WordPress files to your repository. Then push those files to your Github repository.

Creating a Deploy SSH Key for Github

To deploy our site via Github Actions, we’ll need an SSH key for the action to use. Do not use your regular SSH key.

To generate the SSH keys needed use the command below using your email. When prompted for a passphrase, press enter and leave it blank. When you’re asked for a location, choose a location to store them temporarily. You can find Github’s documentation on SSH keys with extra details here.

ssh-keygen -t rsa -b 4096 -C "[email protected]"

Before we take the next step, make sure your new SSH keys are stored safely. I store them in my 1Password vault alongside the other server credentials. Don’t leave them sitting in some folder on your computer because if someone gets your keys they get access to any server those keys are used on.

Now, open the public key (the one that ends in .pub) and open it in the text editor of your choice. In your Hostdedi account, click on your account name in the top right corner and select SSH Keys.

Next, select Add Key and copy/paste the whole key out into the main text field. Make sure to label your key properly so you can tell what the key is being used for.

Finally, click Add to save the key to your account.

Adding and Configuring Your Github Action

Before we start to build our action, we’ll need some secret information stored in our account. Stuff like our private key for the key pair we just created, the location of our server, and the entry for the known_hosts file.

Start this by choosing Settings from the top right of your repository. Then choose Secrets from the left column. We’re going to add 3 different values.

  1. DEPLOY_SSH_KEY: This is the private key we generated (doesn’t have .pub at the end)
  2. NEXCESS_LOCATION: The location SSH will access on our server plus the file path to your html directory. Making a mistake here could delete your site, but this is why we took a backup.
  3. NEXCESS_HOST: The allowed host file we need from our server

You already have 1 so open your key file and copy it’s entire contents into a secret called DEPLOY_SSH_KEY.

Next, you can get the location of your server from your Hostdedi control panel for your site under the Access menu.

Finally, the easiest way to get the content for NEXCESS_HOST is to ssh into your server from your computer. This should prompt you to accept a new known server. Accept the new server and then you can head to ~/.ssh/known_hosts and get the last line in the file for the secret you need to add to your repository.

Why are we keeping this stuff secret? Each of these pieces of information has some security risk so you don’t want them in your repository. Putting them in a secret variable in Github makes sure you don’t expose information by accident.

We’re ready to head back over to our repository on Github and get our action going. Start by going to the Actions menu at the top of your repository and click on it. While there are lots of prebuilt actions, we’re going to start by creating our own action so select that from the Actions screen.

Doing this will give you a basic workflow file written in YAML. By default, it works only on your master branch, but by changing which branch is in the arguments on lines 9 & 11 you can make it work for a different branch. You may do this if you wanted to deploy from a staging branch to a staging site and from master to the live site.

Starting with the line below, delete the rest of your default workflow file.

# Runs a single command using the runners shell

    - name: Run a one-line script

      run: echo Hello, world

Now we need to get our SSH agent. On the right hand side of the workflow screen search for webfactory/ssh-agent.

Click on this and it will provide you with some commands to copy and paste into the bottom of your file, but we’re going to use our own custom script. Copy the code below and paste it into your workflow file below the actions/checkout@v2line.

   # Setting up SSH

    - name: Setup SSH agent

      uses: webfactory/[email protected]

      with:

        ssh-private-key: ${{ secrets.DEPLOY_SSH_KEY }}

    - name: Setup known_hosts

      run: echo '${{ secrets.NEXCESS_HOST }}' >> ~/.ssh/known_hosts

    - name: Sync project files

      run: rsync -uvzr --backup --backup-dir='~/deploy-backup/' --exclude 'wp-config.php' --exclude '.gitignore' --exclude '.git/*' --exclude 'wp-content/uploads/*' --exclude '.htaccess' --exclude 'wp-content/cache/*' --exclude 'wp-content/advanced-cache.php' --exclude 'wp-content/object-cache.php' --exclude 'wp-content/mu-plugins/*' ${GITHUB_WORKSPACE}/ ${{ secrets.NEXCESS_LOCATION }}

You can see the secrets we set up earlier in this file. It starts by pulling in the ssh-agent and adds our private DEPLOY_SSH_KEY to the server it’s getting ready in the background. Next, it adds our server as a known host.

It finishes by syncing the project files over to the live server in a long rsync command. In short, it backs up the remote server into a directory called deploy-backup and then moves any new files in the Github project over to the live server. We excluded all the same location we ignored in our original .gitignore file so that rsync doesn’t touch them by accident.

If you want to read up on each rsync command there, I usually refer to this Ubuntu documentation on rsync

Now all you need to do is make some changes in your repository and then use git to add and commit them to your repository. Push those changes to Github, and the action will automatically backup your files and then push your changes over to your site.

If you’re new to automatic deployments, this does seem like a lot of work. Even my first time using Github Actions to deploy my site I spent a few days working on the script. This doesn’t feel like it saves time until I’m using the same script for weeks with a project deploying regularly.

Automating your deployment, and taking the time to get it right, means you never accidentally overwrite the wrong files, put the wrong files in the wrong directory, or make any other of the many mistakes I’ve made moving files around in the 12 years I’ve been building sites.

A day or two of time spent configuring deployment for your first time is worth saving that pain.

Source link