Day: May 15, 2024

Posted on

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

Category Image 091

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.

Posted on

Chris’ Corner: Buttons, Modes, and a Couple of Layout Situations That Are Still a Bit Tricky

Category Image 052

If you ever need some inspiration for buttons, definitely check out Lucas Bonomi’s buttons.cool. This is a better-than-it-needs-to-be one-off site just for beautiful buttons:

But it’s not just a design gallery, it’s made for front-end developers in that you can see the code, see them being live-rendered right on the page, and of course, the best part is you can pop right over to CodePen for a look.

Looks like it’s taking submissions.

How hard is a Dark Mode to pull off? Or perhaps more accurately, how hard is it to pull off a second color mode? Some of us have dark-mode-first websites, ya know.

I thought Wes Bos phrased the question well:

Question for those who have implemented light/dark mode: how much is just swapping out variables, and how much is custom code, and tending to edge cases?

I answered: fiddy fiddy.

In the new version of CodePen we’re working on, we will have a site-wide theme setting (which is separated from what syntax highlighting theme you choose). CodePen being a pretty complex site, it involved quite a bit of CSS custom property setting. So in a sense, it was mostly just “swapping out variables”, but quite a few of those variables exist just because of different color modes, most of which I might even call an “edge case”. For us: north of 100 south of 200. I found this to be challenging but ultimately a fair approach.

Sometimes you see ideas going around of how simple it could be. For instance, he’s Akhil Arjun saying it can be done in one line:

html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

And here’s Mads Stoumann with a totally different 3-line approach:

body {
  background-color: Canvas;
  color: CanvasText;
  color-scheme: light dark;
}

While I appreciate a good CSS trick and these are good things to know about, I’m going to go ahead and say these super minimal approaches probably aren’t going to get you very far. You’re going to want better control than this and you’re going to need to deal with those edge cases.

Now that we have such powerful layout tools in CSS (keep ’em coming, CSS!) — it’s fun to see little layout situations that look fairly simple but are still a little challenging. Tyler Sticka ran across one he calls Tricky Floating Image Alignment. The idea is to have some text that is center aligned with an image, but if the text grows larger than the image, use the behavior of float.

I liked the solution in the end. It’s a throwback to the way we used to be able to vertically center stuff with top: 50%; transform: translateY(-50%). This will do the centering nicely, but when the text is bigger than the container, they essentially cancel out and so essentially do nothing.

Here’s another tricky layout situation, this time involving newfangled HTML and CSS features, namely anchor positioning. (Think of it as positioning an element based on another arbitrary element’s position.) Eric Meyer blogged it as Nuclear Anchored Sidenotes.

Imagine a footnote, except on a large enough screen, it’s more like a sidenote. That is, the note goes into empty sidebar space at the exact line that the footnote marker appears on. But to really pull this off, you’re using anchor positions of multiple elements:

Yes, I’m anchoring the sidenotes with respect to two completely different anchors, one of which is a descendant of the other.  That’s okay!  You can do that!

I did not know you could do that, but I like it. 

top: anchor(top); /* implicit anchor */
left: anchor(--main right); /* named anchor e.g. anchor-name: --main; */

I only just heard of the CSS round() function the other day. It takes a value and rounds it. Ha.

line-height: round(2.2, 1); /* 2 */

I was blogging it with a number of other CSS functions I’d never heard of. Try this demo in Firefox to see a pretty clear example of why it could be cool. Of course Dan Wilson is all over it with a much more comprehensive look in The New CSS Math: round(). Dan looks closely at the syntax, sharing how you pass in not just a value, but the interval by which you want to do the rounding. Then optionally, even a “rounding strategy” if it’s important to you how that is done.

I feel like this falls into the category of “interesting layout related thing that would have been hard or impossible before but now isn’t.” Or at least “we’d probably have to do this in JavaScript before but it actually makes more sense in CSS.”

Looks like we’re going to get scrollbar-color and scrollbar-width across all browsers for real now. That’s the “real spec version” of doing this, instead of the more-capable (get gone-wild) WebKit styles of old. I wish it was more capable, but I’ll take standards over that any day.

While I’m still on this kick of “difficult CSS layout things”, you gotta see this Pen from Alex Riviere that handles this curved grid.

What’s striking to me about this is how… not weird it looks. It’s like if you were standing in a glass elevator going down and looking at these blocks, that’s just how they would look. But in order to pull that off while scrolling, some relatively exotic transform action needs to happen on them, which even involves new trigonometric functions in CSS (along with a scroll-timeline, which you can see has a fairly simply polyfill in this case).

Go take a peek at that CSS. The transforms are just a few lines, but wow that’s fancy.

Posted on

Streamlining Word to PDF Conversion in Golang

Featured Imgs 26

In today's rapidly evolving digital landscape, the efficient conversion of Word documents to PDF format has become a crucial requirement for individuals and businesses alike. 

With the increasing reliance on electronic document sharing, ensuring the integrity and consistent presentation of files across various platforms and devices is of utmost importance. 

Posted on

The Ultimate Guide To Repair MySQL Database

Featured Imgs 26

One of the day-to-day tasks of database administrators is to keep the MySQL Server up and running. They have to also ensure that the database remains healthy. 

However, even after taking all the precautions, situations arise that can lead to corruption in the database. 

Posted on

How to Create a “Meet the Team” Page in WordPress

Fotolia Subscription Monthly 4610864 Xl Stock
meet the team pageIf you run a small business, creating a meet the team page on your site can help you appear more approachable. Fortunately, you don’t need to be a web designer to create an effective and nice looking meet the team page. In this article we'll show you some real-life examples and then we'll teach you how to build a team page of your own.