0

I had someone code a custom theme that I had designed. I need to duplicate one of the templates this person made, give unique class names for the CSS, adjust the CSS as needed, and finally save it as an entirely new template.

What I have done so far:

  • Opened the template that I want to duplicate in Dreamweaver.

  • Changed the template name at the top of the page to the name of the new template.

  • Saved the template under a different name since it will become a new template.

  • Saved the template on the server via FTP to the location where the rest of the templates are.

Here's the problem:

If I create a new page, and select my new template, the custom meta boxes (cmb) doesn't show up like when I select the template I copied my new template from. It only shows the default metabox. Have a look at these screenshots

storage template

testimonial template

Here is the code to the original template (template.storage.php) and my new template. Bare in mind, these templates are exactly the same, I just change the template name. I will later change some classes to add custom styling, but that is not relevant now.

  <?php
/**
Template Name: Storage
**/
?>
<?php get_header(); ?>
<?php $container_background = get_post_meta($post->ID, '_cmb_background-container', true); ?>
<?php

$box_one_heading = get_post_meta($post->ID, '_cmb_storage-box-one-heading', true);
$box_one_content = wpautop(get_post_meta($post->ID, '_cmb_storage-box-one-content', true));

$box_two_heading = get_post_meta($post->ID, '_cmb_storage-box-two-heading', true);
$box_two_content = wpautop(get_post_meta($post->ID, '_cmb_storage-box-two-content', true));
?>

    <div id="container" class="innerpage" style="background: #fff3cb url('<?php echo ($container_background ? $container_background : "".get_stylesheet_directory_uri()."/images/corks.png"); ?>') center bottom no-repeat;">
    <?php fourosix_breadcrumbs(); ?>

        <div id="content" class="linkstable">
            <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
                <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <div style="width:44%; float:left; ">

                    <?php if($box_one_heading && $box_one_content) { ?>
                    <div class="pagebox shadow">
                        <h1 class="widget-title titleleft"><?php echo $box_one_heading; ?></h1>
                        <?php echo $box_one_content; ?>
                    </div>
                    <?php } ?>

                    <?php if($box_two_heading && $box_two_content) { ?>
                    <div class="pagebox shadow" style="margin-top:27px;">
                        <h1 class="widget-title titleleft"><?php echo $box_two_heading; ?></h1>
                        <?php echo $box_two_content; ?>
                    </div>
                    <?php } ?>
</div>

                    <div style="width:48%; float:left;">

                    <div class="pagebox shadow contactbox">
                        <?php the_post_thumbnail(485,320,true); ?>
                    </div>
                    <div class="pagebox shadow contactbox">
                        <?php $beerimage = get_post_meta($post->ID, 'BeerImage', true); ?>

                        <!--<img src="<?php echo $beerimage; ?>" class="wp-post-image"/>-->
                    </div>

</div>
                    <?php if ( is_user_logged_in() ) : ?>
                    <footer>
                        <?php edit_post_link( __( 'edit' ), '<span class="edit-link">', '</span>' ); ?>
                    </footer>
                    <?php endif; ?>
                </article><!-- end post-->
            <?php endwhile; ?>
            <?php else : ?>
                <article class="post">
                    <h1>page not found</h1>
                </article>
            <?php endif; ?>
        </div><!-- end content -->


    </div><!-- end container -->


<?php get_footer(); ?>

</body>
</html>

Here is the head for the duplicated template:

<?php
/**
Template Name: Testimonials
**/
?>

I also include these 2 pieces of code as this might be of help

Code from my "enable.php"

  <?php
/**
 * Include and setup custom metaboxes and fields.
 *
 * @category YourThemeOrPlugin
 * @package  Metaboxes
 * @license  http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 * @link     https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress
 */

add_filter( 'cmb_meta_boxes', 'wsod_metaboxes' );
/**
 * Define the metabox and field configurations.
 *
 * @param  array $meta_boxes
 * @return array
 */
