wp enqueue script not loading the css styles

Question

I build a simple wp plugin to display a welcome section with short code.

custom-welcome-plugin.php file code:

<?php
/*
Plugin Name: Custom Welcome Plugin
Description: Display custom welcome section with shortcode.
Version: 1.0
Author: Your Name
*/

// Enqueue styles
function custom_welcome_enqueue_style() {
    wp_enqueue_style('custom-welcome-style', plugin_dir_url(__FILE__) . 'style.css');
}

add_action('wp_enqueue_scripts', 'custom_welcome_enqueue_style');

// Shortcode function
function custom_welcome_shortcode() {
    ob_start(); // Start output buffering
    ?>

    <!-- Welcome Section -->
    <div class="welcome-section">
        <span class="welcome-header">Welcome to Our Website</span><br><br>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.<br><br>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p><br><br>
        <button class="read-more-btn">READ MORE</button>
    </div>

    <?php
    return ob_get_clean(); // Return buffered content
}

// Register shortcode
add_shortcode('custom_welcome', 'custom_welcome_shortcode');
?>

style.css file code:

.welcome-section {
      padding: 80px;
      text-align: center;

    }

    .welcome-header {
      font-size: 36px;
     
    }

    .read-more-btn {
      background-color: #ffffff;
      color: #1ca2d5;
      padding: 10px 20px;
      border: solid 1px #1ca2d5;
      font-size: 16px;
    }

in the theme index.php file I added below code to display this section.

<?php
 // Display the welcome section using the shortcode
 echo do_shortcode('[custom_welcome]');
?>

Issue: Content is displaying. but styles are not applied.

I tried multiple times to fix this. but still couldn't. kindly help me to fix this issue.

Note: custom-welcome-plugin.php, style.css files are in the same folder called 'custom-welcome-plugin'

Answer 1

Try making the call to add_shortcode from within the init action hook.

Example:

// Register shortcode
function my_shortcode() {
    add_shortcode( 'custom_welcome', 'custom_welcome_shortcode' );
}

add_action( 'init', 'my_shortcode', 10, 1 );