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') );

Jonas kuraterade länkar 12 Juni 2012

Nya kuraterade länkar. Jag letar upp och sorterar högt och lågt, ofta med fokus på teknik, media, WordPress, musik och annat som ligger mig varmt om hjärtat.

Jonas tipsar – 31 Mars 2011

  1. The Official Google Blog – +1’s: the right recommendations right when you want them—in your search results
    – +1, helt rätt tänkt. Jag ska plus-etta som en crazy-man idag.httpv://www.youtube.com/watch?v=OAyUNI3_V2c
  2. Fotbollsblogg – Milo njuter som Totti spelar fotboll.
    – Jag håller med Birro ”Man kan inte annat än njuta och älska den här staden.” Rom alltså …
  3. Suzannes.se – Jag känner mig naken
    – Fy vad trist. Dags att göra den där listan som Suzanne skriver om (note to self).
  4. Drew Blas – The life and code of a passionate developer – My Sad Experience with Stardock
    – Det är rätt, häng ut dem bara.
  5. www.picselate.com – Duke Nukem Will Get You Laid
    – För bra rubbe för att inte länka.
  6. High Performance Web Sites – Announcing the HTTP Archive
  7. Nya Affärer – Följ med Nya Affärer till Linked In!
    Det gamla bbPress-forumet på Nya Affärer är nu borttaget.
  8. WP Engineer – php-Console with Chrome and WordPress
  9. Signal vs. Noise – QUOTE: They are not new lessons. Never owe any money…
  10. neversaidaboutrestaurantwebsites.tumblr.com – Never said about restaurant websites

    ”Thank you for making your site entirely in Flash so that you make it clear as day that you have no interest in serving tourists and our iPhones.”
  11. Tommy k Johanssons blogg om datorer & Internet – Se på regionsskyddade YouTube-klipp
  12. Mashable! – Dell: iPad is Too Expensive, Will Fail in the Enterprise
  13. Inside Facebook – How to Choose Open Graph Tags That Maximize the Value of Your Like Buttons
  14. Dagens Media – Senaste nytt – Simpsons-avsnitt stoppas
    – Jösses vad dumt.
  15. kovshenin.com – WordPress Experiments: Colors & The Color Wheel
    – Konstantin låter dig välja färgskalor i ditt wp-tema mha ett färghjul, snyggt!
  16. www.guardian.co.uk – Anton Hysén: ‘Anyone afraid of coming out should give me a call’

Jonas tipsar – 19 November 2010

  1. www.preservationhall.com – Preservation Hall Recordings To Release Limited Edition Recording Featuring Tom Waits and the Preservation Hall Jazz Band on 78rpm Vinyl Format
    – Nedräkning för att få köpa en stenkaka med Tom Waits. Inte ens jag är så galen (or am I …)
  2. Dagens Spotifylista – 80-talstema: 1983
    – Anders Mildners lista är lysande. Förutom The Style Council förstås. Jag har aldrig gillat dem. 🙂
  3. Blogg om SEO, sociala medier och marknadsföring» | Joinsimon.se – Red Shirt Guy – att vårda sina kunder
    – Smart av Blizzard.
  4. www.youtube.com – YouTube – Bruce Springsteen & Jimmy Fallon ”Whip My Hair” 11/16 (TheAudioPerv.com)
    – Sjukt bra.
    httpv://www.youtube.com/watch?v=vhFh-JqQuMg
  5. www.avclub.com – A.V. Club Taste Test Special: The Bowl At The Howling Rim Of Famous-Ity | Film | Taste Test | The A.V. Club
    – Som en kompis sa, ”I’m disgusted and amazed at the same time”
  6. Resumé: Nyheter – Beyoncés sexreklam stoppas
    – Undrar hur många kvinnor som får den parfymen i julklapp i år …
  7. Ted Valentin – Barbro och det magiska numret
  8. WP Engineer – Remove WordPress Multisite Feature – ToDo List!
    – Det är inte one-click att gå från multisite till ”vanlig” WordPress. Men här är en bra guide till hur man gör. Och igen, ta backup på alla filer och databas först!
  9. www.alistapart.com – A List Apart: Articles: CSS Positioning 101
  10. Smashing Magazine Feed – Designing for iPhone 4 Retina Display: Techniques and Workflow