function wsod_metaboxes( array $meta_boxes ) {

    // Start with an underscore to hide fields from custom fields list
    $prefix = '_cmb_';

    $meta_boxes[] = array(
        'id' => 'general-settings',
        'title' => 'General Settings',
        'pages' => array('page'),
        'context' => 'normal',
        'priority' => 'high',
        'show_names' => 'true',
        'fields' => array(
            array(
                'name' => 'Background Container',
                'desc' => 'Please upload the image you would like to use as background for the container of this page',
                'id' => $prefix . 'background-container',
                'type' => 'file'    
            )
        )   
    );

    $meta_boxes[] = array(
        'id' => 'page-storage',
        'title' => 'Storage Content',
        'pages' => array('page'),
        'context' => 'normal',
        'priority' => 'high',
        'show_names' => 'true',
        'fields' => array(
            array(
                'name' => 'Box #1 Heading',
                'desc' => 'Please input the heading of Box#1 here',
                'id' => $prefix . 'storage-box-one-heading',
                'type' => 'text_medium'
            ),
            array(
                'name' => 'Box #1 Content',
                'desc' => 'Please input the content of Box#1 here',
                'id' => $prefix . 'storage-box-one-content',
                'type' => 'wysiwyg',
                'options' => array( 'textarea_rows' => 6, )
            ),
            array(
                'name' => 'Box #2 Heading',
                'desc' => 'Please input the heading of Box#2 here',
                'id' => $prefix . 'storage-box-two-heading',
                'type' => 'text_medium'
            ),
            array(
                'name' => 'Box #2 Content',
                'desc' => 'Please input the content of Box#2 here',
                'id' => $prefix . 'storage-box-two-content',
                'type' => 'wysiwyg',
                'options' => array( 'textarea_rows' => 6, )
            )
        )
    );


    $meta_boxes[] = array(
        'id' => 'page-services',
        'title' => 'Services Content',
        'pages' => array('page'),
        'context' => 'normal',
        'priority' => 'high',
        'show_names' => 'true',
        'fields' => array(
            array(
                'name' => 'Box #1 Heading',
                'desc' => 'Please input the heading of Box#1 here',
                'id' => $prefix . 'services-box-one-heading',
                'type' => 'text_medium'
            ),
            array(
                'name' => 'Box #1 Content',
                'desc' => 'Please input the text content of Box#1 here',
                'id' => $prefix . 'services-box-one-content',
                'type' => 'wysiwyg',
                'options' => array( 'textarea_rows' => 6, ),
            ),
            array(
                'name' => 'Box #2 Heading',
                'desc' => 'Please input the heading of Box#2 here',
                'id' => $prefix . 'services-box-two-heading',
                'type' => 'text_medium'
            ),
            array(
                'name' => 'Box#2 Content',
                'desc' => 'Please input the text content of Box#2 here',
                'id' => $prefix . 'services-box-two-content',
                'type' => 'wysiwyg',
                'options' => array( 'textarea_rows' => 6, ),
            ),
            array(
                'name' => 'Box #3 Heading',
                'desc' => 'Please input the heading of Box#3 here',
                'id' => $prefix . 'services-box-three-heading',
                'type' => 'text_medium'
            ),
            array(
                'name' => 'Box#3 Content',
                'desc' => 'Please input the text content of Box#3 here',
                'id' => $prefix . 'services-box-three-content',
                'type' => 'wysiwyg',
                'options' => array( 'textarea_rows' => 6, ),
            ),
            array(
                'name' => 'Box #4 Heading',
                'desc' => 'Please input the heading of Box#4 here',
                'id' => $prefix . 'services-box-four-heading',
                'type' => 'text_medium'
            ),
            array(
                'name' => 'Box#4 Content',
                'desc' => 'Please input the text content of Box#4 here',
                'id' => $prefix . 'services-box-four-content',
                'type' => 'wysiwyg',
                'options' => array( 'textarea_rows' => 6, ),
            ),

        )

    ); 

// Rest of code

return $meta_boxes;
}

add_action( 'init', 'cmb_initialize_cmb_meta_boxes', 9999 );
/**
 * Initialize the metabox class.
 */
function cmb_initialize_cmb_meta_boxes() {

    if ( ! class_exists( 'cmb_Meta_Box' ) )
        require_once 'init.php';

}

Code from my "script-metabox-template-toggle.js"

