Custom fields voor WordPress Ontwikkelaars

Custom fields voor WordPress Ontwikkelaars is voor wie iets extra’s wilt bieden, dit kan zijn voor plugin en theme ontwikkelaars. Vooral als je werkt met custom post types is het zeker een zeer belangrijk onderdeel. Voor WordPress website ontwikkelaars zou dit bij de basiskennis moeten horen. Geen gedoe met plugins die de website alleen maar langzamer en minder veilig maken.

Hier wil ik het hebben over het maken van custom fields voor WordPress Ontwikkelaars voor post, pages en custom post types. Ben jij de gene die direct roept “Gebruik de ACF Plugin” en je wilt niet weten wat de juiste manier is voor WordPress website ontwikkeling. Lees dan niet verder want dan is dit artikel niet voor jou bedoeld.

Voor de mensen die zich niet echt met website ontwikkeling bezighouden maar wel geïnteresseerd zijn om dit toe te passen kan de eenvoudige manier gebruiken. Een eenvoudige manier kan men bekijken in mijn artikel Extra velden voor WordPress.

Het komt regelmatig voor dat je voor je artikelen, pagina’s of custom post types extra velden nodig hebt. Dit kan zijn voor theme of plugin ontwikkeling of omdat je gewoon een extra veld nodig hebt. Voor dit artikel is een basis kennis van WordPress theme en plugin ontwikkeling vereist.

We zullen de volgende onderdelen bespreken:

Gebruik de links om direct naar het ontwerp te gaan.

Met een WordPress Onderhoudspakket kunt u zorgeloos ondernemen.

WordPress Onderhoudspakket

Wat zijn Custom fields voor WordPress Ontwikkelaars?

De custom fields zijn extra velden voor je artikelen, pagina’s of custom post types om extra informatie op te slaan bij je artikelen. Deze informatie wordt opgeslagen als meta-data en kan je dus makkelijk ophalen in je thema of child-theme. Deze gegevens kunnen gebruikt worden om apart getoond te worden in een template of iets dergelijks.

Neem bijvoorbeeld een reisblog waar je voor elk artikel iets extra’s wilt toevoegen zoals type reis, bestemming, land, continent of wat dan ook. En deze informatie wil je op een aparte plek iedere keer op dezelfde manier tonen. Hier zou je de custom fields voor kunnen gebruiken.

Zo zijn er heel veel mogelijkheden te bedenken om extra velden te gebruiken voor WordPress.

Custom fields voor WordPress Ontwikkelaars | WordPress website ontwikkeling

Het kan ook zijn dat je in het thema gebruik maakt van een custom post type. Dit kan uiteraard van alles zijn. Zelf gebruik ik in het thema van deze website meerdere custom post types, bijvoorbeeld vacatures, partners, songteksten, project, quotes, referenties, team member en testimonials. Allemaal hebben ze hun eigen custom fields en templates.

Custom fields voor WordPress Ontwikkelaars

Nu is het tijd om de code te behandelen. Beste is dit in een apart bestand te plaatsen maar het kan ook in functions.php geplaatst worden. Als je het in een apart bestand plaatst kan je het alleen aanroepen voor admin zodat het geen belasting is voor de website voor page speed en web vitals. Niemand wil tegenwoordig nog een langzame WordPress website.

Het opzetten van extra velden voor WordPress gaat in 3 stappen en deze zijn als volgt.

Gebruik de links om direct naar het ontwerp te gaan.

Opzetten van een blok als basis en om de extra velden in te plaatsen

Met deze code bepalen we waar het blok moet komen te staan en of het is voor pages, posts of een custom post type. Dit doen we met de add_meta_box() functie van WordPress.


<?php 
// Create Meta boxes posts
function clw_post_add_meta_boxes($post){
    add_meta_box('posts_meta_box', __('Demo Custom Fields', 'text-domain'), 'clw_post_build_meta_box', 'post', 'normal', 'high');
}
add_action('add_meta_boxes_post', 'clw_post_add_meta_boxes'); ?>

