Quantcast
Channel: BC Design» Design
Viewing all articles
Browse latest Browse all 10

How to include a custom stylesheet on a WordPress options page

$
0
0

(or, “how to put a bunch of error messages in a blog post for effortless traffic”)

Let’s start with what doesn’t work, beginning with including the options page file itself:

If you’re defining a base URL for your includes, for example define('PLUGIN_BASE', plugin_dir_url( __FILE__ ));, you won’t run into any problems enqueuing scripts and stylesheets.
wp_enqueue_style( 'plugin-style', PLUGIN_BASE. 'css/plugin-style.css'); will work fine.
But don’t think about trying to include( PLUGIN_BASE . 'plugin-options.php');, you’ll get a friendly:
Warning: include() [function.include]: URL file-access is disabled in the server configuration
(It seems like include( 'plugin-options.php'); works, but I don’t think it’s the best way to go about it).

If we were suspicious of PLUGIN_BASE before, we’ll quickly progress to dismay and anger once we try to use it in plugin-options.php. A simple call to wp_enqueue_style( 'options-style', PLUGIN_BASE. 'css/options-style.css'); gives us this bizzarre error in the console:

Failed to load resource: the server responded with a status of 404 (Not Found) http://mystagingsite.mysite.com/wp-content/plugins/http://mystagingsite.mysite.com/wp-content/plugins/my-plugin/css/options-style.css?ver=3.4.1

Ok, so maybe the PLUGIN_BASE constant isn’t valid inside of a different class, or something. Let’s forget the definition and just put plugin_dir_url( __FILE__ ) there instead.

Nope.

plugin_dir_path(__FILE__)?
Nope.
dirname(__FILE__)?
Nope.
trailingslashit( dirname( $file ) )?
Nope.
plugin_dir_url( $file )?
Nope.
plugin_basename(__FILE__)?
Nope.
realpath( dirname( __FILE__ ) )?
Nope.
basename(dirname(__FILE__))?
Nope.

What eventually ended up working, though I still couldn’t tell you why, is wp_enqueue_style( 'options-style', plugins_url('/options-style.css', __FILE__) );

So if you got here with any of those errors above, I hope this has helped you out.


Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles



Latest Images