Building a Recipe Card Plugin for WordPress
Posted on 19th June 2023
Building a Recipe Card Plugin for WordPress
WordPress is a popular content management system (CMS) that helps you easily create and manage a website or blog. One of the great things about WordPress is that it’s open source, which means there are thousands of free plugins and themes available to help you customize your site.
If you’re a food blogger or have a website that includes recipes, you might want to consider adding a recipe card plugin to your site. A recipe card plugin can help you easily add and format recipes, as well as add other features like nutrition information and social sharing buttons.
In this article, we’ll show you how to build a WordPress plugin that will create a recipe card for your website or blog. We’ll cover the following topics:
Creating a WordPress Plugin
Adding a Recipe Card shortcode
Creating a Recipe Card Template
Adding Nutrition Information to Your Recipe Card
Adding Social Sharing Buttons to Your Recipe Card
Creating a WordPress Plugin
The first thing you need to do is create a WordPress plugin. WordPress plugins are pieces of software that add specific features or functionality to a WordPress site. They can be as simple or complex as you need them to be.
For our recipe card plugin, we’ll need to create a few files:
A main plugin file that includes the plugin header information and sets up the plugin
A recipe card shortcode file that will output the recipe card on our WordPress site
A recipe card template file that will contain the HTML and CSS for our recipe card
A nutrition info template file that will output the nutrition information for our recipe card
We’ll start by creating the main plugin file. Create a new file and name it recipe-card.php. Then, add the following code to the top of the file:
<?php
/**
* Plugin Name: Recipe Card
* Plugin URI: https://example.com/recipe-card/
* Description: A plugin that allows you to easily add recipe cards to your WordPress site.
* Version: 1.0.0
* Author: Your Name
* Author URI: https://example.com/
* License: GPLv2 or later
* Text Domain: recipe-card
*/
// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* Main Recipe Card Class
*
* @since 1.0.0
*/
class Recipe_Card {
/**
* Constructor
*
* @since 1.0.0
*/
public function __construct() {
add_action( 'plugins_loaded', array( $this, 'load_textdomain' ) );
add_action( 'init', array( $this, 'register_shortcode' ) );
}
/**
* Loads the plugin textdomain for translation
*
* @since 1.0.0
*/
public function load_textdomain() {
load_plugin_textdomain( 'recipe-card', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );
}
/**
* Registers the [recipe_card] shortcode
*
* @since 1.0.0
*/
public function register_shortcode() {
add_shortcode( 'recipe_card', array( $this, 'shortcode_output' ) );
}
/**
* Outputs the content for the [recipe_card] shortcode
*
* @since 1.0.0
*
* @param array $atts Shortcode attributes
* @param string $content Shortcode content
*
* @return string Shortcode output
*/
public function shortcode_output( $atts, $content = null ) {
// Get recipe card template
ob_start();
include plugin_dir_path( __FILE__ ) . 'templates/recipe-card.php';
$recipe_card = ob_get_contents();
ob_end_clean();
// Get nutrition info template
ob_start();
include plugin_dir_path( __FILE__ ) . 'templates/nutrition-info.php';
$nutrition_info = ob_get_contents();
ob_end_clean();
// Get social sharing buttons template
ob_start();
include plugin_dir_path( __FILE__ ) . 'templates/social-sharing-buttons.php';
$social_sharing_buttons = ob_get_contents();
ob_end_clean();
// Get recipe title
$recipe_title = isset( $atts['title'] ) ? $atts['title'] : '';
// Get recipe author
$recipe_author = isset( $atts['author'] ) ? $atts['author'] : '';
// Get recipe servings
$recipe_servings = isset( $atts['servings'] ) ? $atts['servings'] : '';
// Get recipe prep time
$recipe_prep_time = isset( $atts['prep_time'] ) ? $atts['prep_time'] : '';
// Get recipe cook time
$recipe_cook_time = isset( $atts['cook_time'] ) ? $atts['cook_time'] : '';
// Get recipe ingredients
$recipe_ingredients = isset( $atts['ingredients'] ) ? $atts['ingredients'] : '';
// Get recipe instructions
$recipe_instructions = isset( $atts['instructions'] ) ? $atts['instructions'] : '';
// Get recipe notes
$recipe_notes = isset( $atts['notes'] ) ? $atts['notes'] : '';
// Get recipe yield
$recipe_yield = isset( $atts['yield'] ) ? $atts['yield'] : '';
// Get recipe calories
$recipe_calories = isset( $atts['calories'] ) ? $atts['calories'] : '';
// Get recipe fat
$recipe_fat = isset( $atts['fat'] ) ? $atts['fat'] : '';
// Get recipe saturated fat
$recipe_saturated_fat = isset( $atts['saturated_fat'] ) ? $atts['saturated_fat'] : '';
// Get recipe cholesterol
$recipe_cholesterol = isset( $atts['cholesterol'] ) ? $atts['cholesterol'] : '';
// Get recipe sodium
$recipe_sodium = isset( $atts['sodium'] ) ? $atts['sodium'] : '';
// Get recipe carbohydrate
$recipe_carbohydrate = isset( $atts['carbohydrate'] ) ? $atts['carbohydrate'] : '';
// Get recipe dietary fiber
$recipe_dietary_fiber = isset( $atts['dietary_fiber'] ) ? $atts['dietary_fiber'] : '';
// Get recipe sugar
$recipe_sugar = isset( $atts['sugar'] ) ? $atts['sugar'] : '';
// Get recipe protein
$recipe_protein = isset( $atts['protein'] ) ? $atts['protein'] : '';
// Replace shortcode variables in recipe card template
$recipe_card = str_replace(
array(
'RECIPE_TITLE',
'RECIPE_AUTHOR',
'RECIPE_SERVINGS',
'RECIPE_PREP_TIME',
'RECIPE_COOK_TIME',
'RECIPE_INGREDIENTS',
'RECIPE_INSTRUCTIONS',
'RECIPE_NOTES',
'RECIPE_YIELD',
'RECIPE_CALORIES',
'RECIPE_FAT',
'RECIPE_SATURATED_FAT',
'RECIPE_CHOLESTEROL',
'RECIPE_SODIUM',
'RECIPE_CARBOHYDRATE',
'RECIPE_DIETARY_
Assuming you have a basic understanding of PHP and object-oriented programming, the following sections will show you how to build a recipe card plugin for WordPress.
1. Create a new plugin file and name it wprm-recipe-card.php.
2. Add a header comment at the top of the file with the plugin name, author, version, and description.
3. Register the plugin with WordPress using theregister_activation_hook() function.
4. Create a class for the plugin.
5. Add a constructor method to the class.
6. Register the plugin with WordPress using theregister_activation_hook() function.
7. Add a method to the class for enqueuing the plugin's stylesheet.
8. Add a method to the class for enqueuing the plugin's JavaScript.
9. Add a method to the class for registering the plugin's shortcode.
10. Add a method to the class for displaying the recipe card.
11. Add a method to the class for sanitizing the recipe title.
12. Add a method to the class for sanitizing the recipe ingredients.
13. Add a method to the class for sanitizing the recipe instructions.
14. Add a method to the class for sanitizing the recipe Notes.
15. Save the file and upload it to your WordPress plugins directory.
16. Activate the plugin from the WordPress admin panel.
17. Use the [wprm-recipe-card] shortcode to display the recipe card on your WordPress site.
The Recipe Card plugin for WordPress is a great way to share your recipes with the world. It’s easy to use and it’s free!
To get started, install the plugin from the WordPress plugin repository. Then, create a new post or page and click on the “Add Recipe” button.
Enter a title for your recipe and then start adding your ingredients and directions. You can also add a photo of your dish.
When you’re finished, click on the “Publish” button and your recipe will be live on your website!
People will be able to print your recipe or save it to their own recipe collection. They can also rate your recipe and leave a comment.
The Recipe Card plugin is a great way to share your recipes with the world. It’s easy to use and it’s free!
