Associate a Metabox to a custom page template in wordpress

I’m making a Template Portfolio for wordpress , I’m having some difficulty with the addition of a Metabox in the backend of a custom page .
I have a page ” About Me” with the progressbar to show the skills , and I would add in bakend a Metabox to change the percentage of the progressbar , now I could see the Metabox on the backend of all pages and through jquery i hide it if the address of the page is not as expected , there is any way to make the display more generic and associate the Metabox to a custom page template ?

this is the code that i have in my function.php, it works well , but I would make it less specific

<?php
add_action('add_meta_boxes', 'box_percentuale');

function box_percentuale() {

            add_meta_box(
                'percentuale',
                'Mdifica progress bar',
                'box_percentuale_style',
                'page'
            );

}


function box_percentuale_style($post) {
    ?>

        <div>
            <h4>Percentuale skills</h4>
            <label>HTML</label><input type="number" name="html" value="<?php echo get_post_meta($post->ID, 'html', true); ?>">
            <label>CSS</label><input type="number" name="css" value="<?php echo get_post_meta($post->ID, 'css', true); ?>">
            <label>JQUERY</label><input type="number" name="jquery" value="<?php echo get_post_meta($post->ID, 'jquery', true); ?>">
            <label>WORDPRESS</label><input type="number" name="wordpress" value="<?php echo get_post_meta($post->ID, 'wordpress', true); ?>">
            <label>ILLUSTRATOR</label><input type="number" name="illustrator" value="<?php echo get_post_meta($post->ID, 'illustrator', true); ?>">
            <label>PHOTOSHOP</label><input type="number" name="photoshop" value="<?php echo get_post_meta($post->ID, 'photoshop', true); ?>">
        </div>

        <script>

            jQuery(document).ready(function($) {
                var url = window.location.href;
                var urlPagina = 'http://localhost/wordpress/wp-admin/post.php?post=34&action=edit';
                $('#percentuale').css('display', 'none');
                if (url == urlPagina) {
                   $('#percentuale').show();
                };

            });

        </script>

    <?php
}

add_action('save_post', 'slava_percentuale');

function slava_percentuale($post_id)

{

    if(isset($_POST['yiw_progetti_link'])) {

        update_post_meta($post_id, 'html', intval($_POST['html']));

        update_post_meta($post_id, 'css', intval($_POST['css']));

        update_post_meta($post_id, 'jquery', intval($_POST['jquery']));

        update_post_meta($post_id, 'wordpress', intval($_POST['wordpress']));

        update_post_meta($post_id, 'illustrator', intval($_POST['illustrator']));

        update_post_meta($post_id, 'photoshop', intval($_POST['photoshop']));



    }

}

?>

Related posts

Leave a Reply

1 comment

  1. You can achieve that using something like:

    function box_percentuale() {
        global $post;
    
        // This will check if you are actually on the page's editing screen
        if ( ! empty( $post ) ) {
    
            // This will get the page template of the page you are editing
            $page_template = get_post_meta( $post->ID, '_wp_page_template', true );
    
            // Check if you are using the template you wish to add meta box to
            // Simply change "about.php" to the name of your template
            // Note: if the template is in a subdirectory, you have to add it as well
            // Example: 'page-templates/about.php'
            if ( $page_template == 'about.php' ) {
                add_meta_box(
                    'percentuale',
                    'Mdifica progress bar',
                    'box_percentuale_style',
                    'page'
                );
            }
        }
    }
    add_action('add_meta_boxes', 'box_percentuale');
    

    Quick note: if you go to a page with a default page template and select “About” from the templates dropdown, you’ll have to first save your page in order for the meta box to appear (ie. it will not appear the moment you change the dropdown). I don’t believe this will be an issue in your case, but I thought it’s worth mentioning.