WordPress site aanpassen met HTML en CSS

html en css

Dit artikel is een korte introductie tot de verschillende tools en technieken die je kunt gebruiken om je WordPress website aan te passen. En het biedt een voorproefje van onze WordPress Handleiding! Er zijn twee manieren om de blog posts en pagina’s van je WordPress site te bewerken, namelijk met de Visuele editor en de Tekst editor. Beide editors maken gebruik van dezelfde internettaal, namelijk HTML (Hyper Tekst Markup Language). Ze bieden slechts twee verschillende manieren om de HTML te schrijven en te bewerken.

Het mooie van WordPress is dat je geen HTML hoeft te leren; de Visuele editor schrijft de HTML voor je. Maar een beetje HTML en CSS leren kan je wel een hoop frustraties schelen wanneer je een beroep moet doen op de Tekst editor om iets te verhelpen dat niet goed is gegaan, of wanneer je wat extra styling wil toevoegen.

Verder lezen

Tips voor het optimaliseren van je CSS code

Er zitten heel veel voordelen aan een schone, georganiseerde CSS code. Een lichtgewicht CSS bestand draagt bij aan een snellere laadtijd, is makkelijker te lezen, makkelijker te doorzoeken wanneer je iets wilt aanpassen of wanneer je problemen wilt oplossen, en doet je professioneler overkomen als web developer. Hieronder hebben we de beste tips voor het optimaliseren van je CSS code op een rijtje gezet!

Wordpress css code wijzigen

Verder lezen

Zo toon je eenvoudig code in je WordPress berichten

Run je een blog over web development en wil je graag code in je blogberichten delen? Vanwege veiligheidsredenen filtert WordPress standaard ‘raw code’ uit blogberichten, widgets en reacties. Gelukkig is er een uitstekende oplossing waarmee je code wél zichtbaar kunt maken in je blogberichten, namelijk de SyntaxHighlighter Evolved plugin.

De SyntaxHighlighter Evolved plugin

Verder lezen

Google Maps toevoegen aan WordPress met je eigen shortcode

Als je vaak gebruik maakt van Google Maps op je sites, of simpelweg op zoek bent naar een makkelijkere manier om kaarten in blog berichten en op pagina’s te embedden, dan is het creëren van je eigen shortcode voor Google Maps de ideale oplossing.

Google Maps toevoegen aan WordPress met je eigen shortcode

Verder lezen

6 handige WordPress snippets

 

1. Een custom post type FAQ in WordPress maken

Met de onderstaande snippet van rentageekmom.com kun je een custom post type FAQ maken.

<?php

add_action(‘init’, ‘custom_faqs’);

function custom_faqs()

{

$labels = array(

‘name’ => _x(‘faqs’, ‘post type general name’),

‘singular_name’ => _x(‘faq’, ‘post type singular name’),

‘add_new’ => _x(‘Add New’, ‘FAQ’),

‘add_new_item’ => __(‘Add New FAQ’),

‘edit_item’ => __(‘Edit FAQ’),

‘new_item’ => __(‘New FAQ’),

‘view_item’ => __(‘View FAQ’),

‘search_items’ => __(‘Search FAQs’),

‘not_found’ =>  __(‘No FAQs found’),

‘not_found_in_trash’ => __(‘No FAQs found in Trash’),

‘parent_item_colon’ => ”,

‘menu_name’ => ‘FAQ’

);

$args = array(

‘labels’ => $labels,

‘public’ => true,

‘publicly_queryable’ => true,

‘show_ui’ => true,

‘show_in_menu’ => true,

‘query_var’ => true,

‘rewrite’ => true,

‘capability_type’ => ‘post’,

‘has_archive’ => true,

‘hierarchical’ => false,

‘menu_position’ => 5,

‘supports’ => array(‘title’,’editor’,’thumbnail’,’excerpt’,’custom-fields’)

);

register_post_type(‘faqs’,$args);

}

//add filter to ensure the text faq, or faq, is displayed when user updates a faq

add_filter(‘post_updated_messages’, ‘faq_updated_messages’);

