Under början av året har jag tillsammans med The Brewery tagit fram Toca Bocas sajt. Ett krav från starten var att sajten skulle fungera minst lika bra i telefonen som på datorn. Vilket förefaller sig naturligt i.o.m. Toca Boca har valt att främst producera spel för iOS-plattformen. För att lösa detta använda vi oss av den relativt nya och populära tekniken vid namn Responsive Web Design. I kombination med CSS ramverket Less.

Konferensen inleddes under lördagen med traditionella föreläsningar leda av flera välkända svenska WordPress profiler. Nedan följer en sammanfattning av tre föreläsningar jag både fann givande och intressanta.

Jonatan Fried

Jonatan Fried från den både prisbelönta tidningen och sajten Fokus pratade om hur de arbetar med WordPress. Sajten består av en hel del dynamiskt innehåll som redaktörerna själva kan styra över. Detta tack vare ett frekvent användande av dynamiska sidebars. Dessa sidebars populeras sedan med Query Posts widgets. Tack vare denna lösning har man helt och hållet ersatt den traditionella loopen och istället flyttat filtreringen av innehållet i händerna på redaktörerna. En smart lösning som gör det möjligt att flytta och lyfta fram innehåll bäst man vill.

En annan funktion som får Fokus WordPress installation att sticka ut är deras konsekventa tänk kring deras egna taxonomier. Flera smarta egna taxonomier finns tillgängliga för att göra strukturen av innehållet mer logiskt. Bl.a. en som gör det möjligt att filtrera på papperstidningens nummer.

Systersajten Makthavare drivs även den av samma grundtema.

Hela presentationen finns tillgänglig här.

Thord Daniel Hedengren

WordPress gurun och författaren av boken Smashing WordPress Thord Daniel Hedengren pratade om hur man kan strukturera sina WordPress teman enligt parent och child principen.

Det hela går ut på att skapa ett parent tema som sedan ett flertal child teman kan baseras på. På så sätt kan man samla delad logik och funktionalitet i ens parent tema för att sedan hålla temaspecifik funktionalitet och logik i child temat. Den som tidigare är bekant med något form av ramverk inser säkerligen vinningen med denna princip.

Något som var nytt för mig var möjligheten att lyfta ut looparna till separata filer. Dessa filer kan sedan inkluderas medhjälp av funktionen get_template_part. Tidigare har jag använt en egen lösning för att åstadkomma precis detta. Nu är det dock givetvis dags att slänga ut min egna lösning till fördel för den nya befintliga funktionen.

Jag har i ärlighetens namn inte utforskat parent och child teman tillräckligt. Att separera logik och slippa upprepningar är alltid något som tilltalar mig.

Isaac Keyet

Isaac Keyet som i sig är en oerhört spännande och inspirerande person var även han påplats. Efter gymnasiet startade han ett flertal webbrelaterade projekt varav ett vid namn IntenseDebate vart uppköpt av Automattic. Idag jobbar han som projektledare för WordPress i mobilen vilket också var det ämne hans presentation berörde.

WordPress har idag applikationer för både Android, BlackBerry, iOS samt Nokia. Detta kompletteras med ett mobilanpassat tema som finns förinstallerat på alla WordPress.com bloggar. Temat finns i två versioner som alterneras beroende på telefonen du använder. I dagsläget är fördelningen av s.k. smartphones och “vanliga” telefoner lika. Dock ser Automattic en dramatiskt ökning av smartphones vilket inte gör det omöjligt att den inom en snar framtid dominerar användandet.

Temat som Automattic själva använder vid namn WPtouch kan du givetvis aktivera på din egen blogg.

WordCamp:et fortsatte långt in på natten med ett s.k. “hackathon“. Dagen därpå bestod av workshops och livesändning av Sweet Sunday Web Crunch. Dessvärre var jag själv tvungen att avvika efter föreläsningarna på lördagen. Dock är jag nöjd med sveriges första WordCamp och ser fram emot nästa års tillställning!

Bilderna tillhörande detta inlägg är lånade ifrån David Hall (@moonhouse).

Sajten innehåller främst information om de olika kurserna. Detta kompletteras i sin tur med ett traditionellt bloggflöde och aggregerad data från ett flertal webbtjänster så som Twitter, YouTube och Flickr.

Koncept och design togs fram av Good Old. Utveckligen ansvarade jag för och det hela byggdes i WordPress.

En viktig del i handlingsplanen är hur Sveriges matkultur ska marknadsföras. Bloggen Sverige det nya matlandet är ett första steg som bjuder in dig på en resa till det matland som Visit Sweden vill förmedla. Genom intervjuer, reportage och dialog med alla som har en åsikt kring ämnet blir bloggen ett forum för alla matengagerade intressenter.

BKC STHLM tog fram både koncept och form. Vilket resulterade i en WordPress driven blogg som jag tog fram.

Margareta har tidigare arbetat som utvecklingsansvarig och projektledare för Visit Sweden men bestämde sig nu i april för att starta denna nya verksamhet.

Tillsammans med Linus Eriksson, som ansvarade för det grafiska, tog vi fram en ny webbplats baserat på WordPress åt Margareta.

Coat it Green är ett nytt spännande initiativ från Becker Acroma med fokus på miljövänliga ytbehandlingar för trä.

Sajten är uppdelad i tre innehållsrika sektioner som i sin tur motsvara varsin målgrupp för de olika Coat it Green lösningarna.

Det hela är byggt medhjälp av WordPress som grund och är ännu ett bevis på att denna plattform även fungerar som ett fullfjädrat CMS när det kommer till informativa företagssajter i mindre skala. Det som inte fanns i kärnan löstes enkelt medhjälp av befintliga plugins för t ex. flerspråksstöd och kontaktformulär.

Koncept och design togs fram av BKC STHLM.

Discobelle är en musikblogg som drivs av ett gäng svenskar sedan år 2006. Så här beskriver de själva bloggen.

Discobelle.net is a Swedish blog about music. Because we love it, not because we want to cheat anyone out of any money. We don’t post albums, just single tracks, remixes and videos.

Design togs fram av svensken PMKFA (bosatt i Tokyo) och jag ansvarade som tidigare nämnt för produktionen och allmänt WordPress underhåll.

Därav hörde jag mig för om jag fick “forka” plugin:en och modifiera den utefter mina behov. Givetvis vart svaret ja.

Good Old Email Templates är alltså en plugin till WordPress för att skapa och administrera email-mallar. Mallarna kan innehålla ett flertal variabler som kan ersättas med egna värden. Detta är framför allt smidigt när man ska göra automatiska mailutskick till ett flertal användare.

Koden har fått sig en rejäl översyn och större delar har skrivit om av mig. Givetvis är plugin:en släppt helt i det fria. Var så god att ladda ner plugin:en från GitHub eller varför inte skapa en egen fork?

Good Old fick i uppdrag att ta fram en sajt för världsturnén samtidigt som jag fick i uppdrag att ansvara för produktionen.

På sajten kan hitta mer information om vilka städer som besöks samt ett flertal presentationer av elever som studerar vid Hyper Island. Varje elev representerar en stad och agerar kontaktperson för staden. På så sätt kan man få personligare kontakt med skolan om man går tankarna att söka till nästa års utbildningar. Det hela presenteras medhjälp av en Google Maps karta för att öka interaktionen.

Kartan kompletteras med ett bloggflöde samt ett ansökningsformulär. Formuläret “pratar” med Hyper Islands ansökningsdatabas medhjälp av ett API som togs fram av de trevliga typerna på Samuraj Data som även utvecklat ansökningsdatabasen.

Det var kul att få chansen att jobba med Google Maps, var länge sedan sen sist. Ännu en gång slogs jag av att det går att göra så oerhört mycket med relativt lite kod. All befintlig funktionalitet kan byggas på och många av de grafiska elementen för att navigera runt kan man ta kontroll över. Till min glädje visade det sig även Google Maps egna JavaScript API fungerar bra ihop med jQuery. Om du själv är sugen på att börja jobba med Google Maps så har jag vid det här laget samlat på mig en del bokmärken som kan komma väl till använding.

Sajten hittar du på tour.hyperisland.se och jag önskar Hyper Island lycka till med rekryteringen!

Den nya sajten innehåller många trevliga funktioner som t ex. mobilblogg (Bloglife), spelningsschema (Tour) och RPX funktionalitet.

Jag har hjälp till med listningen av inlägg och individuella inlägg rent grafiskt och utvecklings-mässigt. Givetvis har jag även bidragit med en del expertis på diverse WordPress relaterade områden.

Jag önskar September all lycka påvägen och hoppas även att sajten blir välbesökt!

Till detta års upplaga valde man att bygga en egen sajt för priset där all information och historia om priset samlas samt ett nomineringsformulär.

Jag fick i uppgift av webbyrån Good Old att producera sajten med WordPress som grund. Till nomineringsformuläret använde jag mig av min egen dokumenterade metod. Formen togs fram av Bonnier själva.

