Wordpress

Making WordPress image management easier for your editors

I am man­ag­ing a Word­Press site with a lot of edi­tors and con­trib­u­tors. They are not all equally up to pace with Word­Press and how it works, or at least they have dif­fer­ent ways of doing things. One thing that has proved to be a chal­lenge is the way Word­Press han­dles thumb­nails. My edi­tors and con­trib­u­tors often miss the ‘set as post thumb­nail’ link,  lead­ing to the lack of thumb­nails on the front page.

In this post I will try to explain, how I have made a fall­back, mak­ing it sort of OK for my users to for­get about the thumbnail.

A lit­tle history

Once upon a time, before ver­sion 2.9, Word­Press did not sup­port post thumb­nails. But there were work arounds. One of the best, I ever found, was from a web­site called wp-fun.co.uk. Sadly, the site is gone today, but I man­aged to dig up the old post ‘Easy Peasy Images Sug­ges­tion Roundup’ by Andrew Rick­mann on Archive.org.

Andrew wrote a nice lit­tle PHP class to include in your func­tions file, which gets the first thumb­nail image attach­ment from Word­Press posts. Luck­ily, I also man­aged to dig that one up on Archive.org. Go grab it here: post_imagephp.txt (remem­ber to rename .txt to .php, before includ­ing it in your functions.php file).

So why are You telling me about antiques like this?”, You ask. Because we can use it with advan­tage in our fall­back for peo­ple, who for­get to click the lit­tle ‘set as post thumb­nail’ link.

That way, a thumb­nail will still be dis­played with the post, as long as the edi­tor has just attached an image. If there are no images attached at all, we can always dis­play a default thumbnail.

The fall­back

Let’s take a peek at the code. Put the fol­low­ing where you would nor­mally use the_post_thumbnail().

<?php
// First of all, check if there are any image attachments at all.
$imgargs = array(
'order' => 'ASC',
'post_type' => 'attachment',
'post_parent' => $post->ID,
'post_mime_type' => 'image',
'post_status' => null,
'numberposts' => -1,
);
$attachments = get_posts($imgargs);
// Next, check if there is a manually chosen thumbnail.
if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
}
// If there are no manually chosen thumbnails, check if there is an image attachment.
elseif ( $attachments ) {
// If there is an image attachment, call Andrew Rickmanns the_image function to get the thumbnail
the_image('thumbnail','attachment-thumbnail wp-post-image',false,false,true);
} else {
// If there are no attachments at all, display a default thumbnail.
?><img class="attachment-thumbnail wp-post-image" alt="" src="<?php bloginfo('stylesheet_directory'); ?>/the/path/to/your/image.jpg" />
<?php }?>

Require­ments:

Remem­ber to include this file, renamed to .php, in your functions.php: post_imagephp.txt

Krimimessen 2012

Screen dump of Krimimessen 2012

I have just launched a re-design of Krimimessen.dk. Krim­imessen is the biggest fes­ti­val about crime lit­er­a­ture and crim­i­nal fic­tion in Den­mark. A fes­ti­val which is arranged by Hors­ens Pub­lic Library, where I work. The site is designed so it resizes to fit the screen it is being viewed on, also known as respon­sive web design.

This is the first respon­sive site, I have cre­ated. It is built in Word­Press on a base of the awe­some HTML5 Boil­er­plate frame­work, which makes it eas­ier to build a mod­ern web site from scratch.

I learned a lot from read­ing Ethan Marcotte’s “Respon­sive Web Design” prior to this project. Marcotte’s “tar­get ÷ con­text = result” tech­nique, a way to cal­cu­late dimen­sions from pix­els into per­cent, was an invalu­able tool in the process. In fact, and very unusual indeed, it wasn’t even nec­es­sary to test a lot in Inter­net Explorer.

Flexible Widgets for WordPress

Flex­i­ble Wid­gets is a plu­gin for Word­Press that makes it pos­si­ble to dis­play a wid­get on selected cat­e­gories and/or pages.


The Flex­i­ble Wid­gets plu­gin lets you dis­play a wid­get on any cat­e­gory or page you wish. When set­ting up the wid­get, you are able to select the cat­e­gories and/or pages where you want to dis­play the wid­get. If none are selected, the wid­get will be dis­played glob­ally on your site, exactly like a default Word­Press widget.

