Posted on

Find Your Perfect Backup Match

As 90s dance legend, Robin S famously sang, “Back It Up!” And that’s exactly what we’re here to help you do – find the perfect backup partner to keep your client(s) websites safe and secure.

Just like in the dating world, not every backup solution is a perfect match. But don’t worry, we’ve got you covered with our lineup of eligible backup bachelors, ready to sweep you off your feet (and protect your data).

Hourly Backups: The Attentive Suitor

Name: Hourly Backups

Age: Recently added in 2022, but wise beyond its years

Looking for: High-traffic sites, particularly in industries like eCommerce, finance, news, education, or enterprise – sites that need constant attention and care.

About Me: I’m the backup equivalent of a doting partner who’s always by your side. Available exclusively for WPMU DEV-hosted sites, I create a new backup every hour, giving you 720 restore points over 30 days. That means you’ll never lose more than 59 minutes of precious data, no matter what happens.

My backups are incremental, which means I only store the changes since our last rendezvous. This keeps things light and speedy, so you won’t have to worry about me taking up too much space (or bandwidth). For sites that are constantly evolving, having a backup that can keep up with the pace is essential. Data is the new romance language, and I’m fluent!

At just $5 a month, I’m an affordable catch that other hosts can only dream of. But the real prize? You can resell me to your clients, setting your own price and bringing in that sweet, recurring revenue. Talk about a power couple!

More about me: https://wpmudev.com/hourly-backup-hosting/

Snapshot Pro: The Open-Minded Charmer

Name: Snapshot Pro

Age: Recently updated and improved from its 2017 debut

Looking for: Anyone who’s not exclusively hosted with WPMU DEV but wants to explore the idea of a third-party storage fling (or is already flirting with the idea of hosting with us).

About Me: I’m the backup equivalent of a charming, open-minded partner who’s always up for trying new things. My incremental backups are lightning-fast and can be stored for up to 50 days! The first backup is a full-site one, and from there, I only save the latest changes and updates – efficient and space-saving, just like a good partner should be.

But here’s where I really shine: I’ve recently been updated to allow you to export your backups to popular third-party platforms such as Google Drive, Dropbox, Amazon S3, and others.

Whether you’re hosted with WPMU DEV or not, you’ll always know when our last backup was and when the next one is scheduled. And if you do decide to take our relationship to the next level by hosting with us, you’ll get an even deeper insight into our backups via The Hub. Maybe it’s time to check out our Hosting Plans and see if there’s a perfect match?

I’m sleek, easy to use, and offer the added bonus of third-party storage options. If you’re looking for a backup partner who’s always open to new adventures, I might just be the one for you.

More about me: https://wpmudev.com/project/snapshot/

Hosting Backups: The Reliable Companion

Name: Hosting Backups

Age: A classic, around since we began!

Looking for: Anyone who wants to host a site with us or is already part of our hosting family.

About Me: I’m the backup equivalent of a reliable, trustworthy partner who’s been by your side from the very beginning. With any level of WPMU DEV’s hosting, whether single or multisite, I’m included as a standard feature – like a partner who’s always there, no matter what.

I’ll never let you lose more than 23 hours of data, with nightly backups, and with my fast one-click restore accessed via The Hub, you know your site(s) are in safe hands. I perform a full site backup every 15 days, and all backups are stored for a 30-day period. But what really sets me apart is that I offer automated backup storage on remote (offsite) locations.

To get the most out of our relationship, check out our membership options – you’ll unlock a world of just more than nightly backups, including 24/7 expert technical support, The Hub, and a complete suite of Pro plugins. And don’t forget to enable our Uptime service, so you’ll always know if there’s any downtime or response time issues.

More about me: https://wpmudev.com/hosting/

Will We Get a Second Date?

We’re confident that there’s a backup feature out there for everyone, and we hope this quick and easy-to-digest overview has helped you find your perfect match. Of course, with WPMU DEV, you’ll always have our 24/7 support team on hand to help you navigate the different backup options.

We’ve got so many other features that can enhance and streamline your business, as well as the possibility of reselling to your clients. So why not drop us a line and let’s start planning our first date? Who knows, it could be the beginning of a beautiful (and well-backed-up) relationship!

Posted on

Decision Trees For UI Components

How do you know what UI component to choose? Decision trees offer a systematic approach for design teams to document their design decisions. Once we’ve decided what UI components we use and when, we can avoid never-ending discussions, confusion, and misunderstanding.

Let’s explore a few examples of decision trees for UI components and how we can get the most out of them.