jQuery(document).ready(function() {
    // in this functions hide all the custom metaboxes that are used
    function hide_all_custom_metaboxes() {
        jQuery('#page-facilities').hide();
        jQuery('#page-services').hide();
        jQuery('#page-storage').hide();
    }

    function show_custom_metabox(meta_id) {
        var selector = "#" + meta_id;
        if(jQuery(selector).length)
            jQuery(selector).show();
    }

    function toggle_wp_editor(current_metabox) {
        jQuery('#postdivrich').show();
        switch(current_metabox) {
            case 'facility':
                //jQuery('#postdivrich').css("display","none");
                show_custom_metabox("page-facilities");
            break;
            case 'services':
                jQuery('#postdivrich').css("display","none");
                show_custom_metabox("page-services");
            break;
            case 'storage':
                jQuery('#postdivrich').css("display","none");
                show_custom_metabox("page-storage");
            break;

        }
    }

    function get_template_html_id() {
        current_metabox = jQuery('#page_template option:selected').val();
        current_metabox = current_metabox.replace('template.','');
        current_metabox = current_metabox.replace('.php','');
        /*if(current_metabox == "default") {
            current_metabox = "content-default";
        }*/
        return current_metabox;
    }

    hide_all_custom_metaboxes();

    var current_metabox = get_template_html_id();

    show_custom_metabox(current_metabox);
    toggle_wp_editor(current_metabox);

    jQuery('#page_template').bind("change", function() {
        hide_all_custom_metaboxes();
        show_custom_metabox(get_template_html_id());
        toggle_wp_editor(get_template_html_id());
    });

});

Any suggestions on how to make my custom template work?

  • 1
    Please add your code to your question. – Pieter Goosen Mar 16 '14 at 8:51
  • 1
    We need to see the code, likely of both files, else your question will most certainly go unanswered. – Adam Mar 16 '14 at 8:53
  • @PieterGoosen I have added the code for both files for you. Please let me know if you need to see anything else. Thanks for taking a look for me. – popflier Mar 16 '14 at 9:07
  • What I want to do is create a second template that looks exactly like the storage template (first set of code that I posted.) This storage page loads some custom post type boxes that are roughly 50% of the total width of the page. (see here to see what the boxes look like on the left: winestorageofdenver.com/wine-and-beer-storage) I want the duplicated template to load the custom post type boxes the FULL width of the page. All of the other CSS would remain exactly the same. I want to save a new template with these boxes the full width of the page. – popflier Mar 16 '14 at 9:25
  • Please see the images that I just uploaded and added to my question. It will show you the problem that I'm having ore clearly. Thanks! – popflier Mar 16 '14 at 19:10
0

Your theme uses metaboxes that are specific to certain page templates, and are also hidden as such in other page templates (done by jquery), that is why your new page template won't work as expected.

Here is how to solve your problem.:

Call your testimonials template "template.testimonials.php". As you have already copied the code from the storage template, and change the template name accordingly, open the template and change all instances of 'storage ' to 'testimonials'. This will prevent later issues with the metaboxes.

In your "enable.php" on lines 40 to 75 you have the following code

$meta_boxes[] = array(
    'id' => 'page-storage',
    'title' => 'Storage Content',
    'pages' => array('page'),
    'context' => 'normal',
    'priority' => 'high',
    'show_names' => 'true',
    'fields' => array(
        array(
            'name' => 'Box #1 Heading',
            'desc' => 'Please input the heading of Box#1 here',
            'id' => $prefix . 'storage-box-one-heading',
            'type' => 'text_medium'
        ),
        array(
            'name' => 'Box #1 Content',
            'desc' => 'Please input the content of Box#1 here',
            'id' => $prefix . 'storage-box-one-content',
            'type' => 'wysiwyg',
            'options' => array( 'textarea_rows' => 6, )
        ),
        array(
            'name' => 'Box #2 Heading',
            'desc' => 'Please input the heading of Box#2 here',
            'id' => $prefix . 'storage-box-two-heading',
            'type' => 'text_medium'
        ),
        array(
            'name' => 'Box #2 Content',
            'desc' => 'Please input the content of Box#2 here',
            'id' => $prefix . 'storage-box-two-content',
            'type' => 'wysiwyg',
            'options' => array( 'textarea_rows' => 6, )
        )
    )
);