The plu­gin comes in handy if you need your side­bar con­tent to change con­tex­tu­ally from page to page in rela­tion to your main con­tent. It is espe­cially use­ful if you want to use Word­Press as a CMS.

Flex­i­ble Wid­gets will replace the default Word­Press widgets.

Sreen­shot

Widget administration interface in the WordPress plugin Flexible Widgets

Select­ing cat­e­gories and pages in each widget’s back end.

Instal­la­tion

  1. Upload the flexible-widgets folder to the /wp-content/plugins/ directory
  2. Acti­vate the plu­gin through the ‘Plu­g­ins’ menu in WordPress

or search for “Flex­i­ble Wid­gets” in the “Add new” sec­tion of the plu­g­ins menu in your Word­Press admin inter­face and hit “Install now”.

Change log

0.3

  • Fixes an issue: Option­ally dis­play wid­gets on the home page, whether it is set up to be a sta­tic page or the blog posts page.

0.2

  • Tiny update to get the plu­gin and author URIs right.
  • Update on the instal­la­tion info.

0.1

  • Brand new plu­gin. Still play­ing with the bub­ble wrap.

Known issues

May con­flict with themes or plu­g­ins which include cus­tom widgets.

Please see the plu­gin sup­port forum.

Addi­tional information

The Flex­i­ble Wid­gets plu­gin con­sists of a bunch of ideas and lines of code, I wrote for the Word­Press theme in use at the web­site of Hors­ens Pub­lic Library.

This is my first plu­gin for Word­Press. I am sure, there is room for improve­ment. The code is far from per­fect as my pro­gram­ming skills are some­what lim­ited. But I do think the idea is quite good, so if you can write lean code and are des­per­ately in need of a small side project, you should be very wel­come to help me out.

If you have any ques­tions or com­ments, feel free to leave a reply.

Sådan finder man variabler i WordPress

Når man arbe­jder med tem­plates i Word­Press, kan det være enormt nyt­tigt at vide, hvilke vari­able, man har at arbe­jde med. Jeg havde et konkret prob­lem omkring en tag tem­plate (tag.php), hvor jeg havde brug for at finde ID-nummeret på det aktuelle tag til brug i funk­tio­nen get_tag_link().

Jeg fandt det ved at skrive lis­ten over mulige vari­able i query_vars ud med føl­gende stump kode:
<?php print_r($wp_query->query_vars); ?>

… og fandt, at den vari­abel, jeg havde brug for, hed tag_id.

Særde­les anven­deligt, når man har brug for overb­lik over tilgæn­gelige variable.

Øg maximum upload filstørrelse på 2 mb i WordPress

Som udgangspunkt kan man kun uploade filer op til 2 mb i Word­Press. Ikke nød­vendigvis et prob­lem for garvede brugere, der er i besid­delse af et billed­be­han­dling­spro­gram, men abso­lut et prob­lem for brugere, der tror, et billede er et billede, og ikke har begreb om fil­stør­relser. Fotos fra et 5 megapixel kom­pak­tkam­era fylder nemt et par mb, og visse brugere vil undre sig over at være ude af stand til at uploade sådan en svend direkte fra kameraet.

Det har egentlig ikke noget med Word­Press at gøre, men der­i­mod ind­still­ingerne i php.ini. Det er imi­dler­tid ikke alle web­hoteller, der tillader sine brugere at ændre i php.ini. Hos Giga­host kan man ændre visse ind­still­inger, men det slår af en eller anden grund ikke helt igen­nem i WordPress.

Jeg har imi­dler­tid fået føl­gende løs­ning til at fungere:

1. Opret en ny php.ini fil med føl­gende ind­hold:

post_max_size = 20M
upload_max_filesize = 20M
max_execution_time = 900

2. Upload filen til wp-admin mappen.

Og voila! Nu kan man uploade filer op til 20 mb.

Via Likoma.com

Sådan kaldes javascripts i WordPress

Da ver­sion 1 af stylesheets og tem­plates til Hors­ens kom­munes bib­lioteker i sin tid blev kodet op, havde jeg hen­tet javascript-biblioteket jQuery + diverse plu­g­ins, plac­eret dem i wp-theme map­pen og kaldt dem manuelt i theme’ets header.php script. Det var før jeg fandt ud af, at jQuery + plu­g­ins fak­tisk er inklud­eret i Word­Press og kan kaldes med ind­byggede funktioner.

