WP Bootstrap Post Card Shortcode - I AM ARUN CHAITANYA JAMI

Creating a custom shortcode to display a Bootstrap postcard in WordPress involves a few steps.

This example assumes you have Bootstrap properly integrated into your WordPress theme.

Open Your Theme’s Functions.php File:
Navigate to your WordPress theme’s directory and open the functions.php file.
Add Shortcode Function:
Add the following code to your functions.php file to create a custom shortcode called [bootstrap_post_card].

function custom_bootstrap_post_card_shortcode($atts) {
    // Extract shortcode attributes
    $atts = shortcode_atts(
        array(
            'title' => 'Post Title',
            'content' => 'Post Content',
            'image' => '',
            'link' => '#',
        ),
        $atts
    );

    // Build the Bootstrap post card HTML
    $output = '<div class="card">';
    if (!empty($atts['image'])) {
        $output .= '<img src="' . esc_attr($atts['image']) . '" class="card-img-top" alt="' . esc_attr($atts['title']) . '">';
    }
    $output .= '<div class="card-body">';
    $output .= '<h5 class="card-title">' . esc_html($atts['title']) . '</h5>';
    $output .= '<p class="card-text">' . esc_html($atts['content']) . '</p>';
    $output .= '<a href="' . esc_url($atts['link']) . '" class="btn btn-primary">Read More</a>';
    $output .= '</div></div>';

    return $output;
}
add_shortcode('bootstrap_post_card', 'custom_bootstrap_post_card_shortcode');

Usage:
You can now use the shortcode [bootstrap_post_card] in your WordPress posts or pages. You can also customize the attributes as needed:

title: The title of the postcard.
content: The content of the postcard.
image: URL of the postcard image.
link: The URL the “Read More” button should link to.

Example shortcode usage:

[bootstrap_post_card title="Sample Post" content="This is a sample post card." image="https://example.com/image.jpg" link="https://example.com/post"]

Make sure to replace the example URLs and content with actual data.

Remember that this example assumes you have Bootstrap integrated into your theme. If not, you’ll need to include Bootstrap’s CSS and JavaScript in your theme before this shortcode will work correctly.

Tech WordPress