You need to copy that code, paste it directly below line 75 and change all instances of storage to testimonials like this

$meta_boxes[] = array(
    'id' => 'page-testimonials',
    'title' => 'Testimonials Content',
    'pages' => array('page'),
    'context' => 'normal',
    'priority' => 'high',
    'show_names' => 'true',
    'fields' => array(
        array(
            'name' => 'Box #1 Heading',
            'desc' => 'Please input the heading of Box#1 here',
            'id' => $prefix . 'testimonials-box-one-heading',
            'type' => 'text_medium'
        ),
        array(
            'name' => 'Box #1 Content',
            'desc' => 'Please input the content of Box#1 here',
            'id' => $prefix . 'testimonials-box-one-content',
            'type' => 'wysiwyg',
            'options' => array( 'textarea_rows' => 6, )
        ),
        array(
            'name' => 'Box #2 Heading',
            'desc' => 'Please input the heading of Box#2 here',
            'id' => $prefix . 'testimonials-box-two-heading',
            'type' => 'text_medium'
        ),
        array(
            'name' => 'Box #2 Content',
            'desc' => 'Please input the content of Box#2 here',
            'id' => $prefix . 'testimonials-box-two-content',
            'type' => 'wysiwyg',
            'options' => array( 'textarea_rows' => 6, )
        )
    )
);

You now have to add the functionality to your js file in order to display the correct metaboxes and also hide them on the correct page template.

Now open your "script-metabox-template-toggle.js" .

Add the following line jQuery('#page-testimonials').hide(); to

function hide_all_custom_metaboxes() {
    jQuery('#page-facilities').hide();
    jQuery('#page-services').hide();
    jQuery('#page-storage').hide();
}

and then the following code

case 'testimonials':
jQuery('#postdivrich').css("display","none");
show_custom_metabox("page-testimonials");
break;

just below

case 'storage':
jQuery('#postdivrich').css("display","none");
show_custom_metabox("page-storage");
break;

So your completed code should be

jQuery(document).ready(function() {
    // in this functions hide all the custom metaboxes that are used
    function hide_all_custom_metaboxes() {
        jQuery('#page-facilities').hide();
        jQuery('#page-services').hide();
        jQuery('#page-storage').hide();
        jQuery('#page-testimonials').hide();
    }

    function show_custom_metabox(meta_id) {
        var selector = "#" + meta_id;
        if(jQuery(selector).length)
            jQuery(selector).show();
    }

    function toggle_wp_editor(current_metabox) {
        jQuery('#postdivrich').show();
        switch(current_metabox) {
            case 'facility':
                //jQuery('#postdivrich').css("display","none");
                show_custom_metabox("page-facilities");
            break;
            case 'services':
                jQuery('#postdivrich').css("display","none");
                show_custom_metabox("page-services");
            break;
            case 'storage':
                jQuery('#postdivrich').css("display","none");
                show_custom_metabox("page-storage");
            break;
            case 'testimonials':
                jQuery('#postdivrich').css("display","none");
                show_custom_metabox("page-testimonials");
            break;

        }
    }

    function get_template_html_id() {
        current_metabox = jQuery('#page_template option:selected').val();
        current_metabox = current_metabox.replace('template.','');
        current_metabox = current_metabox.replace('.php','');
        /*if(current_metabox == "default") {
            current_metabox = "content-default";
        }*/
        return current_metabox;
    }

    hide_all_custom_metaboxes();

    var current_metabox = get_template_html_id();

    show_custom_metabox(current_metabox);
    toggle_wp_editor(current_metabox);

    jQuery('#page_template').bind("change", function() {
        hide_all_custom_metaboxes();
        show_custom_metabox(get_template_html_id());
        toggle_wp_editor(get_template_html_id());
    });

});

That should do the trick. Please let me know if you encounter any hick-ups.

  • Thanks Pieter. Everything makes sense except one thing. What is the name of the js file that I need to add the above code to? – popflier Mar 18 '14 at 18:44
  • That will be "script-metabox-template-toggle.js". I did update my answer. – Pieter Goosen Mar 18 '14 at 18:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.