Zelf buttons maken in WordPress met een HTML Class en CSS

Je kan zelf buttons maken die los staan van een WordPress thema of plugin. Bekijk in deze handleiding hoe je buttons maakt voor je WordPress website.

Je kan zelf buttons maken die los staan van een WordPress thema of plugin. Zodoende ben je heel flexibel. Dit is cruciaal voor de strategie voor je website op lange termijn. Lees dit artikel als je hierover meer wilt weten:
Strategie en eisen voor je WordPress thema

Hoe maak je zelf buttons voor je WordPress website?

In je CSS van je thema zet je de code voor een button. In de CSS zet je ook zogenaamde classes. Een ‘class’ is een variabele of stijl voor je buttons.
Hoe de CSS eruit ziet leer je tijdens één van de cursussen waarbij we uitgebreid ingaan op het ontwerp van je website:

Buttons maken met html in WordPress

Een HTML-button ziet er standaard lelijk uit:



In HTML ziet dit er zo uit:
<button>Dit is een standaard button in HTML</button>

Door zelf een ‘class’ toe te voegen kun je perfecte buttons maken. Hieronder leg ik uit hoe je dit doet. Tijdens de WordPress cursus krijg je een template uitgereikt waarbij je alleen maar hoeft te kopieren en plakken. Dit werkt heel eenvoudig. Je hoeft allen maar ‘class=”jouw eigen stijl”‘ toe te voegen binnen de button code. Je kan de naam van de class uiteraard zelf aanpassen. Dit ziet er dan zo uit:

<button class="button jouw eigen stijl">Dit is button in je eigen stijl</button>

Je button kan er dan zo uitzien:

Voorbeelden van buttons met een class

In de buttons staan de ‘classes’ vermeld. Je kan de HTML kopieren en hoeft vervolgens alleen de naam van de class in de button te veranderen.

Variabele grootte

html van de bovenste button:


<a href="https://www.cursuswp.com/bootcamp"><button class="button bt-mini">button bt-mini</button></a>

buttons:

Variabele soort

html van de bovenste button:


<a href="https://www.cursuswp.com/bootcamp"><button class="button bt-basis">button bt-basis</button></a>

buttons:

Combinaties met HTML en CSS

Vervolgens kun je eenvoudig combinaties maken:

Buttons centreren

Vervolgens kun je ook eenvoudig een button centreren. Je kan de button in je editor centreren of de volgende code toevoegen:

<p style="text-align: center;">HIER KOMT DE BUTTON DIE AL GEMAAKT HEBT</p>


De HTML van de bovenste button ziet de dan alsvolgt uit:
<p style="text-align: center;"><a href="https://www.cursuswp.com/bootcamp"><button class="button bt-mini bt-basis">button bt-mini bt-basis</button></a></p>

De laatste stap:

CSS in je thema plaatsen

Alleen de codes in je HTML plaatsen werkt niet. Je moet bijbehorende CSS ook in je thema plaatsen. De HTML en CSS praten dus met elkaar. De bijbehorende CSS die je in je thema moet plaatsen vind je in de Login van je designcursus: