Menu

WordPress

WordPress how-to: Simple image slider with Simple Fields

There are a numerous WordPress plugins for creating image sliders/galleries out there, but this isn’t yet another how-to for using any of those. Instead, we want to show you the power and versatility of a plugin called Simple Fields.

Imagine that you want to customize the look of one or more pages with an image slider. There are a thousand and one ways of doing this, but let’s narrow it down by saying that the editor wants to be able to create his/her own image slideshows and choose which set of images is to be displayed as a slideshow on which page. That still leaves us with quite a few ways of going about it; like plenty lines of code in your page template and/or the functions.php of your theme, or installing one of all the image slider/gallery plugins on WordPress.org.

Reinventing the wheel is perhaps useful for the beginner who wants to learn the inner workings of WordPress, everyone else usually goes for the first and best plugin that does the trick. However, with experience comes the understanding of avoiding the use of too many plugins. This is why we like Simple Fields. By utilizing the versatility of this plugin, we find ourselves in much less need of plugins for basic tasks like this.

First off, let’s set up a custom post type for our slideshows. Add the following to the functions.php of your theme:


register_post_type('slideshows', array(
    'label' => 'Slideshows',
    'show_ui' => true,
    'supports' => array('title'),
    'labels' => array (
        'name' => 'Slideshows',
        'singular_name' => 'Slideshow',
        'menu_name' => 'Slideshows'
    ),
) );

This creates a very basic custom post type which at this points has no content or attributes to edit besides the title. This because we intend to add and manage the content with our own custom fields instead of the standard content editor in wordpress. Although this can be done using the Simple Fields administration pages as described in the Simple Fields documentation, we’re going to show you how to do this in code.

What we want is a repeatable file upload field attached to our slideshow posts so that we can freely add as many images we like to the slideshow. To do this, we begin with registering a field group like this (still in the functions.php of your theme):


simple_fields_register_field_group('slideshow_images',
	array (
		'name' => 'Slideshow images',
		'description' => 'Add images to your slideshow here',
		'repeatable' => 1,
		'fields' => array(
			array('name' => 'Slideshow image',
				'slug' => 'slideshow_image',
				'description' => 'Select image',
				'type' => 'file'
			)
		)
	)
);

The next step is to connect the field group to our slideshows post type. Again add to the functions.php file of your theme:


simple_fields_register_post_connector('slideshow_images_connector',
	array (
		'name' => "Slideshow images connector",
		'field_groups' => array(
			array('name' => 'Slideshow images',
				'key' => 'slideshow_images',
				'context' => 'normal',
				'priority' => 'high')
		),
		'post_types' => array('slideshows'),
		'hide_editor' => 1
	)
);

The image field group is now associated with our slideshows post type, but there is one more thing we need to do in order to make the fields visible by default:


simple_fields_register_post_type_default('slideshow_images_connector', 'slideshows');

At this point, you should be able to go to your wordpress administrator pages, select edit or add a new slideshow and then see the repeatable file upload field that we just created. It should look something like this:

simple-fields-tutorial-screen-1

As you can see, we have all we need to create and manage slideshows as we see fit. Neat, huh?

However, it’s not time to lean back and enjoy just yet. We also need the ability to select which pages that should display which slideshow and then actually display the slideshows, right? No worries, Simple Fields gives us the tools to ease this part as well. How about adding a simple slideshow selector on the edit page? Start editing your functions.php file again and add the following:


simple_fields_register_field_group('slideshow_page_options',
	array (
		'name' => 'Slideshow options',
		'fields' => array(
			array('name' => 'Slideshow display',
				'slug' => 'slideshow_page_display',
				'description' => 'Choose a slideshow to display on this page',
				'type' => 'post',
				'type_post_options' => array("enabled_post_types" => array("slideshows"))
			)
		)
	)
);

simple_fields_register_post_connector('slideshow_page_connector',
	array (
		'name' => "Slideshow page connector",
		'field_groups' => array(
			array('name' => 'Slideshow options',
				'key' => 'slideshow_page_options',
				'context' => 'normal',
				'priority' => 'high')
		),
		'post_types' => array('page')
	)
);

