{"id":46,"date":"2022-09-07T09:58:07","date_gmt":"2022-09-07T07:58:07","guid":{"rendered":"https:\/\/gerardvandenbosch.nl\/?p=46"},"modified":"2022-09-07T09:58:09","modified_gmt":"2022-09-07T07:58:09","slug":"wordpress-add-css-javascript-resources","status":"publish","type":"post","link":"https:\/\/gerardvandenbosch.nl\/?p=46","title":{"rendered":"WordPress add CSS\/Javascript resources"},"content":{"rendered":"\n

When developing a WordPress theme or a WordPress plugin in most case we want to add our own CSS and JavaScript files to it.<\/p>\n\n\n\n

Luckily in WordPress there is an easy way to include CSS or JavaScript resources to your project, it slightly differs between a theme and a plugin, we will describe them both in this article.<\/p>\n\n\n\n\n\n\n\n

Theme<\/h3>\n\n\n\n

In order to include CSS and JavaScript in our custom theme, we need to add them in the file functions.php<\/strong> of the theme. <\/p>\n\n\n\n

Adding CSS files into our theme requires to register and enqueue the style. Multiple CSS files can be added by duplicating the wp_register_style<\/strong> and wp_enqueue_style<\/strong> functions. <\/p>\n\n\n\n

The example below adds \/assets\/css\/style.css<\/strong> from within the theme<\/strong> folder<\/strong> to the page.<\/p>\n\n\n\n

function theme_css()\n{\n   wp_register_style('theme-css', get_template_directory_uri() . '\/assets\/css\/style.css', false,'1.1','all');\n   wp_enqueue_style('theme-css');\n}\nadd_action('wp_enqueue_scripts', 'theme_css');\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Adding JavaScript has a similar approach except that instead of register and enqueue style we use script.
The example below will add \/assets\/js\/custom.js<\/strong> from within the theme<\/strong> folder<\/strong> to the page.<\/p>\n\n\n\n
function theme_js()\n{\n    wp_register_script('theme-js', get_template_directory_uri() . '\/assets\/js\/custom.js', [], 1.1, true);\n    wp_enqueue_script('theme-js');\n}\nadd_action('wp_enqueue_scripts', 'theme_js');<\/code><\/pre>\n\n\n\n
Plugin<\/h3>\n\n\n\n
For a plugin there is a slight different approach, in the plugin file adding a CSS resource can do as following.<\/p>\n\n\n\n
function plugin_css_init() {\n    wp_register_style('plugin-css', plugins_url('css\/plugin.css',__FILE__), false, 1.1, 'all');\n    wp_enqueue_style('plugin-css');\n}\nadd_action('wp_enqueue_scripts','plugin_css_init');<\/code><\/pre>\n\n\n\n
This example adds \/css\/plugin.css<\/strong> in the plugin folder<\/strong> to the page, this however is only for the pages on the public side. If you want to add a CSS file to the WordPress admin panel<\/strong> the add_action<\/strong> needs to change:<\/p>\n\n\n\n
add_action('admin_enqueue_scripts','plugin_css_init');<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
For adding JavaScript it is more or less the same. The following example adds \/js\/plugin.js<\/strong> in the plugin folder<\/strong> to the page.<\/p>\n\n\n\n
function plugin_js_init() {\n    wp_register_script('plugin-js', plugins_url('js\/plugin.js',__FILE__), [], 1.1, true);\n    wp_enqueue_script('plugin-js');\n}\nadd_action('wp_enqueue_scripts','plugin_js_init');<\/code><\/pre>\n\n\n\n
Also for JavaScript the procedure to add files to the WordPress Admin panel<\/strong> is slightly different and the add_action<\/strong> needs to change:<\/p>\n\n\n\n
add_action('admin_enqueue_scripts','plugin_js_init');<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
With this information it should be easy to add CSS or JavaScript resources to the WordPress page or WordPress admin panel.<\/p>\n","protected":false},"excerpt":{"rendered":"
When developing a WordPress theme or a WordPress plugin in most case we want to add our own CSS and JavaScript files to it. Luckily in WordPress there is an easy way to include CSS or JavaScript resources to your project, it slightly differs between a theme and a plugin, we will describe them both […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[14],"class_list":["post-46","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-wordpress","post-preview"],"_links":{"self":[{"href":"https:\/\/gerardvandenbosch.nl\/index.php?rest_route=\/wp\/v2\/posts\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gerardvandenbosch.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gerardvandenbosch.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gerardvandenbosch.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gerardvandenbosch.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=46"}],"version-history":[{"count":5,"href":"https:\/\/gerardvandenbosch.nl\/index.php?rest_route=\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/gerardvandenbosch.nl\/index.php?rest_route=\/wp\/v2\/posts\/46\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/gerardvandenbosch.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gerardvandenbosch.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gerardvandenbosch.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}