function faq_updated_messages( $messages ) {

global $post, $post_ID;

$messages[‘faqs’] = array(

0 => ”, // Unused. Messages start at index 1.

1 => sprintf( __(‘FAQ updated. <a href=”%s”>View FAQ</a>’), esc_url( get_permalink($post_ID) ) ),

2 => __(‘Custom field updated.’),

3 => __(‘Custom field deleted.’),

4 => __(‘FAQ updated.’),

/* translators: %s: date and time of the revision */

5 => isset($_GET[‘revision’]) ? sprintf( __(‘FAQ restored to revision from %s’), wp_post_revision_title( (int) $_GET[‘revision’], false ) ) : false,

6 => sprintf( __(‘FAQ published. <a href=”%s”>View FAQ</a>’), esc_url( get_permalink($post_ID) ) ),

7 => __(‘FAQ saved.’),

8 => sprintf( __(‘FAQ submitted. <a target=”_blank” href=”%s”>Preview FAQ</a>’), esc_url( add_query_arg( ‘preview’, ‘true’, get_permalink($post_ID) ) ) ),

9 => sprintf( __(‘FAQ scheduled for: <strong>%1$s</strong>. <a target=”_blank” href=”%2$s”>Preview FAQ</a>’),

// translators: Publish box date format, see http://php.net/date

date_i18n( __( ‘M j, Y @ G:i’ ), strtotime( $post->post_date ) ), esc_url( get_permalink($post_ID) ) ),

10 => sprintf( __(‘FAQ draft updated. <a target=”_blank” href=”%s”>Preview FAQ</a>’), esc_url( add_query_arg( ‘preview’, ‘true’, get_permalink($post_ID) ) ) ),

);

return $messages;

}

//display contextual help for faqs

add_action( ‘contextual_help’, ‘faq_add_help_text’, 10, 3 );

function faq_add_help_text($contextual_help, $screen_id, $screen) {

//$contextual_help .= var_dump($screen); // use this to help determine $screen->id

if (‘faqs’ == $screen->id ) {

$contextual_help =

‘<p>’ . __(‘Things to remember when adding or editing a FAQ:’) . ‘</p>’ .

‘<ul>’ .

‘<li>’ . __(‘Specify the correct topic such as Orders. Create a new topic if necessary.’) . ‘</li>’ .

‘<li>’ . __(‘Specify a custom excerpt – a short overview of the FAQ’) . ‘</li>’ .

‘</ul>’ .

‘<p>’ . __(‘Choose related posts using the MicroKids Related Posts Plugin below the FAQ’) . ‘</p>’ .

‘<ul>’ .

‘<li>’ . __(‘Click the Save button to save an FAQ as a draft’) . ‘</li>’ .

‘<li>’ . __(‘Click publish to publish an FAQ. ‘) . ‘</li>’ .

‘</ul></p>’;

} elseif ( ‘edit-faqs’ == $screen->id ) {

$contextual_help =

‘<p>’ . __(‘This is the list of all current FAQs in published or draft form. Hover over an FAQ and click Edit to edit, or click on the title of the FAQ to edit.’) . ‘</p>’ ;

}

return $contextual_help;

}

function my_rewrite_flush() {

custom_faqs();

flush_rewrite_rules();

}

register_activation_hook(__FILE__, ‘my_rewrite_flush’);

//hook into the init action and call create_FAQ_taxonomies when it fires

add_action( ‘init’, ‘create_faq_taxonomies’, 0 );

//create two taxonomies, genres and writers for the post type “FAQ”

function create_faq_taxonomies()

{

// Add new taxonomy, make it hierarchical (like categories)

$labels = array(

‘name’ => _x( ‘topics’, ‘taxonomy general name’ ),

‘singular_name’ => _x( ‘topic’, ‘taxonomy singular name’ ),

‘search_items’ =>  __( ‘Search Topics’ ),

‘all_items’ => __( ‘All Topics’ ),

‘parent_item’ => __( ‘Parent Topic’ ),

‘parent_item_colon’ => __( ‘Parent Topic:’ ),

‘edit_item’ => __( ‘Edit Topic’ ),

‘update_item’ => __( ‘Update Topic’ ),

‘add_new_item’ => __( ‘Add New Topic’ ),

‘new_item_name’ => __( ‘New Topic Name’ ),

‘menu_name’ => __( ‘Topics’ ),

);

register_taxonomy(‘topic’,array(‘faqs’), array(

‘hierarchical’ => true,

‘labels’ => $labels,

‘show_ui’ => true,

‘query_var’ => true,

‘rewrite’ => array( ‘slug’ => ‘topic’ ),

));

}