In de bovenste code is “posts_meta_box” de ID van het blok.
“Demo Custom Fields” is de titel van het blok. Verander het text-domain voor het text-domain van je thema.
“clw_post_build_meta_box” is de functie om de custom fields te plaatsen. Deze wordt in de volgende code gemaakt waar we de custom fields zullen aanmaken.
“post” is waar de custom fields voor zijn. Dit kan zijn post, page of een custom post type van je thema. Er zijn nog andere mogelijkheden die we hier niet zullen bespreken. Hier maken we custom fields voor de normale posts aan.
“normal” is de plek op de pagina in de admin. Normal is onder de editor en “side” is voor sidebar rechts. Er zijn meerdere mogelijk maar die zullen we hier niet behandelen.
“high” is de prioriteit, dat kan zijn high, core, default of low. High is zo hoog mogelijk en low is helemaal onderin.

Aanmaken van de extra velden

Nu wordt het tijd om de custom fields aan te maken. Hier kunnen eigenlijk alle soorten velden gebruikt worden als in HTML bekend zijn. Hier behandelen we enkele belangrijke velden.
Het voordeel is dat wij hier puur HTML kunnen gebruiken waardoor de mogelijkheden eindeloos zijn. Hier behandelen we alleen de basis mogelijkheden en enkele die typische zijn voor WordPress. Het is ook mogelijk om een color picker of date picker toe te voegen maar die zullen we hier niet behandelen.


<?php 
// Meta fields post
function clw_post_build_meta_box($post){
    // Get WP_nonce for security
    wp_nonce_field(basename(__FILE__), 'clw_post_meta_box_nonce');
 
    // Get Meta data if available
    $current_clw_acf_text = get_post_meta($post->ID, 'clw_acf_text', true);
    $current_clw_acf_textarea = get_post_meta($post->ID, 'clw_acf_textarea', true);
    $current_clw_acf_editor = get_post_meta($post->ID, 'clw_acf_editor', true);
    $current_clw_acf_number = get_post_meta($post->ID, 'clw_acf_number', true);
    $current_clw_acf_checkbox = get_post_meta($post->ID, 'clw_acf_checkbox', true);
    $current_clw_acf_radio = get_post_meta($post->ID, 'clw_acf_radio', true);
    $current_clw_acf_select = get_post_meta($post->ID, 'clw_acf_select', true);
    $current_clw_acf_image = get_post_meta($post->ID, 'clw_acf_image', true); ?>
 
    <?php // Create custom field text  ?>
    <p class="post-attributes-label-wrapper"><label class="post-attributes-label" for="clw_acf_text"><?php _e('Custom Field Text', 'text-domain'); ?></label></p>
    <input type="text" name="clw_acf_text" value="<?php echo $current_clw_acf_text; ?>" />
 
    <?php // Create custom field textarea ?>
    <p class="post-attributes-label-wrapper"><label class="post-attributes-label" for="clw_acf_textarea"><?php _e('Custom Field Textarea', 'text-domain'); ?></label></p>
    <textarea type="textarea" name="clw_acf_textarea" style="width:100%;"><?php echo $current_clw_acf_textarea; ?></textarea>
 
    <?php // Create custom field WP_editor ?>
    <p class="post-attributes-label-wrapper"><label class="post-attributes-label" for="clw_acf_editor"><?php _e('Custom Field WP_editor', 'text-domain'); ?></label></p>
    <?php wp_editor($current_clw_acf_editor, 'clw_acf_editor'); ?>
 
    <?php // Create custom field number ?>
    <p class="post-attributes-label-wrapper"><label class="post-attributes-label" for="clw_acf_number"><?php _e('Custom Field Number', 'text-domain'); ?></label></p>
    <input type="number" name="clw_acf_number" value="<?php echo $current_clw_acf_number; ?>" />
 
    <?php // Create custom field checkbox ?>
    <p class="post-attributes-label-wrapper"><label class="post-attributes-label" for="clw_acf_checkbox"><input id="clw_acf_checkbox" type="checkbox" name="clw_acf_checkbox" value="true"<?php if($current_clw_acf_checkbox == "true") {echo ' checked';} ?>> <?php _e('Custom Field Checkbox', 'text-domain'); ?></label></p>
 
    <?php // Create custom field radio ?>
    <p class="post-attributes-label-wrapper"><label class="post-attributes-label" for="job_expire"><?php _e('Custom Field Radio', 'text-domain'); ?></label></p>
    <label for="radio-a"><input id="radio-a" type="radio" name="clw_acf_radio" value="a"<?php if($current_clw_acf_radio == "a") {echo ' checked';} ?>> A</label><br>
    <label for="radio-b"><input id="radio-b" type="radio" name="clw_acf_radio" value="b"<?php if($current_clw_acf_radio == "b") {echo ' checked';} ?>> B</label><br>
    <label for="radio-c"><input id="radio-c" type="radio" name="clw_acf_radio" value="c"<?php if($current_clw_acf_radio == "c") {echo ' checked';} ?>> C</label><br>
 
    <?php // Create custom field select ?>
    <p class="post-attributes-label-wrapper"><label class="post-attributes-label" for="clw_acf_select"><?php _e('Custom Field Select', 'text-domain'); ?></label></p>
    <select name="clw_acf_select" id="clw_acf_select">
        <option value="1"<?php if($current_clw_acf_select == "1") {echo ' selected=""';} ?>>1</option>
        <option value="2"<?php if($current_clw_acf_select == "2") {echo ' selected=""';} ?>>2</option>
        <option value="3"<?php if($current_clw_acf_select == "3") {echo ' selected=""';} ?>>3</option>
    </select>
 
    <?php // Create custom field upload image ?>
    <p class="post-attributes-label-wrapper"><label class="post-attributes-label" for="page_project"><?php _e('Custom Field Image Upload', 'text-domain'); ?></label></p>
    <img style="width:200px;height:auto;border: 1px solid #ddd;box-shadow: inset 0 1px 2px" id="clw-page-image-preview" src="<?php if(isset($current_clw_acf_image)){ echo $current_clw_acf_image;} ?>"/><br>
    <input type="hidden" name="clw_acf_image" id="clw-page-image" class="clw-page-image" value="<?php if(isset($current_clw_acf_image)){ echo $current_clw_acf_image;} ?>" /> <input type="button" id="clw-image-upload" class="button" value="<?php _e('Upload image', 'text-domain'); ?>"/>
<script>jQuery('#clw-image-upload').click(function() {
    var send_attachment_bkp = wp.media.editor.send.attachment;
    wp.media.editor.send.attachment = function(props, attachment) {
        jQuery('#clw-page-image').val(attachment.url);
        jQuery('#clw-page-image-preview').attr('src',attachment.url);
        wp.media.editor.send.attachment = send_attachment_bkp;
    }
    wp.media.editor.open();
    return false;
});
</script>
<?php } ?>