This article is part of our ongoing series on design patterns. It’s also an upcoming part of the 10h-video library on Smart Interface Design Patterns 🍣 and the upcoming live UX training as well. Use code BIRDIE to save 15% off.

B2B Navigation and Help Components: Doctolib

Doctolib Design System is a very impressive design system with decision trees, B2B navigation paths, photography, PIN input, UX writing, and SMS notifications — and thorough guides on how to choose UI components.

I love how practical these decision trees are. Each shows an example of what a component looks like, but I would also add references to real-life UI examples and flows of where and how these components are used. A fantastic starting point that documents design decisions better than any guide would.

Decision Trees For UI Components: Workday

The team behind Workday’s Canvas design system created a fantastic set of design decision trees for notifications, errors and alerts, loading patterns, calls to action, truncation, and overflow — with guidelines, examples, and use cases, which can now only be retrieved from the archive:

For each decision tree, the Workday team has put together a few context-related questions to consider first when making a decision before even jumping into the decision tree. Plus, there are thorough examples for each option available, as well as a very detailed alternative text for every image.

Form Components Decision Tree: Lyft

A choice of a form component can often be daunting. When should you use radio buttons, checkboxes, or dropdowns? Runi Goswami from Lyft has shared a detailed form components decision tree that helps their team choose between form controls.

We start by exploring whether a user can select more than one option in our UI. If it’s indeed multi-select, we use toggles for short options and checkboxes for longer ones.

If only one option can be selected, then we use tabs for filtering, radios for shorter options, a switch for immediately applicable options, and a checkbox if only one option can be selected. Dropdowns are used as a last resort.

Choosing Onboarding Components: NewsKit

Onboarding comes in various forms and shapes. Depending on how subtle or prominent we want to highlight a particular feature, we can use popovers, badges, hints, flags, toasts, feature cards, or design a better empty state. The Newskit team has put together an Onboarding Selection Prototype in Figma.

The choice depends on whether we want to interrupt the users to display details (usually isn’t very effective), show a feature subtly during the experience (more effective), or enable discovery by highlighting a feature within the context of a task a user tries to accomplish.

The toolkit asks a designer a couple of questions about the intent of onboarding, and then suggests options that are likely to perform best — a fantastic little helper for streamlined onboarding decisions.

Design System Process Flowcharts: Nucleus

How do you decide to add a new component to a design system or rather extend an existing one? What’s the process for contributions, maintenance, and the overall design process? Some design teams codify their design decisions as design system process flowcharts, as shown below.

And here are helpful decision trees for adding new components to a design system:

Make Decision Trees Visible

What I absolutely love about the decision tree approach is not only that it beautifully visualizes design decisions but that it also serves as a documentation. It establishes shared standards across teams and includes examples to follow, with incredible value for new hires.

Of course, exceptions happen. But once you have codified the ways of working for design teams as a decision tree and made it front and center of your design work, it resolves never-ending discussions about UI decisions for good.

So whenever a debate comes up, document your decisions in a decision tree. Turn them into posters. Place them in kitchen areas and developer’s and QA workspaces. Put them in design critique rooms. Make them visible where design work happens and where code is being written.

It’s worth mentioning that every project will need its own custom trees, so please see the examples above as an idea to build upon and customize away for your needs.

Meet Smart Interface Design Patterns

If you are interested in similar insights around UX, take a look at Smart Interface Design Patterns, our 10h-video course with 100s of practical examples from real-life projects — with a live UX training later this year. Everything from mega-dropdowns to complex enterprise tables — with 5 new segments added every year. Jump to a free preview.

Meet Smart Interface Design Patterns, our video course on interface design & UX.

100 design patterns & real-life examples.
10h-video course + live UX training. Free preview.

Posted on

How to Build an Auction Site Like eBay Using WordPress

Do you want to build an auction site like eBay using WordPress?

An auction website allows users to bid on products to purchase them. This allows you to maximize profits while selling unique items.

In this article, we will show you how to easily build an auction site like eBay using WordPress without technical skills.

Creating an Auction site using WordPress

What Do You Need to Build an Auction Site Using WordPress?

You will need the following things to make your auction site like eBay with WordPress:

  • A domain name (This will be your website’s name that people will type in to find your site, like wpbeginner.com)
  • A web hosting account (This is where your website’s files are stored)
  • SSL certificate (You need this to receive online payments)
  • An eCommerce addon (This will turn your website into an eCommerce platform)
  • An auction addon (This will add auction features to your website.)
  • Your undivided attention for 40 mins