Nomineringen är öppen t.o.m. 1 oktober och vinnarna offentliggörs den 3 november.

Till både inga löjliga bilresor och place brand har jag använt denna metod som beskrivs nedan. Visst kan man istället använda sig av t ex, TDO Mini Forms men jag gillar att ha full kontroll över processen.

Jag är övertygad över att fler än jag har valt WordPress som verktyg till kampanjsajter, t ex. Nokia Tube music och Telefonjack? Nej tack. Hjälp mig gärna med att fylla på listan!

Principen är ganska enkel. Vad vi vill åstadkomma är att gemene besökare ska kunna posta ett inlägg (eller tävlingsbidrag) utan att behöva logga in. Detta inlägg ska sedan sparas ned som ett helt vanligt inlägg plus information om användaren. Inlägget sparas som ett utkast per automatik så att administratörerna kan granska det innan publicering. På detta vill vi gärna ha ett skydd emot elak spam och någon form av validering av datan. Så här kan flödet beskrivas.

1. Användaren skickar in sitt bidrag.
Utifrån formuläret vi har skapat skickar användaren in sitt bidrag för granskning.

2. Bidraget körs via Akismet.
All data vi får in ifrån användaren körs via Akismet för att avgöra om det är spam eller ej. Om det visar sig vara spam avfärdar vi helt enkelt användaren. Om inte går vi vidare till nästa steg.

3. Spara ned bidrag som ett utkast.
Allt verkar stå rätt till och vi sparar slutligen ner bidraget i vår databas på servern.

4. Meddela användaren att bidraget har tagits emot.
Meddela användaren att bidraget har tagits emot på ett eller annat sätt. Detta kan man göra på flera sätt, ett simpel meddelande som presenteras för användaren eller per e-post.

Nu när vi har en bra överbild över vad vi vill åstadkomma är det dags att skrida till verket.

Vad vi först behöver är ett formulär som användaren kan använda för att posta sitt bidrag. Vi behöver en titel och motivering plus lite information om användaren, som t ex. namn, e-post och telefonnummer. Formuläret nedan innehåller allt vi behöver. Tyvärr så strippar WordPress bort indenteringen.

<form action="" method="post">
 <fieldset>
 <p>
 <legend>Ditt bidrag</legend>
 </p>
 <p>
 <label for="campaign-post_title">Titel</label>
 <input type="text" name="campaign[post_title]" id="campaign-post_title" />
 </p>
 <p>
 <label for="campaign-post_content">Motivering</label>
 <textarea name="campaign[post_content]" id="campaign-post_content" rows="8" cols="40"></textarea>
 </p>
 </fieldset>
 <fieldset>
 <p>
 <legend>Om dig</legend>
 </p>
 <p>
 <label for="campaign-post_author_name">Namn</label>
 <input type="text" name="campaign[post_author_name]" id="campaign-post_author_name" />
 </p>
 <p>
 <label for="campaign-post_author_email">Email</label>
 <input type="text" name="campaign[post_author_email]" id="campaign-post_author_email" />
 </p>
 <p>
 <label for="campaign-post_author_phone">Telefon</label>
 <input type="text" name="campaign[post_author_phone]" id="campaign-post_author_phone" />
 </p>
 </fieldset>
 <p>
 <input type="submit" name="campaign[submit]" value="Posta" id="campaign-submit" />
 </p>
</form>

Postdatan som skickas när användaren klickar på “Posta” måste behandlas av en funktion eller dylikt. I detta fall använder vi oss av en funktion. Personligen föredrar jag att placera denna funktion i functions.php tillhörande temat. Vad funktionen gör är att kolla av om någon har fyllt i formuläret och skickat in uppgifterna. Denna kontroll utförs vid varje pageload med hjälp av WordPress egna funktion add_action som gör det möjligt att binda en funktion till en viss händelse (en s.k. hook). I detta fall binder vi funktionen till “init” som står för initialisering (pageload). Det första funktionen gör är att stämma av om postdatan vi söker verkligen har skickats eller inte. Om inte avbryter vi operationen omgående.

<?php
function mytheme_add_post() {
    global $micro_akismet;

    if (!isset($_POST['campaign']['submit'])) {
        return;
    }
}
add_action('init', 'mytheme_add_post');
?>

Om man vill kontrollera vissa uppgifter som t ex. att den ifyllda e-postadressen verkligen är en riktig e-postadress ska det ske nu. Förutsagt att man inte gör det innan formuläret skickas med hjälp av JavaScript.