Den “rigtige” måde at kalde javascripts på i Word­Press er med fuk­tio­nen wp_enqueue_script. Med denne funk­tion kan man kalde en række ind­byggede javascript bib­lioteker, heri­b­landt jQuery, Scrip­tac­u­lous og Pro­to­type. For at kalde jQuery, skriver man således føl­gende i header.php:

<?php wp_enqueue_script('jquery'); ?>

Har man sam­tidig brug for diverse jQuery afhængige plu­g­ins, f.eks. Thick­box eller jQuery UI, kan man nøjes med at kalde disse, da jQuery så kaldes automa­tisk. I så fald kan man nøjes med følgende:

<?php wp_enqueue_script('thickbox'); ?>
<?php wp_enqueue_script('jquery-ui-core'); ?>

Har man brug for javascripts, der ikke er ind­bygget i Word­Press, kan disse også kaldes med wp_enqueue_script. Hent koden, f.eks. jQuery Cycle, og placér den i en der­til indret­tet mappe i dit theme. Kald det dernæst på føl­gende måde:

<?php wp_enqueue_script('jquery.cycle.all.pack','/wp-content/themes/dit-theme-navn/din-javascript-mappe/jquery.cycle.all.pack.js',array('jquery')); ?>

Se doku­men­ta­tion til funk­tio­nen wp_enqueue_script her.

WordPress som CMS: En sidebar pr. kategori

Opnå mere flek­si­bilitet i bru­gen af Word­Press som CMS med én side­bar pr. kat­e­gori. Få PHP koden her.

Mange designere og udviklere væl­ger at bruge Word­Press som CMS fordi det er så enkelt og rel­a­tivt nemt at imple­mentere og udvikle til. Én af Word­Press’ store begræn­sninger i rollen som CMS er imi­dler­tid sidebar-metaforen. Som udgangspunkt er der i de fleste themes kun én eller to side­bars til rådighed sitewide, netop fordi Word­Press er skabt som blog­ging værk­tøj. I en blog er det sjældent nød­vendigt med flere.

Men har man brug for et decideret CMS, er der behov for rel­e­vant sekundært ind­hold på alle sider. Noget, der relaterer sig til sidens primære ind­hold og ikke bare en generel liste med kat­e­gorier, et arkiv og en blog roll.

Og så fik jeg den ide at man måske kunne opnå noget brug­bart, hvis man kunne oprette en side­bar pr. emnekat­e­gori. Så ville det være muligt at mål­rette widget-indhold til de enkelte emner og dermed øge rel­e­vansen af sekundært ind­hold på indlæg og kat­e­gorisider. Efter en del eksper­i­menteren, lykkedes det mig at skrue neden­stående sammen.

Neden­stående kode skal stå i dit themes functions.php fil:


<?php
# Get sidebar names from db.
global $wpdb;
$my_widget_name = $wpdb->get_col("SELECT slug
FROM $wpdb->terms, $wpdb->term_taxonomy
WHERE $wpdb->terms.term_id=term_taxonomy_id
AND taxonomy='category' AND count!=0 ORDER BY name ASC");

# Register one sidebar per category name.
foreach($my_widget_name as $my_widget) {
  register_sidebar(array(
    'name' => 'Category: ' . $my_widget,
    'before_widget' => '<div id="%1$s" class="%2$s widget">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>', ));
}
?>

Først opret­ter vi en forbindelse til data­basen, hen­ter kat­e­gori­navn og id fra alle kat­e­gorier, der ikke er tomme, samt sorterer kat­e­gori­erne efter navn. Dernæst reg­istr­erer vi vores nye side­bars i Word­Press med funk­tio­nen register_sidebar samt navn­giver hver side­bar med det enkelte kategorinavn.

Ind­sæt de nye side­bars i dit themes sidebar.php fil:


<?php
# If this is a category archive page.
if (is_category()) {
	global $wp_query;
	$cat_obj = $wp_query->get_queried_object();
	$category_slug = $cat_obj->slug;
}
# If this is a post.
elseif (is_single()) {
	$category = get_the_category();
	$category_slug = $category[0]->category_nicename;
}
# The widget.
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('category_' . $category_slug) ) : ?>
<div id="search" class="widget widget_search">
	<h3><?php _e('Search'); ?> <?php bloginfo('name'); ?></h3>
	<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
<?php endif; ?>