Yes, you can start your own auction site in 40 minutes, and we will walk you through the whole process step-by-step.

In this tutorial, we will cover the following:

Ready? Let’s get started.

Step 1: Set Up an eCommerce Store

First, you need to make sure that you are using the right website platform, and since you are reading this article, you won’t be making the mistakes that others do.

There are two types of WordPress software, so it’s easy for beginners to get confused.

First, there is WordPress.com, which is a hosting platform, and then you have WordPress.org, also known as self-hosted WordPress.

We recommend using self-hosted WordPress.org because it gives you access to all WordPress features out of the box. For a comparison, see WordPress.com vs. WordPress.org.

First, you will need a domain name and a web hosting account. But you cannot sign up with just any web hosting company.

You will need a hosting provider specializing in WooCommerce hosting because this is the software you will use as your eCommerce platform.

Usually, a domain name costs $14.99/year, web hosting $7.99/month, and SSL certificate 69.99/year.

This is a lot of money if you are just starting out.

Fortunately, Bluehost, an officially recommended WordPress and WooCommerce hosting provider, has agreed to offer our users a free domain + free SSL and a discount on their WordPress hosting.

Basically, you can get started for $1.99 per month.

→ Click Here to Claim This Exclusive Bluehost Offer ←

Once you have purchased the hosting, then follow our step-by-step tutorial on how to start an online store for complete setup instructions.

Note: Bluehost offers shared hosting plans, which are good for a starter website, but you will need more resources as your auction site grows. When the time comes, you can move to a managed WordPress hosting provider like SiteGround.

You will now have a WordPress website with WooCommerce installed on it. By default, WooCommerce doesn’t allow you to add products for auction on your website.

Let’s change this by installing an auction addon for WooCommerce.

Step 2: Turn Your Ecommerce Store into an Auction Site

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

YITH WooCommerce Auctions is a paid plugin, and a single site license will cost you $149.99. This gives you access to the plugin download, documentation, and one year of support and updates.

Upon activation, you need to visit the YITH » License Activation page to enter your license key. You can find this information in your account on the plugin’s website.

YITH license activation

Next, you need to head over to the YITH » Auctions page.

Here, you can configure the plugin settings.

YITH auction settings

The default settings will work for most websites, but you can still review and adjust them as needed.

Step 3: Setting Up Auction Payments

Next, you need to set up how you would like the auction winners to pay.

Go to the YITH » Auctions page and switch to the General » Auctions Payments tab.

YITH Auction payments

The first option here is to require a credit card on file for users who want to participate in the auction.

To use this option, you will need the YITH WooCommerce Stripe plugin. It is a premium addon, which will cost you an additional $79.99 per year.

However, the rest of the plugin functionality will work just fine without this plugin, and you can use your WooCommerce payment method as the default option.

Next, scroll down to the Commission section.

From here, you can set a default commission for your auctions. You have the option to choose a fixed amount or set a percentage of the bid to the commission.

Commission settings

Optionally, you can choose to show the commission on the Product page as well as the cart and checkout pages or just on the cart and checkout pages.

Don’t forget to click ‘Save Options’ to store your settings.

Step 4: Adding an Auction Item

YITH WooCommerce Auctions makes it super easy to add an item for auction using the built-in WooCommerce products.

Simply add your auction item as a new WooCommerce product by visiting the Products » Add New page.

WooCommerce adding a new product

On this page, you need to enter your auction item details just like you would add a product. After that, fill out the title, add details, and upload pictures.

Below the editor, you need to select ‘Auction’ from the Product Data dropdown, and you will see settings for the auction item.

Auction product options

From here, you can set an auction starting price, bid up, minimum increment amount, reserve price, and buy-now price.

After that, you need to select the auction dates and times. You can also add an overtime for the auction to offer a grace period after the auction ends.

Once you are satisfied with the settings, click on the ‘Publish’ button to save your changes.

Your auction will now appear on your WooCommerce shop page. Auction items on the shop page will be highlighted with an icon.

Auctions displayed on the Shop page

You can use the auction plugin to add auction items along with other fixed-price WooCommerce products.

You can also create a separate page to list only the products available for auction. Simply create a new WordPress page and look for the auction blocks in the [+] block panel.

Auction blocks

It comes with four blocks to show Auction Products, Auction Active Products, Auction Ended Products, and a separate block to show the Auction bidding list.

Don’t forget to publish the page to make it live on your website.

