{"id":5177,"date":"2017-09-11T10:59:19","date_gmt":"2017-09-11T14:59:19","guid":{"rendered":"https:\/\/themespress.ca\/?p=5177"},"modified":"2022-10-01T15:04:54","modified_gmt":"2022-10-01T19:04:54","slug":"using-wp-enqueue-style","status":"publish","type":"post","link":"https:\/\/themespress.ca\/en\/using-wp-enqueue-style\/","title":{"rendered":"Using the wp_enqueue_style Bootstrap Function"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t

With this tutorial we will use the Bootstrap Stylesheet in one or multiple pages of our plugin; such as Settings, sub menus, etc…<\/p>\n

This will help avoid CSS conflicts or force other CSS styling from other WordPress plugins. Here’s a quick trick to use wp_enqueue_style<\/strong> in the admin_enqueue_scripts<\/strong> hook.<\/p>\n

This condition only works with a page ID. So if for example you have sub-pages in your plugin, we will develop it under it:<\/p>\n

[gridzy id=”5″]<\/p>\n\n\t\t<\/div>\n\t<\/div>\n

function themeplifyenqueuebootstrap()\n{\n    \/\/replace themeplify with your slug page ID\n    if(($_GET['page'] == 'themeplify') || ($_GET['page'] == 'autreslugid') || ($_GET['page'] == 'encoreunautreslugid') ) {\n        wp_enqueue_style('bootstrap.min', 'https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css');\n    }\n}\n\nadd_action('admin_enqueue_scripts', 'themeplifyenqueuebootstrap');<\/pre><\/div>\n\t
\n\t\t
\n\t\t\t
With multiple GET pages …<\/p>\n\n\t\t<\/div>\n\t<\/div>\n
function themeplifyenqueuebootstrap()\n{\n    \/\/replace themeplify with your slug page ID\n    if(($_GET['page'] == 'themeplify') || ($_GET['page'] == 'autreslugid') || ($_GET['page'] == 'encoreunautreslugid') ) {\n        wp_enqueue_style('bootstrap.min', 'https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css');\n    }\n}\n\nadd_action('admin_enqueue_scripts', 'themeplifyenqueuebootstrap');<\/pre><\/div>\n\t
\n\t\t
\n\t\t\t
You can also add another function or class for the Javascripts Bootstrap by using the same conditions. You allow your plugin to have an independant Javascript and\/or CSS stylesheet.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"With this tutorial we will use the Bootstrap Stylesheet in one or multiple pages of our plugin; such as Settings, sub menus, etc... This will help avoid CSS conflicts or
Read More<\/a><\/div>","protected":false},"author":81,"featured_media":5181,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[283],"tags":[323,313],"class_list":["post-5177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-javascript-coding","tag-plugins"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts\/5177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/comments?post=5177"}],"version-history":[{"count":0,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/posts\/5177\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/media\/5181"}],"wp:attachment":[{"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/media?parent=5177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/categories?post=5177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themespress.ca\/en\/wp-json\/wp\/v2\/tags?post=5177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}