For at kalde den rigtige side­bar, skal vi have fat i det rigtige kat­e­gori­navn. Hvis siden er en kategori-side, kalder vi kat­e­goriens navn. Men hvis siden er et indlæg, kalder vi navnet på den første kat­e­gori, siden er gemt i. Nu udskrives kat­e­goriens side­bar, hvis du befinder dig på en kategori-side eller et indlæg.

Hvad så med ‘sider’?
Man kan lave noget tilsvarende med Word­Press’ side-metafor. I stedet for at tage fat i kat­e­gori­erne i data­basekaldet, skal man så bare have fat i tilsvarende for ‘sider’. I så fald vil data­basekaldet se ud som følger:


$page_sidebars = $wpdb->get_col("SELECT post_name
FROM $wpdb->posts WHERE post_type='page'
AND post_status='publish' AND post_parent='0'
ORDER BY menu_order ASC");

Bemærk!
Man skal være for­sigtig med meto­den, hvis man har mange kat­e­gorier og/eller sider, da Word­Press laver et kald til data­basen for hver side­bar, den skal loade i backend’en. Skal den lave for mange kald, får man time out og så fun­gerer meto­den naturligvis ikke.

WordPress HTTP kald og firewalls

Jeg har haft en masse bøvl med Word­Press MU efter opgrader­ing til ver­sion 2.7 på Hors­ens kom­munes bib­liotek­ers web­site, og har brugt en masse tid på at finde fejlen. Symp­tomerne var et enormt lang­somt site, hvor det tog 1,5 minut eller mere at loade hver enkelt side, både i front– og back end. Efter at have loadet længe, indlæste siden dernæst på én gang. Det lykkedes til sidst at finde en løs­ning, men prob­le­merne skyldtes ikke nød­vendigvis en fejl.

Hors­ens kom­munes bib­liotek­ers web­site står plac­eret bag kom­munens fire­wall. Det er jo glim­rende, for så vidt sikrin­gen af serveren. Det viser sig dog at give visse prob­le­mer ift. WordPress.

Word­Press har nem­lig brug for at lave en række HTTP kald til sig selv for at kunne udføre en række funk­tioner, bl.a. cron-jobs, ping­ing af andre sites, plu­gin updates og –instal­la­tion, core upgrades m.m. Men disse HTTP kald kan ikke komme igen­nem firewall’en og står der­for og laver time out, hvilket får sitet til at hænge i op til adskil­lige minutter.

Løs­nin­gen er at dis­able Word­Press eksterne HTTP kald. Det gøres i filen /wp-includes/http.php

Omkring linie 210 finder man følgende:

function request( $url, $args = array() ) {
  global $wp_version;

Dette ændres til:

function request( $url, $args = array() ) {
  return;
  global $wp_version;

Denne løs­ning bør dog nok være midler­tidig, da prob­lemet reelt lig­ger et andet sted, nem­lig i opsæt­nin­gen af firewall’en. Jeg har ikke meget erfar­ing med fire­walls, så hvis du har en ide, der kan løse prob­lemet rigtigt, uden at gå alt for meget på kom­pro­mis med sikker­he­den, vil jeg meget gerne høre om det.

Via Word­Press Trac

jQuery i WordPress

jQuery er allerede ind­bygget i Word­Press, så der er ingen grund til at down­loade og imple­mentere det i hvert nyt tema, du går i gang med. Bare ind­sæt ref­er­en­cen til jQuery før kaldet til “wp_head()” i header.php. Ref­er­en­cen til jQuery ind­sættes nemt med føl­gende tag:

< ?php wp_enqueue_script('jquery'); ?>

Art Direction plugin til WordPress — Pimp dine indlæg

Jeg har tidligere skrevet om Jason Santa Maria’s blog, der har det særk­ende at næsten hvert indlæg er indi­vidu­elt gen­nemde­signet i en stil, der passer ind i sitets overordnede look and feel.

Nu er det blevet lidt let­tere, i hvert fald rent teknisk, at opnå noget lig­nende med Word­Press. Noel Jack­son, designer hos Automat­tic, der udvikler Word­Press, har nem­lig for nylig udgivet et plu­gin, der gør det muligt at lave brugerde­finerede designs til indlæg enkeltvis, mens et glob­alt stylet arkiv bibeholdes.

Men ét er teknikken. Den virke­lige udfor­dring lig­ger i designop­gaven, hvis hvert indlæg i en blog ønskes stylet individuelt.

Plugin’et hed­der Art Direc­tion. Det er i beta og ver­sion 0.2 er ude nu.