Nästa steg är att kontrollera att uppgifterna vi har fått inte är spam. Detta görs enklast med hjälp av Akismet. Som du säkert redan vet finns det från start ett inbyggt stöd för Akismet när det gäller kommentarerna i WordPress. Dock har jag kommit fram till det är enklare att använda sig Gaby Vanhegans MicroAkismet klass. Jag har själv modifierat klassen lite för att göra det enklare att använda sig av den i WordPress. Denna plugin finns tillgänglig för nedladdning på GitHub. Observera att denna plugin kräver att du har Akismet pluginen aktiverad och konfigurerad. Efter att både Akismet och MicroAkismet pluggarna är aktiverade och klara kan vi äntligen göra en bedömning om uppgifterna vi fått är spam eller ej.

$post_data = $_POST['campaign'];
$vars = array(
    'comment_content' => $post_data['post_content'],
    'comment_author' => $post_data['post_author_name'],
    'comment_author_email' => $post_data['post_author_email']
);

if ($micro_akismet->is_spam($vars)) {
    // We caught a spammer.
} else {
    // Everything's alright.
}

Om allt är frid och fröjd (ingen spam) kan vi spara ned uppgifterna som ett inlägg med hjälp av funktionen wp_insert_post. Denna funktion tar en array innehållandes en massa argument som första och enda parameter. Vi vill spara inlägget men inte publicera det på direkten för att ge administratörerna en chans att bedöma om inlägget ska publiceras eller inte. Värt att notera är att  vi inte behöver escape:a den inkommande datan eftersom wp_insert_post gör det i syfte att skydda mot SQL-injektioner och annat otyg.

$new_post = array(
    'post_title' => $post_data['post_title'],
    'post_content' => $post_data['post_content'],
    'post_status' => 'pending',
    'post_author' => 2,
    'post_category' => array(10)
);

if ($post_id = (int)wp_insert_post($new_post)) {
    // Post inserted successfully.
} else {
    // Something went wrong.
}

Det kan vara bra att sätta upp ett användarkonto som får agera skribent åt alla bidrag. Byt ut post_author värde mot användarens id-nummer. Detsamma gäller även kategorier. Man vill med stor sannolikhet tilldela inlägget kategorin Tävling eller liknande. Notera att post_category argumentet alltid måste vara en array, även fast det bara handlar om en kategori. Byt ut post_category’s värde mot id-numret på din eller dina kategorier. För en fullständig dokumentation över alla tillgängliga argument rekommenderar jag dig att läsa igenom dokumentation för funktionen hos WordPress.

Nu när inlägget är har sparats vill vi också spara ner uppgifterna om skribenten. Detta gör vi enklast med hjälp av WordPress egna custom fields. På så sätt försäkrar vi oss om att uppgifterna endast tillhör vårt nyligen sparade inlägg.

<?php
$post_author = array(
    'post_author_name' => $post_data['post_author_name'],
    'post_author_email' => $post_data['post_author_email'],
    'post_author_phone' => $post_data['post_author_phone']
);

foreach ($post_author as $key => $val) {
    add_post_meta($post_id, $key, $val);
}
?>

Om du sedan i ditt tema vill visa upp t ex. skribentens namn kan du använda dig av funktionen get_post_meta. Notera denna funktion måste användas innanför post-loopen.

<?php echo get_post_meta($post->ID, 'post_author_name', TRUE); ?>

Då var det (nästan) klart! Personligen föredrar jag att “ajax:ifera” mina formulär för att skapa en trevligare upplevelse. Detta görs enklast med hjälp av jQuery och jForm. Om du bestämmer dig för att använda Ajax är det bra att skicka tillbaka en respons lätt kan tolkas med JavaScript. JSON är rätt det rätta valet för detta jobb. Så här kan en respons se ut i vår funktion.

<?php
$response = array(
    'status' => 1,
    'message' => 'Your post has been submitted!'
);

die(print(json_encode($response)));
?>

Jag har satt ihop ett demo med all kod ovan, baserat på WordPress default tema. Glöm inte heller att installera MicroAkismet pluginen innan.

Ladda ner demot här

Det här är min första renodlade guide. Därav uppskattas all form av feedback och konstruktiv kritik. Gör gärna din röst hörd bland kommentarerna om du har synpunkter eller frågor.

Thumbnailen tillhörande detta inlägg är lånad ifrån jmaclynn.