Step 5: Managing Your Auctions

You can add auction items anytime, and they will start appearing on your WordPress website immediately. However, the auction will not begin until the start time set for it.

This allows you to publish items before the auction begins and use this time to promote items. Once the auction starts, any registered users can start bidding.

Auction product page

The plugin will show an auction timer next to the item. Users can see the current highest bid and add their own bids.

Previous bids will be displayed below with usernames partially encrypted.

Previous bids

You have the option to remove a bid at any time.

Simply edit the auction product and scroll down to the ‘Product Data’ section. From here, switch to the ‘Status’ tab under the ‘Auctions’ panel, and you will see all the bids.

Remove a bid

Click on the ‘Delete’ button to remove a bid.

The auction will end depending on each item’s individual auction settings.

If the auction time ends, then the highest bidder’s price will be accepted. If a user decides to offer the buy-now price, then the auction will end, and they will be able to add the product to their cart.

Pay Now visible to the auction winner

All users who participated in the auction will receive an email notification for each new bid, auction grace time, auction end, and more.

The final email will be sent to the auction winner, informing them that they can now make their payment.

Expert Tip: Emails sent using the default WordPress function often don’t make it into users’ inboxes. Instead, we recommend using an SMTP plugin like WP Mail SMTP to improve deliverability. For more information, see our guide on how to fix the WordPress not sending emails issue.

Step 6: Allowing Other Users to Add Auction Items

If you want to allow other users to add their own products for auction, then you can do that as well. However, the YITH WooCommerce Auctions plugin doesn’t allow users to add their own auction items.

By default, WooCommerce assumes that you are the only seller on your website who can add new products. To change this, you need to make your WooCommerce platform a multi-vendor marketplace.

For detailed step-by-step instructions, see our guide on how to create an online marketplace using WordPress.

Create a multi-vendor auctions marketplace

Once you set up your website as an online marketplace, other users can apply and become sellers on your website.

After you approve their application, they can add new products for auction. You can then approve their auctions, which will become live on your site.

Once the auction is over and the winning bidder has paid, you will get your commission out of the winning bid.

Step 7: Mastering WordPress to Promote Your Auction Site

WordPress is the best website builder in the world. It is very easy to learn, and you can customize any feature.

Here are some useful WordPress resources to help you take your auction site to the next level:

We hope this article helped you build your own auction site like eBay using WordPress. You may also want to see our ultimate step-by-step WordPress SEO guide for beginners to get more traffic to your auction site or our expert pick of the best auction plugins for WordPress.

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

The post How to Build an Auction Site Like eBay Using WordPress first appeared on WPBeginner.

Posted on

Best Tools to Use For Building Your First Website

Ever wondered how people build professional-looking websites from the ground up? It’s not as hard as it looks! With the right tools in hand, anyone can create a stunning website without needing to learn a line of code. Let’s talk about some user-friendly tools that can turn your website dreams into reality. Wix For beginners, […]
Posted on

How to Make Recipe Cards in WordPress (Step by Step)

Are you looking to add recipe cards to your WordPress content?

Millions of people online are searching for recipes every single day. Whether it’s for whipping up a quick weekday dinner or impressing guests with a show-stopping dessert, recipe cards with easy-to-follow instructions can guide readers to recreating their desired dish.

In this article, we will show you step-by-step how to make recipe cards in WordPress.

make-recipe-cards-in-post

What Are Recipe Cards And Why Use Them?

Recipe cards provide the ingredients and instructions for cooking a particular dish. These cards often feature a structured format with sections such as:

  • Recipe title
  • List of ingredients
  • Step-by-step instructions
  • Additional notes or tips
  • Nutritional facts

They’re essentially blueprints for whipping up delicious dishes. Recipe cards are perfect for cooks of all skill levels, especially busy people in need of quick and easy meal ideas. They’re laid out in a tidy format, allowing your readers to recreate your meals easily and simply.

recipe card

Besides that, they’re highly shareable, which is helpful for building your social media presence. Also, recipe cards use structured data (schema markup), meaning they have better odds of appearing higher in search engine rankings.

Chances are, if you run a food blog, have a restaurant website, or are a health and wellness professional, you already have thought about adding recipes to your site.

Best of all, it doesn’t take complex coding or a ton of technical know-how to do so. Let’s dig in and see how it’s done.

Adding Recipe Cards With WP Tasty Recipes

The best way to add recipe cards is with a recipe plugin like WP Tasty Recipes. It’s a simple plugin that lets you customize your recipes in lots of ways.

