WP Bootstrap Post Card Shortcode

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.

  1. Open Your Theme’s Functions.php File:
    Navigate to your WordPress theme’s directory and open the functions.php file.
  2. 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(
            'title' => 'Post Title',
            'content' => 'Post Content',
            'image' => '',
            'link' => '#',

    // 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');
  1. 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.

Agile Agile Methodology AsyncStorage Dependency Inversion Principle Gutenberg Hooks Integration Testing JSON justify content center Justify text Migration Mindset Node Npm ObjectOriented design Performance Testing PHP React Js React Native React Native Buttons React Native Elements React Native Error React Native IOS React Navigation redux redux-persist redux-persist-react-native-async-storage Regression Testing Security Testing SOLID principles Unit Testing useDispatch User Acceptance Testing UAT WordPress WordPress Simplification WordPressVip WP Block Patters WP Gutenberg WP Gutenberg Patterns