Assign a Class to the Input Text Field of a Custom Metabox

  • On the past site that I’ve worked on I used the Text tab in the Edit Page screen to insert HTML elements, and to add classes and ids to these elements so that I could attach specific CSS styles in the theme’s style.css file. For example, I would put the following into the Text tab of the Edit Page screen:

    <p class=”myCustomParagraph”>Here is my sentence.</p>

    … and then add this to the style.css file of my theme:

    .myCustomParagraph {font-size:10px;}

    The problem with this is that the client would often go to this Text tab to edit the sentence, and accidentally delete some of the HTML.

    I’d like to have future clients be able to go to the Edit Page screen, and be presented with a custom metabox that would allow them to type the words “Here is my sentence” into the metabox’s text field. This way they could type in whatever words they wanted without having to see (or accidentally delete) any of the <p> elements, or class names. But, behind the scenes, whatever they typed in would automatically be assigned to the myCustomParagraph class, and be given a font size of 10px.

    I’ve already set up the custom metabox itself, along with the input field, but I don’t know how to assign a class to the content that would be typed into the input field, so that when I viewed that Page in the browser I’d see the words showing up as 10px in size.

    Your help would be greatly appreciated.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    You add the <p> tags with the class attribute to the user input just before you output the meta data upon retrieval:
    echo('<p class="ten-point">'.get_post_meta( get_the_ID(), 'user_text_field').'</p>');

    Thread Starter alexWP333

    (@alexwp333)

    Thanks. This is my first time setting up a custom metabox, so please bear with me. As a test I tried adding a CSS to change the font color for the output to red.

    In particular, I tried changing this:

    function prfx_meta_callback( $post ) {
    wp_nonce_field( basename( __FILE__ ), 'prfx_nonce' );
    $prfx_stored_meta = get_post_meta( $post->ID );
    ?>

        <label for="meta-text" class="prfx-row-title"><?php _e( 'Example Text Input', 'prfx-textdomain' )?></label>
        <input type="text" name="meta-text" id="meta-text" value="<?php if ( isset ( $prfx_stored_meta['meta-text'] ) ) echo $prfx_stored_meta['meta-text'][0]; ?>" />

    <?php
}

    to this:

    function prfx_meta_callback( $post ) {
    wp_nonce_field( basename( __FILE__ ), 'prfx_nonce' );
    $prfx_stored_meta = get_post_meta( $post->ID );
    ?>

        <label for="meta-text" class="prfx-row-title"><?php _e( 'Example Text Input', 'prfx-textdomain' )?></label>
        <input type="text" name="meta-text" id="meta-text" value="<?php if ( isset ( $prfx_stored_meta['meta-text'] ) ) echo ('<p style="color:red;">'.$prfx_stored_meta['meta-text'][0].'</p>'); ?>" />

    <?php
}

    I’m either putting the code that you sent me in the wrong file altogether, or my syntax is incorrect, because the browser’s not yet displaying the output text in red.

    Thread Starter alexWP333

    (@alexwp333)

    The next thing that I’ve tried was to change the code in my single.php file from this:

    <?php

    // Retrieves the stored value from the database
    $meta_value = get_post_meta( get_the_ID(), 'meta-text', true );

    // Checks and displays the retrieved value
    if( !empty( $meta_value ) ) {
        echo $meta_value;
    }

?>

    to this:

    <?php

    // Retrieves the stored value from the database
    $meta_value = get_post_meta( get_the_ID(), 'meta-text', true );

    // Checks and displays the retrieved value
    if( !empty( $meta_value ) ) {
        echo('<p style="color:red;">'.get_post_meta( get_the_ID(), 'user_text_field').'</p>');
    }

?>

    Now my output text goes to red, which is what I was trying to get to work, but the output itself gives the word “Array” instead of the words that I typed into the input field of the custom metabox.

    Thread Starter alexWP333

    (@alexwp333)

    OK, I saw that I wasn’t being consistent with the parameters that I had entered. So, I took what you sent me, and put in the same parameters that I had started with, and together it worked.

    Many thanks! Couldn’t have done it without your help.

    <?php

    // Retrieves the stored value from the database
    $meta_value = get_post_meta( get_the_ID(), 'meta-text', true );

    // Checks and displays the retrieved value
    if( !empty( $meta_value ) ) {
        echo('<p style="color:red;">'.get_post_meta( get_the_ID(), 'meta-text', true ).'</p>');
    }

?>
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Assign a Class to the Input Text Field of a Custom Metabox’ is closed to new replies.