Wie een beetje verstand heeft van HTML en het aanmaken van formulier velden kan de extra velden makkelijk aanpassen voor e-mail, url en andere velden. De editor is speciaal voor WordPress en het veld om afbeeldingen te uploaden kan ook erg handig zijn voor theme en plugin ontwikkeling.

Let op dat de “name” van de velden net als met normale formulieren gebruikt zullen worden voor het opslaan van de waarden.

Vraag vrijblijvende een offerte aan.

Offert Aanvragen

Opslaan van de waarden van de extra velden

Als we de velden hebben aangemaakt dan zijn we helaas nog niet klaar. Deze velden zullen uiteindelijk ook opgeslagen moeten worden in de database zodat we deze op de website kunnen gebruiken.
Het opslaan van de waarden doen we met de volgende code.


<?php 
// Save Meta post
function clw_post_save_meta_boxes_data($post_id){
    // Check for WP_nonce for security
    if(!isset($_POST['clw_post_meta_box_nonce']) || !wp_verify_nonce($_POST['clw_post_meta_box_nonce'], basename(__FILE__))){return;}
    if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE){return;}
 
    // Check if editor has the rights the edit the post.
    if(!current_user_can('edit_post', $post_id)){return;}
 
    // Saving the custom field values to the database
    // Save custom field text
    if(isset($_REQUEST['clw_acf_text'])) {update_post_meta($post_id, 'clw_acf_text', sanitize_text_field($_POST['clw_acf_text']));}
    // Save custom field textarea
    if(isset($_REQUEST['clw_acf_textarea'])) {update_post_meta($post_id, 'clw_acf_textarea', sanitize_text_field($_POST['clw_acf_textarea']));}
    // Save custom field WP_editor
    if(isset($_REQUEST['clw_acf_editor'])) {update_post_meta($post_id, 'clw_acf_editor', $_POST['clw_acf_editor']);}
    // Save custom field number
    if(isset($_REQUEST['clw_acf_number'])) {update_post_meta($post_id, 'clw_acf_number', sanitize_text_field($_POST['clw_acf_number']));}
    // Save custom field checkbox
    if(isset($_REQUEST['clw_acf_checkbox'])) {update_post_meta($post_id, 'clw_acf_checkbox', 'true');} else {update_post_meta($post_id, 'clw_acf_checkbox', '');}
    // Save custom field radio
    if(isset($_REQUEST['clw_acf_radio'])) {update_post_meta($post_id, 'clw_acf_radio', sanitize_text_field($_POST['clw_acf_radio']));}
    // Save custom field select
    if(isset($_REQUEST['clw_acf_select'])) {update_post_meta($post_id, 'clw_acf_select', sanitize_text_field($_POST['clw_acf_select']));}
    // Save custom field upload image
    if(isset($_REQUEST['clw_acf_image'])) {update_post_meta($post_id, 'clw_acf_image', $_POST['clw_acf_image']);}
}
add_action('save_post_post', 'clw_post_save_meta_boxes_data', 10, 2); ?>