simple_fields_register_post_type_default('slideshow_page_connector', 'page');

The above adds an extra field on your standard page editor pages where you can select a slideshow to associate with the page. Like this:

simple-fields-tutorial-screen-2

Now all that remains is retrieving the slideshow images in your page template and display them. You can of course use whatever markup you like to suit whichever way you want your images to display, but let me give you an example of code for your page template using the Flexslider jQuery plugin. For template tidiness, start with adding this to your functions.php:


function page_has_slider($theID) {
	$slider_id = simple_fields_get_post_value($theID, "Slideshow display", true);
	return ($slider_id) ? $slider_id : false;
}

function get_slider_images($slider) {
	if (empty($slider)) {
		return false;
	} else {
		if (is_numeric($slider)) {
			$post_key = "p";
		} else {
			$post_key = "post_name";
		}
		$slides = array();
		$slide_query = new WP_Query(array( "post_type" => "slideshows", $post_key => $slider));
		if ($slide_query->have_posts()) : while ( $slide_query->have_posts() ) : $slide_query->the_post();
			$img_attachments = simple_fields_get_post_group_values(get_the_ID(), "Slideshow images", true, 2);
			foreach($img_attachments as $image) {
				$slides[] = wp_get_attachment_image( $image["Slideshow image"], "slider-image");
			}
		endwhile; endif; wp_reset_query();
		return (!empty($slides)) ? $slides : false;
	}
}

One function to check if the page has a slideshow associated with it, another to retrieve the images of the slideshow. That’s all we need. Now take a look at how little code we need in the page template to display the images of the slideshow. Just put the following inside ”The Loop”:


<?php if ($slider = page_has_slider(get_the_ID())) { ?>
	<div class="flexslider">
		<ul class="slides">
		<?php
			$slides = get_slider_images($slider);
			foreach ($slides as $slide) {
				echo "<li>" . $slide . "</li>";
			} ?>
		</ul>
	</div>
<?php } ?>

Now is the time to lean back and enjoy! 🙂

For those who endured this far, we thank you for your time and hope you liked this little tutorial. We aim to write more so don’t forget to check us out once in a while. And as always, feedback is really appreciated so don’t hesitate to let us know what you think in the comments section below. Happy coding!

Ett levande community med WordPress Meetup(s)

För en tid sedan höll vi en WordPress Meetup här i Norrköping som blev mycket lyckat. Vi skulle vilja tacka alla deltagare, sponsorer och sessionshållare för en fantastisk dag!

Läs gärna Bineros sammanfattning av eventet som kortfattat beskriver dagen.

Dokumentation

Då inte alla kunde komma ville vi naturligtvis att så många som möjligt live men även i efterhand kunde ta del av evenemanget. Därför livesände vi evenemanget via Bambuser. Stort tack till våra vänner på Monoscopio Medieproduktion för sponsringen av kamerautrustningen!

Se eventet på Bambuser

Nedan följer en länksamling till talarnas presentationer

Håll fler Meetups!

Vi vill att fler håller meetups! Därför har vi valt att skänka logotypen som togs fram i samarbete med Marcus Pettersson för eventet till communityt (enligt CC BY-SA 3.0). Tryck t-shirts, skriv ut planscher & gör vad ni vill med den!

Ladda ner WordPress Meetup logotyp här

Kom igång med WordPress och få en bra enkel hemsida

Vi älskar WordPress, och använder det för många av våra klienters webbplatser. Eftersom WordPress är byggt på öppen källkod kan vi inte ta betalt för WordPress i sig (Det är ett allvarligt licensbrott) – vi tar enbart betalt för den tid vi lägger ner och de kringtjänster vi tillhandahåller. För att sprida WordPress och hjälpa småföretag att få bättre och mer kostnadseffektiva webbplatser har vi därför lagt upp en halvdags WordPress-kom igång kurs där man dels får en utbildning i hur man använder WordPress, och dels får man en enkel hemsida byggd från befintliga mallar. Då kommer man in till vårt nya kontor, sätter er bredvid oss och pekar och instruerar hur man vill ha det.

