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.

Linkhøst fra 20. august til 25. august

Bog­mærker ind­sam­let fra 20. august til 25. august

HTML URL Encod­ing Reference
25. august
URL encod­ing con­verts char­ac­ters into a for­mat that can be safely trans­mit­ted over the Inter­net. Enormt anven­delig, når der skal laves links til en OPAC.
Site5 — Web Host­ing for Webmasters
24. august
Another web host­ing com­pany. Unlim­ited web space, band­with and domains. @Spiri rec­om­mended this one.
Remote File Inclu­sion (RFI) Attempts — Detect­ing, Track­ing, and Mit­i­gat­ing or Stop­ping » BLOG INGENUITY
20. august
This arti­cle is intended for read­ers new to RFI and will pro­vide a short expla­na­tion of how RFI works and describe a few ways to detect, track, and mit­i­gate or stop RFI attempts through the use of track­ing soft­ware, server logs, your .htac­cess file, and your php.ini file.

Linkhøst fra 17. juli til 1. august

Bog­mærker ind­sam­let fra 17. juli til 1. august

Brush Pilot™ — The fast and easy Pho­to­shop brush pre­viewer for Mac OS X
1. august
Brush Pilot™ is a fast and easy appli­ca­tion for pre­view­ing Adobe® Pho­to­shop® and Adobe Pho­to­shop Ele­ments Brushes (.abr), built exclu­sively for Mac OS X. Brush Pilot is designed to save you time by allow­ing you to instantly pre­view your brushes with­out hav­ing to load them into Photoshop.
The Autopsy Of Word­Press As CMS With 25 Great WP Plu­g­ins & Designs | Onex­trapixel — Show­cas­ing Web Treats With­out Hitch
17. juli
Find­ing a suit­able and sim­ple to use CMS can be tough, it must be flex­i­ble, secure and work right out of the box. Beside that, it must be able to extend it’s func­tion­al­ity and search engine friendly. Let us now dis­cuss why neti­zens like Word­Press and what Word­Press can fur­ther do for us as a sim­ple Con­tent Man­age­ment Sys­tem (CMS).
Dig­i­tal Pho­tog­ra­phy School — Dig­i­tal Pho­tog­ra­phy Tips for You
17. juli
Wel­come to Dig­i­tal Pho­tog­ra­phy School! Dis­cover how to use your dig­i­tal cam­era with our Dig­i­tal Pho­tog­ra­phy Tips. We are a com­mu­nity of pho­tog­ra­phers of all expe­ri­ence lev­els who come together to learn, share and grow in our under­stand­ing of photography.

Linkhøst fra 2. juli til 8. juli

Bog­mærker ind­sam­let fra 2. juli til 8. juli

Advanced Word­Press — Cat­e­gory Based Nav­i­ga­tion Instead of Page Based | Intel­li­gent Web­site Wid­get Deploy­ment Strategies
8. juli
Most Word­Press themes use pages for nav­i­ga­tion. This is fine for most sin­gle user blogs, but when you want to really start expand­ing what Word­Press can do, look at using cat­e­gories for your main navigation.
Pat­tern­Cooler | Cool Seam­less Back­ground Pat­tern Designs for Web and Graphic Projects, Blogs, Twit­ter, MySpace, Mobile Phone Wallpapers,
4. juli
Add your own col­ors to con­tem­po­rary and retro pat­tern designs, or browse from thou­sands of pre-colored pat­terns in the seam­less pat­tern back­ground library.
Cre­ate a Clean and Col­or­ful Web Lay­out in Pho­to­shop — Tutorial9
2. juli
In this tuto­r­ial I am going to show you how to cre­ate a clean cor­po­rate lay­out in Photoshop