?>

Verder lezen

WordPress Snippets – widgets van het WordPress dashboard verwijderen

Om de widget op je WordPress dashboard weg te halen moet je onderstaande snippet toevoegen aan je functions.php bestand:

//Remove unwanted widgets from Dashboard

function remove_dashboard_widgets() {
global$wp_meta_boxes;
unset($wp_meta_boxes[‘dashboard’][‘normal’][‘core’][‘dashboard_plugins’]);
unset($wp_meta_boxes[‘dashboard’][‘side’][‘core’][‘dashboard_secondary’]);
}
add_action(‘wp_dashboard_setup’, ‘remove_dashboard_widgets’);

Controle van de website code in verschillende internet browsers

Browser compatibiliteit is iets waar alle webontwikkelaars veel tijd en werk aan besteden. Gebruik de volgende handige opdrachtregel om te controleren of de website code werkt in verschillende browsers zoals Internet Explorer, Mozilla Firefox, Google Chrome en Apple Safari.

Het handig NODE pakket, een programmeertaal om toepassingen in JavaScript op de server te plaatsen, maakt het gemakkelijk om te zien of nieuwe toegevoegde website functies, compatibel zijn met voldoende browsers en om die vervolgens te implementeren op de website.

Verder lezen

Social Media iconen toevoegen aan je WordPress navigatie balk

Zoals je inmiddels wel weet is social media integratie van essentieel belang voor je website. Het is een manier om bekend te worden. Social media iconen in je navigatie balk zijn direct zichtbaar voor je bezoekers, en verhogen de kans om gedeeld te worden. Maar hoe krijg je nu social media iconen in je navigatie balk?

Methode 1: Via CSS

  1. Download de benodigde social media iconen in formaat 32x 32.
  2. Ga naar Appearance > Menus.
  3. Open het Screen Options paneel aan de rechter bovenzijde.
  4. Vink ‘CSS Classes’ aan.
  5. Voer custom CSS classes in het veld in.

social media knoppen menu

Verder lezen

Zo verwijder je WordPress menu items voor een betere klantervaring

De WordPress backend is geweldig als je er eenmaal aan gewend bent, maar bij beginners kan het even duren voor ze alle ins en outs onder de knie hebben. Als jij als WordPress developer je website oplevert, wil je het beheren van de site natuurlijk zo makkelijk mogelijk maken voor je klanten. De gemiddelde gebruiker spendeert de meeste tijd met het schrijven en plaatsen van berichten, dus in principe hebben ze niet veel andere opties nodig die daar niets mee te maken hebben.

Een klant die niet erg bedreven is met WordPress zou per ongeluk het thema kunnen switchen, of plugins uitschakelen die nodig zijn om de site optimaal te laten functioneren. Dit wil je natuurlijk voorkomen. Maar zelfs als je klanten niet verder klikken dan waar ze moeten zijn, kun je iets doen om hun werkzaamheden te vergemakkelijken: namelijk door het verwijderen van WordPress menu items die zij niet nodig hebben. In dit artikel vertellen we hoe je dat kunt doen.

Verder lezen

Hoe maak je een WordPress website veiliger zonder plugins te installeren?

WordPress is één van de grootste en meest gebruikte platforms die er zijn, maar een dergelijk open source systeem heeft natuurlijk ook haar kwetsbare plekken. Er zijn talloze plugins verkrijgbaar om de veiligheid van je WordPress site te verbeteren, maar enkele van de beste maatregelen die je kunt nemen behoeven geen plugins. Hieronder hebben we er een aantal voor je op een rijtje gezet!

WordPress website beveiligen

Verder lezen

Laat gebruikers inloggen op je WordPress website met een emailadres

