Include Custom Style & Script into Custom Post Type Single Template

Question

I’m creating a plugin to add a custom post type.
For every custom post type, I also create custom single template.
The custom single template is not using get_header(); or wp_head() functions, it is coded from scratch manually.
I’ve enqueued style like this:

<link rel="stylesheet" href="<?php echo esc_url( plugins_url( '/public/css/wp-myplugin-public.min.css', dirname(__FILE__) ) ); "/>

And when I submitted the plugin, the WordPress team encouraged me to use built-in WordPress function such as wp_enqueue_style()

Since I don’t use get_header() and wp_head, there’s no way it can be enqueued into the header of my single template.

I’ve tried several ways like this:

function wp_myplugin_enqueue_style() {
global $post;
if ($post->post_type == 'myplugin') {
       wp_enqueue_style( 'myplugin-public-css',  plugin_dir_url( __FILE__ ) . ' public/css/wp-myplugin-public.min.css ' );
}
}
add_action( 'wp_enqueue_scripts', ' wp_myplugin_enqueue_style' );

Including like this:

function wp_myplugin_enqueue_style() {
if ( get_post_type( get_the_ID() ) == 'myplugin' ) {
       wp_enqueue_style( 'myplugin-public-css',  plugin_dir_url( __FILE__ ) . ' public/css/wp-myplugin-public.min.css ' );
}
}
add_action( 'wp_enqueue_scripts', ' wp_myplugin_enqueue_style ' );

Also like this:

function wp_myplugin_enqueue_main_css() {
    if (is_page_template('wp-myplugin-base-template.php')){
    wp_enqueue_style( 'myplugin-public-css',  plugin_dir_url( __FILE__ ) . ' public/css/wp-myplugin-public.min.css ' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_myplugin_enqueue_main_css' );

The above codes didn’t work at all.

The of the single template looks like this:

<?php
** Custom Single Template for MyPlugin
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
<?php if (in_array('wordpress-seo/wp-seo.php' || 'wordpress-seo-premium/wp-seo-premium.php', apply_filters( 'active_plugins', get_option('active_plugins' )))) :
    if ($meta_title = get_post_meta($post->ID, '_yoast_wpseo_title', true ));
    elseif ($meta_title = get_post_meta( get_the_ID(), myplugin_prefix( 'meta-title' ), true ));
    else $meta_title = get_option(sanitize_text_field('myplugin_meta_title'));
    if ($meta_description = get_post_meta($post->ID, '_yoast_wpseo_metadesc', true ));
    elseif ($meta_description = get_post_meta( get_the_ID(), myplugin_prefix( 'meta-description' ), true ));
    else $meta_description = get_option(sanitize_text_field('myplugin_meta_description'));
?>
<?php
if ($set_noindex = get_post_meta( get_the_ID(), myplugin_prefix( 'noindex' ), true ));
else $set_noindex = get_option(sanitize_text_field('wp_myplugin_noindex'));
if ($set_nofollow = get_post_meta( get_the_ID(), myplugin_prefix( 'nofollow' ), true ));
else $set_nofollow = get_option(sanitize_text_field('wp_myplugin_nofollow'));
?>
<?php
if ($set_noindex === "yes") {
$noindex = "noindex";
} else {
$noindex = "index";
}
if ($set_nofollow === "yes") {
$nofollow = "nofollow";
} else {
$nofollow = "follow";
}
?>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="profile" href="http://gmpg.org/xfn/11">
        <link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
        <link rel="icon" type="image/png" href="<?php echo esc_html(get_option('myplugin_upload_favicon')); ?>">
        <title><?php echo $meta_title; ?></title>
        <meta name="description" content="<?php echo $meta_description; ?>">
        <meta name="robots" content="<?php echo $noindex ?>, <?php echo $nofollow ?>" />
        <meta name="googlebot" content="<?php echo $noindex ?>, <?php echo $nofollow ?>, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
        <meta name="bingbot" content="<?php echo $noindex ?>, <?php echo $nofollow ?>, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
        <!-- WordPress team doesn't allow below method to enqueue style -->
        <link rel="stylesheet" href="<?php echo esc_url( plugins_url( '/css/wp-myplugin-public.min.css', dirname(__FILE__) ) ); ?>"/>
<?php get_header(); ?>
<?php endif; ?>
<?php $custom_css = get_option(sanitize_text_field('wp_myplugin_custom_css'));
if ($custom_css == '') {
    echo '';
} else {
    echo '<style type="text/css">'.$custom_css .'</style>';
  }
?>
    </head>

In order to include the wp-myplugin-public.min.css stylesheet, what is the best method I can use? I really need your help on this.

Thank you very much in advance!

0
, , Walter P. 5 months 0 Answers 71 views 0

Leave an answer