Add custom javascript and CSS to WordPress admin

A conceptual example of how you could add css or javascript to your ”edit post” page in the WordPress dashboard.
I included an example of how you can ”send parameters” to the javascript file.

<?php
class MyClass {
	function admin_init() {
		wp_register_style( 'my_css', get_stylesheet_directory_uri() . 
			'/css/my_class.css' );
		wp_register_script( 'my_js', get_stylesheet_directory_uri() . 
			'/js/my_class.js', 'jquery', '1.0.6', true );
	}
 
	function enqueue_css() {
		wp_enqueue_style( 'my_css' );
	}
 
	function enqueue_js() {
		wp_enqueue_script( 'my_js' );
 
		// Add current post id as a javascript variable.
		global $post;
		$current_id = empty( $post ) ? '' : $post->ID;
		$my_params = array(
		  'postid' => $current_id,
		);
		wp_localize_script( 'my_js', 'MyParams', $my_params );
	}
}
 
if ( class_exists( "MyClass" ) ) 
	$my_class = new MyClass();
else
	error_log( "MyClass missing" );
 
add_action( 'admin_init', array(&$my_class, 'admin_init') );
add_action( 'admin_print_styles-post.php', array(&$my_class, 'enqueue_css') );
add_action( 'admin_print_scripts-post.php', array(&$my_class, 'enqueue_js') );

Unrecognized exception: [href=edit-comments.php?page=disqus]

I senaste WordPress-betan, 3.2 beta 1, används jQuery 1.5.2. Den versionen tillåter inte längre css-selektorer som inte sätter attributvärden inom citationstecken.
Om man, som jag, kör Disqus som kommentarsystem så uppstår ett problem, eftersom Disqus använder [property=value]-metoden vilket gör att jag får javascriptfel i admin vilket gör att de flesta menyknappar etc. är helt döda. Firebug visar det här felet:


Som tur är är det lätt att ordna, det är bara att gå in i plugin-filen disqus-comment-system/disqus.php och ändra:

mc.find('a.wp-has-submenu').attr('href', 'edit-comments.php?page=disqus').end()
   .find('.wp-submenu  li:has(a[href=edit-comments.php?page=disqus])')
   .prependTo(mc.find('.wp-submenu ul'));

till

mc.find('a.wp-has-submenu').attr('href', 'edit-comments.php?page=disqus').end()
   .find('.wp-submenu  li:has(a[href="edit-comments.php?page=disqus"])')
   .prependTo(mc.find('.wp-submenu ul'));

(det är alltså [href=edit-comments.php?page=disqus] som behöver attributfnuttar: [href=”edit-comments.php?page=disqus”])

Mer info här.

Jag gissar att Disqus lagar den här buggen väldigt snart.

Jonas tipsar – 29 Mars 2011

  1. Copyswede vill hämta miljoner från mobilerna – IDG.se
    – Jag försöker formulera det på ett bättre sätt, men det är bara uttryck som ”jävla idioter” som poppar upp i skallen.
  2. dowebsitesneedtolookexactlythesameineverybrowser.com
    – precis så
  3. 43 Folders – Scared Shitless
  4. Porn Addiction (Infographic)
  5. online.wsj.com – Making a 21st-Century Hamburger
    – Det DÄR kallar jag en burgare.
  6. fuglyandroid.tumblr.com – fugly android
  7. Webdesigner Depot – 10 Web Design Elements that You Shouldn’t Overlook
  8. Mashable! – Amazon Cloud Player: First Impressions
  9. High Performance Web Sites – Storager case study: Bing, Google
    – intressant om localStorage på Bing och Google. Prestanda för mobilsajter är ganska nytt och det är inte oväntat att jättar som Google och Microsoft visar vägen, helt enkelt för att de måste. Här är mycket att lära.
  10. nymag.com – Watch the Extended ‘Two Beavers’ Video From How I Met Your Mother — Vulture
    – Two beavers are better than one, poesi …
  11. The Tapir’s Tale – High Performance Javascript
  12. Signal vs. Noise – PHOTO: Great bit of copy in this dialog from Tiny…
  13. Apple Hot News – GarageBand for iPad: Music Talent Not Required
    – ”easily the best application I’ve seen so far this year.” Mina barn håller med.
  14. Scott Hanselman – This Developer’s Life 1.1.5 – Revolt
    – Mycket lyssningsvärt
  15. Smashing Magazine Feed – Photo Retouching Tips And Tricks In Photoshop
  16. Hetaste IT-nyheterna från IDG.se – Trojan i Spotify