Skillnaden på en hemsida med WordPress som har mängder av funktioner och är grymt designad jämfört med en som inte är det är helt enkelt denna arbetstid – i stommen har de bägge samma grund. Att börja använda WordPress är således en bra start för alla företagare och privatpersoner för att skaffa sig en bra onlinenärvaro – oavsett om man vill bygga själv eller om man vill låta någon annan göra det åt en.

Priset för ett sådant här tillfälle är 5000 kr vid köp av webbhotell via någon av våra samarbetspartners (ca 1500 kr / år + kostnaden för domännamn). Vad vi behöver veta när ni kontaktar oss är vad för domännamn ni vill ha, samt era företags / personuppgifter. Sedan bokar vi in tillfället när det passar er bäst!

För dig som vill ha snyggare design och fler funktioner, kontakta oss för en offert.

WordPress development: Custom post types and permalinks

Have you, like us, run into problems with permalinks and custom post types in WordPress? Have you spent hours after hours swearing at those 404’s because WordPress’ inability to handle taxonomy archives of custom post types? We might just have the solution for you.

Our idea of the optimal permalink structure for custom post types and associated taxonomies is:

domain.com/custom-post-type = custom post type archive
domain.com/custom-post-type/single-post = single post of the custom post type
domain.com/custom-post-type/taxonomy/term = custom taxonomy archive

This is however not how custom post types are meant to work. It was explained to us by a member of the WordPress support team that custom post types are, despite of its name, not posts at all. The emphasis should rather be on it being a type rather than post. To achieve a permalink structure along the lines of what we want, they suggest creating custom post types in custom post types like this:

domain.com/custom-post-type = custom post type archive
domain.com/custom-post-type/sub-custom-post-type = sub custom post type archive
domain.com/custom-post-type/sub-custom-post-type/single-post = single post of sub custom post type

While we acknowledge this as one way of doing it, it’s really not what we want for two reasons:

  1. What if we want to categorize the posts by more than one taxonomy? A post can never be of more than one type at a time.
  2. Managing custom post types is only done today by theme coding and/or third party plugins. There are no simple means of managing custom post types, at least not in a user friendly manner.

So, instead of using custom post types in custom post types, we want to categorize custom post types by taxonomies, as with normal posts and pages. However, here is where we run into problems. While registering taxonomies for our custom post types works just fine, the permalink structure domain.com/custom-post-type/taxonomy/term yields a 404-page. Again, they tell us; it’s not a bug, it’s a feature. Let’s just say that we’ve found a way to improve on this feature. 🙂

What we do is that we register our custom post types and taxonomies as usual. Then we add the following code to our theme’s functions.php:

function custom_init() {
	global $wp_rewrite;
	
	// Declare our permalink structure
	$post_type_structure = '/%post_type%/%taxonomy%/%term%';

	// Make wordpress aware of our custom querystring variables
	$wp_rewrite->add_rewrite_tag("%post_type%", '([^/]+)', "post_type=");
	$wp_rewrite->add_rewrite_tag("%taxonomy%", '([^/]+)', "taxonomy=");
	$wp_rewrite->add_rewrite_tag("%term%", '([^/]+)', "term=");

	// Only get custom and public post types
	$args=array(
		'public'   => true,
		'_builtin' => false
	);
	$output = 'names'; // names or objects, note names is the default
	$operator = 'and'; // 'and' or 'or'
	$post_types=get_post_types($args,$output,$operator);
	$post_types_string = implode("|", $post_types);

	$taxonomies=get_taxonomies($args,$output,$operator); // Note the use of same arguments as with get_post_types()
	$taxonomies_string = implode("|", $taxonomies);

	// Now add the rewrite rules, note that the order in which we declare them are important
	add_rewrite_rule('^('.$post_types_string.')/('.$taxonomies_string.')/([^/]*)/?','index.php?post_type=$matches[1]&$matches[2]=$matches[3]','top');
	add_rewrite_rule('^('.$post_types_string.')/([^/]*)/?','index.php?post_type=$matches[1]&name=$matches[2]','top');
	add_rewrite_rule('^('.$post_types_string.')/?','index.php?post_type=$matches[1]','top');

	// Finally, flush and recreate the rewrite rules
	flush_rewrite_rules();
}