Wees eerlijk: hoe vaak heb je een website bezocht waarbij je je ooit eens had geregistreerd, maar waarvan je echt niet meer weet welke gebruikersnaam je destijds had gekozen? Dat zal ongetwijfeld vaker zijn voorgekomen, en ja, het gebeurd iedereen. Een ander veelvoorkomend probleem is dat gebruikers er tijdens het registratieproces achter komen dat de gebruikersnaam die ze willen al bezet is. De oplossing is eigenlijk heel simpel: je kunt gebruikers ook de mogelijkheid geven om in te loggen met hun e-mailadres. De kans dat ze dat vergeten is tenslotte een stuk kleiner!

Laat gebruikers inloggen op je WordPress website met een emailadres Verder lezen

De beste shortcode plugins voor WordPress om je content te verbeteren

Een shortcode is in feite niet meer dan een placeholder; een kleine regel tekst die je kunt toevoegen aan je WordPress posts en pagina’s. Zodra de post of pagina gepubliceerd wordt, wordt de shortcode vervangen door bijvoorbeeld een mooie en opvallende button. Maar shortcodes kunnen ook vervangen worden door andere content, zoals sliders, media players, galleries, enzovoorts.

In dit artikel hebben we vier van de beste WordPress shortcode plugins voor je op een rijtje gezet!

Easy Bootstrap Shortcode

Easy Bootstrap Shortcode

De Easy Bootstrap Shortcode plugin is een uitstekende keus als je je posts of pagina’s custom layouts wilt meegeven. De shortcodes kunnen gemakkelijk aan je content worden toegevoegd door middel van de knop in de WordPress post editor. Dat bespaart je heel wat plak- en knipwerk! De plugin bevat meer dan 500 Font Awesome icoontjes die je kunt gebruiken, alsmede diverse lists, notificaties, popovers, progress bars, image effects en buttons. Je kunt ook gemakkelijk shortcodes in je widgets zetten, zodat ze in de zijbalken en footers van je website weergegeven kunnen worden. Verder lezen

De beste en gratis manieren om je website te checken op fouten en design

Succesvolle WordPress website ontwikkelaars controleren regelmatig de kwaliteit van de WordPress websites die ze gemaakt hebben om het succes te waarborgen. Hoewel er veel geweldige tools beschikbaar zijn voor mensen met een groot budget, zijn er ook manieren om de kwaliteit van een website te checken zonder ook maar een cent te hoeven uitgeven. Wij hebben ze voor je op een rijtje gezet!

wordpress website controleren op fouten Verder lezen

Voeg de leestijd per bericht toe aan je WordPress website

Niet iedereen heeft zin om een lange tijd te besteden aan het lezen van een artikel. Het is daarom handig om aan te geven hoeveel leestijd per bericht nodig is op jouw WordPress website. Maar hoe doe je dat? Om deze functie toe te voegen download en installeer je de Estimated Post Reading Time plugin gratis van de WordPress.org website.

De plugin berekent de gemiddelde leestijd die nodig is om een volledig blogbericht te lezen. Het is een snelle en eenvoudige manier om de bezoeker te laten zien hoeveel tijd het zou kosten om even het berichtje te lezen waarvan de titel hem of haar aanspreekt.

Voeg de leestijd per bericht toe aan je WordPress website Verder lezen

Hoe maak je een widget area op je WordPress website?

Eén van de voordelen van WordPress is dat het zo makkelijk kan zijn om veranderingen aan te brengen aan complexe onderdelen van jouw website. Een voorbeeld hiervan zijn sidebar widgets – widgets die je kunt toevoegen in de zijbalk op je blog. Het enige wat je hiervoor hoeft te doen, is de widgets naar keuze te verslepen naar de plek waar je ze wilt hebben. Zo verander je in een handomdraai de looks van je website.

Hoe maak je een widget area op je WordPress website Verder lezen

Wat is het function.php bestand en wat kun je ermee?

Alle WordPress thema’s bevatten een functions.php bestand. Als je door de directory van je site heen browst, zul je hem vanzelf tegenkomen.

functions.php

Verder lezen

Email notificaties opzetten in WordPress

Transactionele emails zijn eenmalige berichten die getriggerd worden door een actie van een gebruiker, en vervolgens naar een specifiek emailadres worden gestuurd. Denk bijvoorbeeld aan een gebruiker die zich op een website registreert en vervolgens een email krijgt. Of aan de notificatie die je krijgt wanneer iemand een reactie achterlaat op één van je blogpost. Deze email notificaties zijn gemakkelijk in te stellen in WordPress, namelijk door gebruik te maken van de functie wp_mail(). In dit artikel leggen we uit hoe dat in zijn werk gaat. Verder lezen