Hier is belangrijk dat gelet wordt op hoe de informatie wordt opgeslagen. Voor waar het nodig is kan eventueel ook een validaties toegepast worden. Maar belangrijk is dat men begrijpt dat “name” uit de velden hier gebruikt wordt om de waarden op te slaan. Het is mogelijk hier ook een nieuw ID te gebruiken als men dat wenst. Dit zal dan later gebruikt moeten worden om de waarden op te halen uit de database. Hou hier dan ook rekening mee.

Als we dit allemaal opslaan in het thema dan zal het er uit zien als in de volgende afbeelding. Uiteraard afhankelijk van de velden die je gebruikt of niet.

Custom fields voor WordPress Ontwikkelaars | WordPress website ontwikkeling

Gebruik van Custom fields voor WordPress Ontwikkelaars

Het is moeilijk uit te leggen waar de waarden gebruikt kunnen worden en hoe. Dit is namelijk geheel afhankelijk van het thema dat je gebruikt, voor welke custom post type het wordt gebruikt en wat men met deze waardes wilt doen. Dit is geheel aan de creativiteit van de ontwikkelaar.

Wel kan ik een voorbeeld code geven om de informatie op te halen en eventueel te tonen op de website. Neem bijvoorbeeld de volgende code.


<?php // CLW Get Meta Data
$clw_extra_veld = get_post_meta($post->ID, 'clw_extra_veld', true);
if($clw_extra_veld) {
    echo 'nieuw veld is: ' . $clw_extra_veld;
}
?>

Deze code kan men geheel aanpassen naar wens en plaatsen waar men wilt. Men zou het zelfs in de sidebar kunnen gebruiken of tonen in de header of footer van de website. Dit laat ik geheel over aan de ontwikkelaar.

Het zal nu duidelijk zijn waarom deze custom fields voor WordPress Ontwikkelaars zijn bedoeld en men kan zich voorstellen voor welke doeleinden het gebruikt kan worden. De mogelijkheden zijn eindeloos.

Als voorbeeld kan men deze pagina nemen. In de header wordt een afbeelding getoond dat bij elke pagina of post apart bepaald/geupload kan worden. Als men wil kan men ook een omschrijving onder de titel plaatsen. Dit is gedaan met custom fields.

Hopelijk heb ik hiermee een goede basis gegeven voor het maken van interessante en handige custom post types.

Er zijn nog geen reacties. Wees de eerste..!!

Reageer

E-mailadres wordt niet gepubliceerd.
Verplichte velden zijn gemarkeerd met *

*
*
*