function post_type_permalink($permalink, $post_id, $leavename){
	$post = get_post($post_id);

	// An array of our custom query variables
	$rewritecode = array(
		'%post_type%',
		'/%taxonomy%',
		'/%term%',
		$leavename? '' : '%postname%',
		$leavename? '' : '%pagename%',
	);

	// Avoid trying to rewrite permalinks when not applicable
	if ('' != $permalink && !in_array($post->post_status, array('draft', 'pending', 'auto-draft'))) {
		// Fetch the post type
		$post_type = get_post_type( $post->ID );

		// Setting these isn't necessary if the taxonomy has rewrite = true,
		// otherwise you need to fetch the relevant data from the current post
		$taxonomy = ""; 
		$term = "";

		// Now we do the permalink rewrite
		$rewritereplace = array(
			$post_type,
			$taxonomy,
			$term,
			$post->post_name,
			$post->post_name,
		);
		$permalink = str_replace($rewritecode, $rewritereplace, $permalink);
	}

	return $permalink;
}

// Create custom rewrite rules
add_action('init', 'custom_init');

// Translate the custom post type permalink tags
add_filter('post_type_link', 'post_type_permalink', 10, 3);

The above lines of code is actually all there is to it. What it does is defines /%post_type%/%taxonomy%/%term% as the new permalink structure and creates permalink rewrite rules for them with top priority. The rewrite rules are created by simply checking for possible custom post types and taxonomies in the database, this enables us to write very simple conditions in plain text for minimal overhead. Although, it should be noted that we have yet to test how much overhead this causes. So, we share this solution with the standard disclaimer; use at your own risk.

Any comments or questions are of course welcome. If this works or not, ideas of how to make it better, etc, let us know. 🙂

Underlätta redaktionellt arbete i WordPress med Frontend-editering

WordPress är superbra på många sätt. Ett sätt som det inte är så bra på är dock att det kan vara jobbigt att redigera både layout och innehåll på sidor. Olika delar av systemet matas av olika delar i backendet (dvs administrationsdelen av WordPress), och detta kan te sig förvirrande för någon som har mycket begränsad teknisk skicklighet.

Därför tänkte jag tipsa om några sätt man kan underlätta det redaktionella arbetet!