Jonas tipsar – 17 November 2010

  1. Dagens Spotifylista – 80-talstema: 1980
    – Min 1980-lista på Dagens Spotifylista.
  2. 43 Folders – A Sandwich, A Wallet, and Elizabeth Taylor’s Cousin
    – ”avoid working for anyone who’s not hungry enough to compensate you”. Missa inte länkarna på slutet, mycket ”food for thought” om uttrycket ursäktas.
  3. webdesignledger.com – 13 Helpful Cheat Sheets for Building WordPress Themes | Resources
    – Fler cheat sheets för WordPress, om någon behöver. Tips från @tkj
  4. The Official Google Blog – Google Voice for iPhone
    – Av Christian Brunschen, en kursare från Lunds Tekniska Högskola. D-89 FTW! 🙂
  5. Nya Affärer – Fikarasten gör dig effektiv
  6. WordPress Snippets – Customize default avatar
    – Smart, det ska jag använda direkt.
  7. www.gentoo.org – Gentoo Linux Documentation — GNU C library: Multiple vulnerabilities
    – dags att uppdatera
  8. yoast.com – BlogPress SEO: solved – Yoast
    – Så om du inte gillar ett plugin som inte hostas på wordpress.org, registrera en tom plugin med samma namn på wordpress.org med ett högre versionsnummer och folk kommer få uppmaningen att uppdateras pluggen, och du har då highjackat den. Jag är inte säker på att det här är så bra.
  9. Dagens Media – Senaste nytt – Facebook går om Youtube bland unga
  10. The Official Google Blog – Beyond Instant results: Instant Previews
    – Kalla mig motvalls kärring, men jag gillar inte googles senaste uppdateringar av sökresultatsidorna. Det händer för mycket (hover-popups måste dö) och det finns för många filterfunktioner och valmöjligheter. Det var bättre förr. När man sökte på något och google la precis den sidan jag sökte överst. Och det gick på 12 mikrosekuner.
  11. mymlan. the real. – ett sista möte
  12. landskronabois.com – Landskrona BoIS [Senaste A-LAG] – Thomas Raun förlängde kontraktet[Landskrona BoIS]
    – Det er sku’ dejligt!
  13. JonasBergh – (okänd titel)
    – Om romaners anatomi, köttgryta och Håkan Hellström. Samtidigt.
  14. WordPress Development Updates » Agenda for Wednesday’s dev meeting: – F… – The theme uploader tool now performs a m…
  15. Backend Media – Hur en webbläsare fungerar
    – Pedagogiskt
  16. Daniel Pettersson – (okänd titel)
    – Så blev jag sugen på att resa igen. Jag har ju varit hemma i 4 dagar nu.
  17. mymlan. the real. – doften av snö
  18. fredrik.cafe.se – Pick your battles | Fredrik Backman
    – Jag har fått en ny favoritblogg …
  19. Matt Mullenweg – 1.0 Is the Loneliest Number
  20. Might Know Something Else – EPiServer uppköpt av riskkapitalist

Jonas tipsar – 2010-03-24

Jonas tipsar – 2010-01-28

Jonas tipsar – 2010-01-13

Automatisk spotifylänk i WordPress

På sajten http://topp30.se listar jag och en del vänner och bekanta varje år våra favoritlåtar. Vi har sysslat med detta något nördiga listande i drygt tio år. Förra året började några av oss att bifoga listan i spotify-form, och inte bara text. I år har nästan alla 20 en spotifylista för sin årslista.

Länken till spotifylistan finns i varje inlägg som en vanlig textlänk, men den ligger ofta på olika ställen, har olika ankartext och kan vara lite svår att hitta. Därför la jag till en genererad spotifylänk som alltid hamnar på samma ställe, uppe till höger i varje inlägg. Lättare att hitta, mer konsekvent.

Detta kan man åstadkomma genom att lägga spotifylänken som ett ”eget fält”, ändra i varje template-fil på rätt ställe (index.php/archive.php/search.php etc.) och där läsa in spotify-fältet och visa länken, men det blir opraktiskt att underhålla, lätt att göra fel och lite fult.

En betydligt snyggare lösning är att använda WordPress filterfunktionalitet.

Steg 1:
Lägg spotifylänken som ett ”Eget fält” (för varje inlägg som har en spotifylista).
länk till spotifylista

Steg 2:
Lägg till en funktion (i functions.php), som visar en länkad spotify-logga när det finns en lista tillgänglig.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function spotify_content($content) {
	global $post;
	$meta_key = 'spotify';
	$extra_info = "";
	$spotify_logo = get_bloginfo('template_url') . "/img/spotify.png";
	$meta_value = get_post_meta($post->ID, $meta_key, TRUE);
	if($meta_value != '') {
		$extra_info = <<<EOT
			<div class="spotify-link">
				<a href="$meta_value"><img src="$spotify_logo" alt="Lyssna på låtarna via Spotify" /></a>
			</div>
EOT;
	}
	return $extra_info . $content;
}

Steg 3:
Lägg till ett filter, som anropar spotify_content varje gång WordPress-funktionen the_content anropas. Det är the_content som visar texten i ett blogginlägg så den kommer definitivt att anropas från exempelvis single.php och index.php (det finns undantag, se längre ner)

add_filter( 'the_content', 'spotify_content' );

Steg 4:
Lägg till en css-klass i style.css som lägger din div som du vill ha den. Den allra enklaste varianten blir så här:

1
2
3
.spotify-link {
   float: right;
}

Och det var allt. Resultatet, med en klickbar spotify-logga för varje spotifierat inlägg blir så här:

topp30.se med automatisk spotifylänk
topp30.se med automatisk spotifylänk

Observera att ibland används the_excerpt stället för the_content i mallarna. Det är när man bara vill visa ett utdrag ur inläggen istället för hela texten.
Om man vill ha spotify-länken även i dessa mallar så är det inte svårare än att man lägger in ett filter för the_excerpt också:

add_filter( 'the_excerpt', 'spotify_content' );