Maak je eigen shortcode in WordPress

Vandaag een interessant artikel voor iedereen die met een simpele shortcode bijvoorbeeld een succesbox of waarschuwingsbox wilt oproepen. Om een shortcode te maken moet je wel met codes kunnen omgaan. In deze tutorial gaan wij een succesbox en waarschuwingsbox maken die je kunt oproepen met een shortcode.

Shortcode toevoegen aan functions.php

Eerst moeten we de functie oproepen. Dit moet je doen in functions.php. Maak je gebruik van een Child Theme, maak dan in de map van je Child Theme een nieuw php-bestand aan met de naam fuctions.php. Hier kun je dan gewoon de code invoegen en zal hij zelf de overige code van functions.php opzoeken van je basis-theme. Je kunt meer over Child Themes lezen in dit artikel.

Zet het volgende in functions.php:

Deze code roept de div class “succesbox” op als je [succesbox] gebruikt in een bericht of pagina.

Succesbox stylen in style.css

Nu kun je deze class eenvoudig stylen in style.css. Dit kun je het beste doen in de style.css van een Child Theme zodat je styling niet verdwijnt bij een update van jouw theme.

Voor de succesbox gebruiken wij de volgende code:

.succesbox {
    border: 1px solid #779457;
    background: #CBFF94;
    font-family:Helvetica,Verdana,Arial;
    font-size: 13px;
    line-height: 24px;
    padding: 10px 10px 10px 10px;
    margin-bottom: 20px;
    width: 90%;   
}

Als je dit opslaat zul je het volgende zien als je “[succesbox]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit ornare congue.[/succesbox]” intypt in een bericht of pagina.

Deze codes kun je nu voor veel verschillende boxen gebruiken. In dit artikel maken we ook  nog een waarschuwingsbox.

Variaties maken op de succesbox

Als eerst voegen we de volgende code in functions.php. Je ziet dat ik alleen de “succesbox” heb veranderd heb in “waarschuwingsbox”. Dit kun je dus ook veranderen in bijvoorbeeld “errorbox” of “tipbox”.

Nu wordt de div class “waarschuwingsbox” opgeroepen als je [waarschuwingsbox] gebruikt in berichten en pagina’s. Nu hoeft alleen maar de class te stylen en je kunt [waarschuwingsbox] gebruiken.

.waarschuwingsbox{
    border: 1px solid #9C5C09;
    background: #FFC375;
    font-family:Helvetica,Verdana,Arial;
    font-size: 13px;
    line-height: 24px;
    padding: 10px 10px 10px 10px;
    margin-bottom: 20px;
    width: 90%;   
}

Er is evenals de code voor functions.php weinig verschil met de css code voor de succesbox. Je ziet dat de code nu opent met .waarschuwingsbox in plaats van .succesbox en dat de kleur codes (bijvoorbeeld: #FF0000) zijn veranderd. Bij succesbox waren deze kleurcodes voor een groene kleur, hier zijn deze kleurcodes oranje. Jouw gewenste kleurcodes kun je vinden op deze website.

De waarschuwingsboxziet er zo uit:

Je kunt oneindig veel variërende boxen maken. Denk bijvoorbeeld aan een infobox, notitiebox, errorbox, downloadbox, et cetera. Vond je dit een interessante tutorial en wil je meer tutorials over shortcodes? Plaats een reactie met je mening en subscribe voor onze nieuwsbrief om geen posts te missen.