Denna funktion tar flera argument, en utav dem är “callback” som låter dig koppla en egen funktion som påkallas så fort en kommentar ska visas. På så sätt kan du själv bestämma vad som ska visas och inte visas. Personligen vart jag lite inspirerad av Disqus listning av kommentarer och valde även att formatera datumet och tiden då kommentaren postades på samma sätt som Twitter. Funktionen jag använder mig av heter niceTime och hittas borta hos Manas Tungare. Givetvis har skribentens uppgifter formaterats enligt hCard standarden.

Om du själv vill ta kontroll över listningen av kommentarerna på din blogg rekommenderar jag dig att läsa igenom dokumentationen hos WordPress.

Thumbnailen tillhörande detta inlägg är lånad ifrån thehutch.

Tanken är även den att börja skriva mer om det jag gör. Inte bara på uppdragsnivå utan även lite mer guider och annat gott. Håll tillgodo!

Som tidigare nämnt är sajten byggd med WordPress som grund. Nedan följer en lista över de plugins jag använder för den tekniskt intresserade.

Add-Meta-Tags
Genererar per automatik meta-taggar innehållandes keywords och description.

Breadcrumb NavXT
Ger en möjligheten att inkludera en klassisk “breadcrumb” som indikerar vart du som besökare befinner dig. Konfigureringsalternativ finns så det räcker och blir över.

Google XML Sitemaps
Genererar en s.k. “sitemap” som gör det enklare för sökmotorer som t ex. Google att få en överblick över sajten innehåll.

Top Level Categories
Tar helt enkelt bort “category” från kategoriernas permalänkar. Se exempel nedan för före och efter resultat.

Före: http://qvister.se/category/blogg
Efter: http://qvister.se/blogg

Om du läser detta inlägg från en rss-läsare är det hög tid att besöka sajten!

Thumbnailen tillhörande detta inlägg är lånad ifrån stage88.

Bakom tävlingen står Property People som sysslar med place branding, kommunikation och affärsutveckling av fastigheter, fastighetsprojekt och stadsdelar.

Sajten byggdes i WordPress som visar sig vara ett perfekt verktyg även till mindre kampanjsajter som denna. Tack vare inbyggd funktionalitet är det enkelt att låta besökare publicera poster utanför adminpanelen. Bidraget körs genom Akismet för att avgöra om det är spam eller ej för att sedan sparas som utkast som sedan kan verifieras av domarna innan de publiceras.

Besök placebrand.se och förklara med högst 140 tecken varför just din plats ska koras som Sveriges bästa place brand 2009!

Till denna sajt användes WordPress som plattform med flera tjänster påkopplade så som Flickr, Twitter och röstningsfunktionen. Detta i syfte att göra hela sajten mer interaktiv.

Mitt favorit bidrag än sålänge är garanterat detta. Vilken tycker du är den löjligaste bilresan?

Uppdatering: DN skriver om kampanjen.

Istället för att börja bygga ett intranät från “scratch” valde Visit Sweden att ta av det som redan fanns.Till min och BKC STHLMs (reklambyrå som jag i dagsläget hjälper med webbutveckling) glädje visade sig att alla bloggar drevs på WordPress. Tanken med intranätet var att samla alla befintliga bloggar under en och samma WordPress MU installation. Detta i syfte att minska antalet lösenord att komma ihåg och skapa en bättre struktur. På detta byggdes även en portalliknande startsida som bl.a. bjuder på ett aktivitetsflöde som sträcker sig över alla bloggar, omvärldsbevakning, “låt stå” funktioner och en gemensam Google kalender.

Det är kul att se företag som vågar gå en annan väg när kommer till relativt strikta lösningar så som intranät. Detta tillvägagångssätt visar även hur pass kompetent WordPress plattformen är, så mycket mer än en blogg. Även om det krävdes en hel del egen utvecklade plugins (List blogs widget är en utav dem).

För mer information rekommenderar jag min kollega Jonas Overödders bloggpost på samma tema. Fredrik Wackå fick även en demostration av intranätet och skrev några välvalda rader.

Några mail och konversationer över Gtalk senare var jag igång med utveckling av det som kom att kallas Emo Vote. Upplägget var följande, jag får ersättning för de timmar jag lägger ned samtidigt som plugin:en släpps som open-source med Mindpark som huvudsponsor. Ett fullkomligt underbart upplägg om du frågar mig.

Både jag och Jocke vart väldigt nöjda med resultatet. Vill du pröva på Emo Vote på din egen WordPress blogg kan du ladda ner från WordPress Plugin Directory. Om du vill kika på koden finns även den upplagd på GitHub.

Jag rekommenderar även dig att läsa Jockes post om arbetsprocessen, och tack till HejGustav som kom på taglinen!