Step 1: Installing WP Tasty Recipes Plugin

To get started, you’ll need to install and activate the WP Tasty Recipes plugin. For more information, check out our detailed tutorial on how to install a WordPress plugin.

Next, head over to the WP Tasty » Dashboard from your WordPress admin. Click on ‘Enter License.’

enter license

A popup window will appear. Simply paste your license key from the downloads page from your WP Tasty account.

Select the ‘All Plugins’ and then hit the ‘Save License’ button.

Save license

Step 2: Adjusting the Recipe Card Design

Next, it’s a good idea to adjust the design of the recipe card to fit your needs.

Go to the WP Tasty » Tasty Recipes page from your WordPress dashboard.

Under the Design tab, you can customize how your recipe card will look.

design recipe card

You can customize elements like as button colors, title and subtitle colors, star ratings, and even a social footer.

If you scroll all the way to the bottom, you’ll notice that the ‘Default Template’ is selected.

change recipe card template

Click on the left and right arrows and pick the template that you find most visually appealing and suits your site’s design the best.

From there, make sure to click ‘Save Changes.’

Step 3: Adding Recipe Cards to a Post in WordPress

Next, head over to the post that you want to add your recipe card to. Click on the ‘+’ icon in the upper-left of the block editor to add a new block.

Here, you can search and select the ‘Tasty Recipe’ block.

tasty recipe block

From there, a window will appear on the screen. This is where you’ll need to add all of the information about your recipe.

It’s important to add as many details as possible so that Google can easily identify the information and give you the best odds to display rich snippets in search results.

create recipe

Here, you’ll be able to add the following information:

  • Title
  • Recipe image
  • Author Name
  • Description
  • Ingredients
  • Instructions
  • Notes
  • Details such as prep time, cook time, yield, category, etc.
  • Keywords
  • Video URL
  • Equipment
  • Nutrition

Once you’ve filled out the information about your recipe, click the ‘Insert’ button at the bottom.

Insert recipe card

After that, all you have left is to make sure that your recipe card is live on the site!

Step 4: Publishing Your Recipe Card

Now, you’re ready to publish your recipe card. Just hit the ‘Publish’ or ‘Update’ button at the top.

publish recipe card

Now, just go to the front end of your website to see your recipe card in action.

Here’s what our S’mores Brownies card looks like on the front end of our demo site.

example of recipe card

Step 5: Adding the ‘Pin It’ Button to Your Recipe Card (Optional)

If you upgraded to the WP Tasty ‘All Access’ plan or bought the Tasty Pins product, then you may want to also add a ‘Pin It’ button to your recipe card so that your readers can easily add the recipe to a Pinterest board.

When readers pin your recipe to Pinterest, it will show your image to more users on the platform. As a result, that can potentially drive more traffic to your website.

Scroll to the bottom of your block editor and then add a Pinterest image, title, and text, which will be used to optimize your images for SEO and Pinterest.

tasty pins

This will apply a ‘Pin It’ button to all images related to the recipe card, making your content much easier to share.

Bonus: Adding SEO-Friendly Recipes With Schema in WordPress

Making recipe cards is only one piece of the puzzle. You also have to make sure you drive as much traffic as possible to your recipes. That could ultimately lead to more sales of your cookbook, affiliate sales, or bookings for your services.

The best way to do that is to add a recipe schema markup in WordPress by using the All in One SEO plugin.

Once installed and activated, you’ll have the ability to generate any type of schema in your posts or pages.

You’ll need to scroll to the bottom of the block editor where it says ‘AIOSEO Settings.’ Then, under the ‘Schema’ tab, select ‘Generate Schema.’

generate schema for recipe card

From here, a popup window will appear where you’ll see a variety of schema templates from which to choose. This does all the heavy lifting for you since it creates structured data based on the type of post you’re publishing.

In this case, we’d click on the ‘+’ icon next to ‘Recipe.’

recipeschemaaddrecipeschema

You’ll enter all of the details of your recipe in the Schema Generator.

You and your visitors won’t be able to see a difference on your website, but search engine bots will have the information they need for featured snippets.

recipeschemaaioseoaddschema

For more details, check out our full tutorial on how to add SEO-friendly recipe schema in WordPress.

We hope that this article helped you learn how to make recipe cards in WordPress. You may also want to see our showcase of the best WordPress themes for recipe blogs and our tutorial on how to easily create a restaurant website with 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 Make Recipe Cards in WordPress (Step by Step) first appeared on WPBeginner.