Skärmdump på Front-End Editor på min blogg (http://www.jimmyrosen.se)

Front-end Editor

Front-end Editor är ett fantastiskt litet plugin som man bara installerar och sedan som av magi så kan man redigera sina inlägg / sidor. Detta tillägg är perfekt om man vill redigera småsaker på ett smidigt sätt! Som ni kan se på skärmdumparna dyker det upp en liten ”edit” knapp när man håller musen över någonting som är redigerbart, sedan klickar man bara och så dyker det upp en editor och man kan redigera sitt innehåll.

Fördelar:

  • Enkelt att implementera: Bara att installera ett plugin så är man igång.

Nackdelar:

  • Fungerar inte optimalt tillsammans med tex Infinite-scroll.
  • Det går inte att flytta inlägg, widgets mm, utan ”bara” att redigera.
  • Det går inte att välja utvald bild.

Adress: http://wordpress.org/extend/plugins/front-end-editor/

Skärmdump på PressWork

PressWork

PressWork är ett ramverk för att skapa sitt egna tema i. Med hjälp av detta ramverk får användaren tillgång till funktioner som att byta ut teckensnitt (användaren kan välja ett valfritt från Google Web Fonts), användaren kan flytta runt sektioner på hemsidan som moduler mm. Det här ramverket är främst riktat till de som gör generella mallar som sedan kunden modifierar själv, då fokus ligger på att kunden skall kunna ändra VÄLDIGT mycket. Detta är inte alltid vad man vill uppnå, men för någon som känner att man vill ha den kontrollen är detta ett perfekt ramverk.

Fördelar:

  • Möjlighet att dra och släppa moduler.
  • Möjlighet att ändra väldigt mycket saker.

Nackdelar:

  • Måste integreras tillsammans med temat.
  • Ingen möjlighet att ställa in vad användaren får / inte får ändra.
  • Stor sannolikhet för krockande scripts.

Adress: http://presswork.me/

Få fler läsare på bloggen – Den utökade RPC listan.

(denna lista är ett work-in-progress)

När man har en blogg så är det alltid roligt om fler läsare kan titta se och läsa vad det är man skriver. Då är det bra om sidan indexeras av flera olika tjänster som människor sitter på automatiskt. Detta gör man genom att använda RPC. Kortfattat så ger man en liten ”knuff”, eller ”Ping” som det populärt kallas, där man säger till andra sidor att din sida är uppdaterad. Många av de populära pluginsen till WordPress gör mycket av detta automatiskt (åtminstone att de säger till Bing & Google mfl), men de Svenska tjänsterna är speciellt viktiga att vi lägger till.

Att lägga till RPC tjänster kan ses som fyra steg;

  1. Lägg till generella tjänster
  2. Lägg till generella tjänster med handpåläggning
  3. Lägg till specifika tjänster
  4. Lägg till övriga tjänster
  5. Kontrollera listan

Innan du sätter igång och fixa detta är det en bra grej om du kontrollerar att ditt RSS feed verkligen fungerar som det skall. Det kan du göra med Feedvalidator.

1: Generella tjänster

Använder man tex WordPress lägger man med fördel till dessa i sina inställningar och pingar då alltid dessa varje gång man skriver ett inlägg. Detta är ett relativt enkelt förvarande, det är bara att köra en copy-paste på denna listan och sen se nöjd och glad ut.

http://rpc.aitellu.com
http://ping.bloggnytt.se
http://www.frisim.com/ping/
http://blogsearch.google.se/ping/RPC2
http://nyligen.se/ping/
http://rpc.pingomatic.com/
http://rpc.twingly.com
http://www.nyhetsfilter.se/ping/
http://blogsearch.tailsweep.com/xmlrpc.do
http://rpc.technorati.com/rpc/ping
http://ping.feedburner.com/
http://blogpeople.net/ping
http://xping.pubsub.com/ping
http://www.syndic8.com/xmlrpc.php
http://sindice.com/xmlrpc/api

2: Generella tjänster med handpåläggning

Det finns ett par tjänster till som kan vara bra att pinga. Dessa kräver dock en liten handpåläggning först innan vi kan köra igång. En del kräver helt enkelt att vi kategoriserar våra inlägg, en del kräver att vi registrerar oss.

3: Specifika tjänster

Eftersom det finns ganska mycket bloggar och bloggare så är det viktigt att man blir listad på ”rätt” ställen. Handlar ens skriverier till exempel mestadels om politik, då bör man vara registrerad på så många politikerblogg-relaterade tjänster som möjligt.

4: Övriga tjänster

4.1: Automatiska tjänster

  • http://ping.blogs.yandex.ru/RPC2 – Om du har en sida på ryska
  • http://ping.baidu.com/ping/RPC2 – Om du har en sida på kinesiska

4.2: Tjänster med handpåläggning

  • http://www.sina.com/ – Om du har en sida på kinesiska
  • http://www.naver.com – Om du har en sida på koreanska

5: Kontrollera listan

När vi väl nu lagt in en massa RPC tjänster är det ju bra om vi kan prova dem. Listor har en tendens att lätt växa okontrollerat om de inte revideras, och med hjälp av thePINGlist kan vi kontrollera att våra RPC tjänster fungerar. Den gör även ett försök att betygsätta vår lista.

Källor

Informationen till denna artikel är hämtad från diverse olika sidor på Internet. Nedan följer en redogörelse.

  • http://www.arboundy.com/2010/12/2010-2011-definitive-wordpress-blog-ping-list/ – En lista över internationella RPC tjänster. Offline 🙁
  • http://borjablogga.se/svenska-pinglistan/ – En lista över svenska RPC tjänster.

Fler tips mottages varmt, speciellt på Punkt 3.

Utökad tumnagelkontroll i WordPress

Ett riktigt irriterande problem i WordPress är att det saknas bra kontroll över tumnagelgenereringen. Det enda som går att styra över är om bilden skall beskäras eller bara ändras storlek på, och då till vilken storlek. WordPress har ett inbyggt tumnagelredigeringsverktyg, men det fungerar inte i de ”skräddarsydda” storlekarna (I skrivande stund är WordPress version 3.05).

Problemet då är att det förvisso går att få WordPress att beskära och generera tumnaglar, men de är alltid centrerade i både X och Y ledd. Mycket irriterande! Ett bra exempel är den här sidan; När en bild laddas upp i portfolion vill man inte att den skall centrera bilden, då detta oftast resulterar i att man får se en massa text. Det man vill visa är hur sidan ser ut från toppen, eftersom det är det första intrycket besökaren stöter på.

Som tur är finns thumbGen. ThumgGen är ett plugin för WordPress ägnat åt utvecklare. Det händer med andra ord inget alls om man bara installerar det, utan är ämnat att fungera bakom kulisserna.

Såhär ser koden ut för pluginet i ‘Portfolio’ avdelningen:


<?php if (has_post_thumbnail() ) { // the current post has a thumbnail
  $img="";
  $image_id = get_post_thumbnail_id();

  if ($image_id) {
    $img = wp_get_attachment_image_src($image_id,'full-size');
  }

  if(!empty($img)) { ?>
  <a href="<?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id,'full-size');  $image_url = $image_url[0]; echo $image_url;  ?>" title="<?php if ( get_the_title() ) the_title(); else the_ID(); ?>"><img src="<?php thumbGen($img[0],386,219,"md5=0&halign=center&valign=top"); ?>" alt="<?php if ( get_the_title() ) the_title(); else the_ID(); ?>" /></a>
  <?php } ?>
<?php } else { // the current post lacks a thumbnail ?>
<?php } ?>

Här kontrollerar man först om det finns en tumnagel associerad till posten. Om det då finns det, då skapar den en tumnagel som är centrerad i X-ledd, och börjar från toppen i Y-ledd. Denna bild är då länkad till den ”stora” versionen av bilden.

Och ja, den här kodsnutten hoppar rätt friskt fram och tillbaka mellan PHP och HTML. Lättare att göra Copy-paste och använda i andra syften då 😉

Bästa cache pluginet till WordPress?

WordPress har en tendens att överbelasta hostinglösningar, speciellt om man börjar få mycket trafik. Till exempel fick några av våra samarbetspartners Kafit uppdraget att kolla över .SE:s lösning på grund av att de fick väldigt mycket fel.

En enkel lösning som man kan göra själv är att installera ett Cache plugin. Frågan är bara; vilket Cacheplugin är bäst? Tutorial 9 har gjort en superbra jämförelse som är värd att läsa.

Den kortfattade versionen är att det bästa cachepluginet är Hyper Cache tätt följt av att göra det själv.

Att göra det själv gör man genom att lägga in följande i sin .htaccess fil:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^wordpress-genererad-sida$ wp-content/cache/manuellt-sparad-sida.html
</IfModule>

Detta skulle då göra att http://www.minsida.se/wordpress-genererad-sida automatiskt skulle få html filen som låg på adressen http://www.minsida.se/wp-content/cache-manuellt-sparad-sida.html. Denna varianten är den mest exakta, men kräver också extrem precision.

Att använda Simple Fields

Pär Thernström har gjort Simple Fields – ett vansinnigt bra plugin till WordPress som förlängar funktionaliteten i WordPress avsevärt. Med hjälp av detta pluginet och det nya Custom post type systemet som introducerades i WP3 så kan man äntligen använda WP som ett ganska komplett CMS.

I detta blogginlägg tänkte jag visa hur man kan använda Simple Fields. För att inte bara svenskar skall förstå kommer jag att kommentera nedanstående på Engelska.

English:

So, this is my little code example getting images with the Simple Fields plugin. This could easily be adapted to be used together with some nice javascript slideshow, enabling slideshows on a per-post basis – very useful, especially together with custom post types.

(mer…)

1 2 3