Maak je eigen social media share buttons (als het echt moet)

Geplaatst op: 20 december 2013 | Auteur: Niels Pilon | Categorie: HTML-CSS

Ze ziet ze overal op het internet en zijn mij een doorn in het oog; social media buttons. Like, tweet en +1 buttons zijn graag geziene gasten op veel blogs maar komen die wel ten goede van je eigen website? Vaak zijn ze niet in lijn met het ontwerp en zorgen voor in veel gevallen voor het trager laden van een website. En wordt er nou echt veel op geklikt door jouw bezoekers?

Lees verder

WordPress en Advanced Custom Fields

Geplaatst op: 6 december 2013 | Auteur: Niels Pilon | Categorie: WordPress

Hoe makkelijk wil je het jezelf en de gebruiker van jouw WordPress website maken om content te plaatsen? Content waarbij je eenvoudig tekst of afbeeldingen kan toevoegen zonder je druk te hoeven maken over de HTML. En dan niet alleen, de tekst of afbeelding wordt altijd op de juiste positie weergegeven. Hoe krijg je dat voor elkaar? Door gebruik te maken van Advanced Custom Fields.

Lees verder

Meerdere sidebars op je WordPress website? Zo doe je dat.

Geplaatst op: 18 september 2013 | Auteur: Niels Pilon | Categorie: WordPress

Veel WordPress websites gebruiken een sidebar op hun blog of reguliere pagina’s. Maar hoe maak je meerdere sitebars aan die je op verschillende pagina’s of je blog kan plaatsen? In deze tutorial leg ik je uit hoe je dat doet.

Sidebars aanmaken

Als eerste zal je een sidebar (of meerdere sidebars) moeten aanmaken. Dit doe je met de register_sidebar() functie van WordPress die je plaatst in je functions.php bestand. In onderstaand voorbeeld maak ik een sidebar een genaamd ‘primary’.

<?php

add_action( 'widgets_init', 'my_register_sidebars' );

function my_register_sidebars() {

	/* Registreer de 'primary' sidebar. */
	register_sidebar(
		array(
			'id' =>; 'primary',
			'name' => __( 'Primary sidebar' ),
			'description' => __( 'Een korte omschrijving van de sidebar.' ),
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h3 class="widget-titel">',
			'after_title' => '</h3>'
		)
	);

	/* Herhaal de register_sidebar() code voor extra sidebars. */
}

?>

Wat doet deze code precies: Als eerste voorzie je de sidebar van een unique ID en de naam. Deze naam zal je terugzien in het widget gedeelte van je website. De ID zal WordPress gebruiken om de widgets in deze specifieke sidebar te koppelen en we gebruiken de ID om je sidebar op de website te tonen. Maar meer hierover verderop in deze tutorial.

Verder zie je de 'before-widget' en 'after-widget' waardes. Standaard plaatst WordPress alle widgets in een <li id="%1$s" class="widget %2$s""> element. Dit kan je wijzigen maar je zal de widgets altijd in een block element moeten plaatsen. In dit geval plaats ik elk widget in een <div>.

Met de 'before_title' en 'after_title‘ argumenten bepaal je de HTML output van je widget titel. Standaard plaatst WordPress de titel in een h2 namelijk <h2 class="widgettitle"">. Zelf gebruik ik bijna altijd een h3 of h4 afhankelijk van de structuur van de pagina. Semantisch gezien vind ik dit beter aangezien de titels in het content gedeelte van de pagina meer gewicht zullen hebben.

Sidebar tonen op je website

Nadat je de sidebars hebt geregistreerd wil je deze natuurlijk tonen op je eigen website. WordPress heeft hier een specifieke functie voor namelijk dynamic_sidebar().

De dynamic_sidebar() functie gebruikt een enkele parameter die je eerder hebt opgegeven tijdens het registreren van je sidebar. Dit kan of de ID of de name zijn van je sidebar. Technisch gezien kan je een van de twee gebruiken al wordt het aangeraden om de ID te gebruiken.

Met onderstaande code kan je de eerder aangemaakte primary sidebar tonen op je website. Als je wil kan je deze code nog plaatsen in een wrapper zodat je de sidebar eenvoudig kan stylen.

<div id="sidebar-primary" class="sidebar" >

	<?php dynamic_sidebar( 'primary' ); >

</div>

Als je een enkele sidebar hebt dan zal je bovenstaande code plaatsen in je sidebar.php bestand wat je kan vinden in je theme map. Maar technisch gezien kan je deze code plaatsen of elke plek waar je de sidebar wil laten zien. Werk je echter met meerdere sidebars dan is het makkelijker om met aparte sidebar templates te gaan werken.

Sidebar templates

Sidebar templates bevatten de code om je sidebar te tonen op je website. De standaard sidebar.php template zal bijna iedereen wel bekend voorkomen en zal ook volstaan als je een enkele sidebar op je website gebruikt. Door met meerdere templates te werken kan je jouw theme eenvoudiger beheren en organiseren. Stel dat je twee sidebars hebt met een ID van primary en secondary. Door een sidebar-primary.php en sidebar-secondary.php template aan te maken kan je deze sidebar nu eenvoudig beheren.

Maar hoe gebruik je deze templates nu in je theme? Daarvoor gebruik je de get_sidebar() functie van WordPress. Met onderstaande code laad je de standaard sidebar.php template.

<?php get_sidebar(); ?>

Deze Worpdress functie accepteert ook een enkele naam parameter waarmee je een specifieke sidebar template kan laden. Met onderstaande code wordt bijvoorbeeld de sidebar-primary.php template geladen.

<?php get_sidebar( 'primary' ); >

Je sidebar templates hoeven overigens niet alleen maar dynamische sidebars te tonen. Je kan ze ook gebruiken om wat voor content dan ook te tonen op je websites. Hetzelfde geldt voor het tonen van een sidebar. De code om een sidebar te laten zien op je website kan overal geplaatst worden en niet alleen maar in de sidebar template.

Geavanceerde CSS selectors

Geplaatst op: 11 september 2013 | Auteur: Niels Pilon | Categorie: HTML-CSS

CSS (Cascading Style Sheets) is ontzettend krachtig als het gaat om het stylen van de HTML elementen op je website. De basis selectors ken je vast wel maar er zijn ook hele handige child, sibling en pseudo selectors die je misschien nog niet kende.

Lees verder

Een slider op je homepage. Goed idee of niet?

Geplaatst op: 25 juli 2013 | Auteur: Niels Pilon | Categorie: Webdesign

Er is een hele grote kans aanwezig dat je vandaag een website hebt bezocht met een slider of carousel op de homepage. Maar hoe gebruiksvriendelijk en effectief is zo’n slider eigenlijk? En is het wel een goed idee om er een te hebben op je website? Ik ben in de wereld van de sliders gedoken en heb de antwoorden voor je gevonden.

Lees verder