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'

Confirm that wp_enqueue_scripts action is firing. You can do this by adding exit; into the action's callback, or a plugin like Query Monitor. — Caleb
– Caleb, Commented Dec 9, 2023 at 20:23

kofeigen · Accepted Answer · 2023-12-09 21:43:17Z

0

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 );

answered Dec 9, 2023 at 21:43

kofeigen

1,6937 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

wp enqueue script not loading the css styles

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related