Hoe wijzig je de loginpagina van je WordPress website?

Hoe wijzig je de loginpagina van je WordPress websiteEen vraag die vaak wordt gesteld door mensen die nieuw zijn in het gebruik van self-hosted WordPress websites, is ‘Waar vind ik de loginpagina voor mijn website?’.

De standaard loginpagina voor alle WordPress websites is te vinden via jouwwebsite.com/wp-login.php, jouwwebsite.com/wp-login of jouwwebsite.com/wp-admin. Uiteraard vervang je jouwwebsite.com met het echte adres van jouw website. Verder lezen

Hoe laat je een video als popup weergeven in WordPress?

Iedereen kan wel een video op zijn of haar WordPress site zetten. Maar in plaats van een video te embedden, kun je er ook voor kiezen om de video weer te geven in een mooi popup venster. Dit geeft een echt wow effect en zorgt tevens dat de layout van je webpagina netjes blijft. Hieronder vertellen we hoe je dat kunt doen.

Stap 1

Download en installeer de WP Video Lightbox plugin.

WP Video Lightbox plugin Verder lezen

Hoe maak je zelf WordPress Custom Fields?

WordPress geeft je de mogelijkheid om Custom Fields (ook wel Extra velden genaamd) aan een berichten toe te wijzen. Deze Custom Fields bevatten extra informatie die we meta-data noemen. Hiermee kun je je posts veel uitgebreider maken en je blog veel persoonlijker.

WordPress custom fields en extra velden toevoegen Verder lezen

Top 5 WordPress plugins voor WordPress developers

Een van de grootste voordelen van WordPress is de eindeloze mogelijkheid voor het aanpassen van jouw eigen WordPress website, dankzij duizenden plugins, waarvan een groot deel zijn ontworpen voor en door WordPress developers en WordPress programmeurs.

WordPress development wordpress plugins

In dit artikel bespreek ik de top 5 WordPress plugins die ideaal zijn voor WordPress developers en WordPress programmeurs. Verder lezen

Hoe maak je een WordPress Child Thema?

WordPress Child theme makenJe hebt het misschien wel eens meegemaakt: je bent uren bezig geweest om je WordPress site te customizen en hem precies zo te krijgen als je hem hebben wilt. Vervolgens update je het thema, en… al je harde werk blijkt voor niets.

Door een WordPress Child Thema aan te maken, kun je veranderingen aan je site doorvoeren zonder dat je daarbij aan de code van je oorspronkelijke thema hoeft te komen. Dit maakt het een stuk makkelijker om je site te updaten zonder dat je daarbij het risico loopt om al je aanpassingen kwijt te raken wanneer je eens een update doet. Een Child Thema ‘erft’ de functionaliteiten van het oorspronkelijke thema (de ‘Parent’). Je kunt je Child Thema ook uitzetten en terugvallen op de Parent wanneer je dat wil.

Hieronder zullen we de beginselen van het aanmaken van een WordPress Child Thema beschrijven. We nemen als voorbeeld het WordPress Ignite thema. Verder lezen

Standaard formaat van gallerij afbeeldingen in WordPress wijzigen

Standaard worden de afbeeldingen in gallerijen in “full” formaat weergegeven op je WordPress website. Dit is echter niet altijd even mooi en het kan dus voorkomen dat je graag wilt dat deze afbeeldingen in een ander formaat worden weergegeven. Gelukkig kun je dit standaard formaat eenvoudig aanpassen in het functions.php bestand.

Standaard formaat gallerij afbeeldingen wijzigen in WordPress Verder lezen

De wp header leegmaken in WordPress zonder plugin

Standaard worden er veel onnodige zaken in de wp header geplaatst door WordPress en het WordPress thema dat je gebruikt. Met onderstaande code kun je de wp_head() snel vrijmaken van onnodige zaken. Uiteraard is dit ook weer goed voor de vindbaarheid van je website.

WP Header code

Plaats onderstaande code in het functions.php bestand om de wp_head() leeg te maken:

remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'start_post_rel_link' );
remove_action( 'wp_head', 'index_rel_link' );
remove_action( 'wp_head', 'adjacent_posts_rel_link' );
remove_action( 'wp_head', 'wp_shortlink_wp_head' );

Het schokkende effect wanneer je verkeerde login gegevens gebruikt verwijderen

Even een hele leuke en simpele WordPress code tip! Als je om een of andere speciale reden het schokkende effect dat je ziet wanneer je verkeerde login gegevens invult tijdens het inloggen op je WordPress website niet fijn vindt dan hebben wij hier de code om dit te verwijderen.

WordPress schokkende effectKopieer onderstaande code en plak deze in het functions.php bestand en je zult nooit, maar dan ook nooit, meer last hebben van het schokkende effect :-)!

function wps_login_error() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'wps_login_error');

Zo, nu heb je daar in ieder geval geen last meer van! Bekijk hier meer WordPress code tips.

 

Theme Check; Een essentiële plugin voor themeontwikkelaars

Het maken van een theme voor WordPress is in wezen een eenvoudig proces. Op basis van een eerste idee en wat schetsen begin je aan een mockup, die je vervolgens weer omzet naar code, met ruimte voor de gewenste functionaliteit en de juiste look.

En als je dit theme maakt als custom theme voor een enkele website, dan eindigt het hier. Natuurlijk, je moet nog testen op de site, en waar nodig wat tweaken, maar dat is allemaal redelijk overzichtelijk. Je hoeft slechts te voldoen aan de wensen van een enkele klant.

Op het moment dat je dit theme wilt aanbieden voor heel veel gebruikers van WordPress, wordt het proces een beetje complexer. Zeker wanneer je het theme via de WordPress theme-directory wilt aanbieden. Dan kom je ineens in aanraking met de regels van WordPress omtrent de “Theme Review”. Deze regels zijn te vinden in de WP codex, en aan deze regels wordt het theme getoetst als de ontwikkelaar het aanbied voor opname in de theme directory.

Deze regels zijn zeker van nut, maar het is nogal een arbeidsintensief klusje om deze regels door te werken en te controleren of het theme waar je aan werkt hier ook aan voldoet.

WordPress theme check plugin voor het checken van je thema Verder lezen

Hoe maak je een fantastische persoonlijke WordPress inlogpagina?

De standaard loginpagina van WordPress kan wel wat kleur en een nieuw lettertype gebruiken! Natuurlijk is het niet écht nodig om een leuke inlogpagina te hebben, maar het is wel heel erg leuk. Ook kan een stijlvolle inlogpagina helpen als je een professionele pagina voor iemand maakt. Een eerste indruk maakt wel degelijk verschil!

Met wat hulp van CSS en PHP, programma’s waarmee je de opmaak van pagina’s kunt aanpassen, kun je in een handomdraai je eigen inlogpagina opfleuren. In deze handleiding zal ik jullie uitleggen hoe dat moet. Hierbij gebruik ik een WPMU DEV voorbeeld.

 persoonlijke WordPress inlogpagina Verder lezen

Tweets, YouTube video’s en nog veel meer toevoegen in je WordPress text widget

Tweets, YouTube video's en nog veel meer toevoegen in je WordPress text widgetGebruik je regelmatig Tweets, YouTube filmpjes en ander materiaal om je blogposts te verduidelijken en/of interessanter te maken? Dan hebben we een handig trucje voor je.

Alles automatisch embedden in je WordPress text widget

Twitter, YouTube, Flickr en Vimeo zijn zo ingesteld dat wanneer je de URL van een filmpje of tweet in je WordPress editor zet, de media automatisch embedded wordt. Dat werkt helaas niet wanneer je dit in een tekst widget probeert. Erg frustrerend! Maar… er is een oplossing voor! En het is nog hartstikke simpel ook.

Ga in de admin naar Appearance > Editor > Theme Functions – functions.php en zet het onderstaande stukje code in het bestand:

add_filter( 'widget_text', array( $wp_embed, 'run_shortcode' ), 8 ); add_filter( 'widget_text', array( $wp_embed, 'autoembed'), 8 );

Vergeet niet te saven. Nu kun je gewoon YouTube video’s en andere dingen toevoegen in je WordPress text widget. Makkelijker wordt het niet!