hooks - Adding Plugin Assets to Header

I am creating a WordPress Plugin. I have already added some pages. But I want to add custom CSS to that pages in the <head>. I am trying: add_action( 'wp_head', 'DisHeaderAssets'); But nothing shows up in the header.

I have placed this in the plugin's functions.php file which is called immediately when plugin is loaded.

functions.php

add_action( 'wp_head', 'DisHeaderAssets')

function DisHeaderAssets() 
    {
        ?>
        <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="css/util.css">
        <link rel="stylesheet" type="text/css" href="css/main.css">
    <!--===============================================================================================-->
        <?php
    }

Apart from this I have tried several codes, but nothing is working.

I think the issue is that this action gets added only after header is fired.

I have placed this in the plugin's functions.php file which is called immediately when plugin is loaded.

functions.php

add_action( 'wp_head', 'DisHeaderAssets')

function DisHeaderAssets() 
    {
        ?>
        <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
    <!--===============================================================================================-->
        <link rel="stylesheet" type="text/css" href="css/util.css">
        <link rel="stylesheet" type="text/css" href="css/main.css">
    <!--===============================================================================================-->
        <?php
    }

Apart from this I have tried several codes, but nothing is working.

I think the issue is that this action gets added only after header is fired.

Share Improve this question asked Dec 15, 2021 at 11:52 Devanarayanan 114 bronze badges

1 The preferred solution is usually wp_enqueue_style(). Is there a specific reason you don't want to use it? – kero Commented Dec 15, 2021 at 12:53
@kero No. It's the first time I am creating a plugin, so don't know much. I will try it – Devanarayanan Commented Dec 15, 2021 at 14:20

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

I finally done like this:

  $form_styles_header = [
      "1" => "forms/vendor/bootstrap/css/bootstrap.min.css",
      "2" => "forms/fonts/font-awesome-4.7.0/css/font-awesome.min.css",
      "3" => "forms/vendor/animate/animate.css",
      "4" => "forms/vendor/css-hamburgers/hamburgers.min.css",
      "5" => "forms/vendor/animsition/css/animsition.min.css",
      "6" => "forms/vendor/select2/select2.min.css",
      "7" => "forms/vendor/daterangepicker/daterangepicker.css",
      "8" => "forms/css/util.css",
      "9" => "forms/css/main.css",
      "10" => "table/css/table-styles.css"
  ];

    foreach ($form_styles_header as $no=>$form_style) {
        wp_enqueue_style('du_form_style'.$no, $d_utility_url."/assets/".$form_style);
    }

where $d_utility_url is the path to my plugin. This is working properly and the issue has been fixed.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

hooks - Adding Plugin Assets to Header

1 Answer 1

与本文相关的文章

评论列表(0)