0

I am now creating a website for my client, this client wants me to make each page of the section of header image able to be easily uploaded by them in wordpress admin panel.

This is the code I have in functions.php:

add_theme_support( 'custom-header' );
$args = array(
    'width'         => 950,
    'height'        => 150,
    'default-image' => get_template_directory_uri() . '/images/header.jpg',
    'uploads'       => true,
);
add_theme_support( 'custom-header', $args );

This code is for a single banner image. What if I want to make it available for different and other pages?

  • Hey! Are you able to use the featured image as the header? – kirillrocks Apr 28 '18 at 21:12
  • why not using featured image as the header? – Manyang Apr 28 '18 at 22:13
1

create new file in your theme with name header-custom.php next copy this code into that file

    class customheaderMetabox {
    private $screen = array(
        'post',
        'page',
    );
    private $meta_fields = array(
        array(
            'label' => 'Add Image Header',
            'id' => 'addimageheader_24744',
            'type' => 'media',
        ),
    );
    public function __construct() {
        add_action( 'add_meta_boxes', array( $this, 'add_meta_boxes' ) );
        add_action( 'admin_footer', array( $this, 'media_fields' ) );
        add_action( 'save_post', array( $this, 'save_fields' ) );
    }
    public function add_meta_boxes() {
        foreach ( $this->screen as $single_screen ) {
            add_meta_box(
                'customheader',
                __( 'Custom Header', 'textdomain' ),
                array( $this, 'meta_box_callback' ),
                $single_screen,
                'advanced',
                'default'
            );
        }
    }
    public function meta_box_callback( $post ) {
        wp_nonce_field( 'customheader_data', 'customheader_nonce' );
        echo 'Allow you to add custom header in every page';
        $this->field_generator( $post );
    }
    public function media_fields() {
        ?><script>
            jQuery(document).ready(function($){
                if ( typeof wp.media !== 'undefined' ) {
                    var _custom_media = true,
                    _orig_send_attachment = wp.media.editor.send.attachment;
                    $('.customheader-media').click(function(e) {
                        var send_attachment_bkp = wp.media.editor.send.attachment;
                        var button = $(this);
                        var id = button.attr('id').replace('_button', '');
                        _custom_media = true;
                            wp.media.editor.send.attachment = function(props, attachment){
                            if ( _custom_media ) {
                                $('input#'+id).val(attachment.url);
                            } else {
                                return _orig_send_attachment.apply( this, [props, attachment] );
                            };
                        }
                        wp.media.editor.open(button);
                        return false;
                    });
                    $('.add_media').on('click', function(){
                        _custom_media = false;
                    });
                }
            });
        </script><?php
    }
    public function field_generator( $post ) {
        $output = '';
        foreach ( $this->meta_fields as $meta_field ) {
            $label = '<label for="' . $meta_field['id'] . '">' . $meta_field['label'] . '</label>';
            $meta_value = get_post_meta( $post->ID, $meta_field['id'], true );
            if ( empty( $meta_value ) ) {
                $meta_value = $meta_field['default']; }
            switch ( $meta_field['type'] ) {
                case 'media':
                    $input = sprintf(
                        '<input style="width: 80%%" id="%s" name="%s" type="text" value="%s"> <input style="width: 19%%" class="button customheader-media" id="%s_button" name="%s_button" type="button" value="Upload" />',
                        $meta_field['id'],
                        $meta_field['id'],
                        $meta_value,
                        $meta_field['id'],
                        $meta_field['id']
                    );
                    break;
                default:
                    $input = sprintf(
                        '<input %s id="%s" name="%s" type="%s" value="%s">',
                        $meta_field['type'] !== 'color' ? 'style="width: 100%"' : '',
                        $meta_field['id'],
                        $meta_field['id'],
                        $meta_field['type'],
                        $meta_value
                    );
            }
            $output .= $this->format_rows( $label, $input );
        }
        echo '<table class="form-table"><tbody>' . $output . '</tbody></table>';
    }
    public function format_rows( $label, $input ) {
        return '<tr><th>'.$label.'</th><td>'.$input.'</td></tr>';
    }
    public function save_fields( $post_id ) {
        if ( ! isset( $_POST['customheader_nonce'] ) )
            return $post_id;
        $nonce = $_POST['customheader_nonce'];
        if ( !wp_verify_nonce( $nonce, 'customheader_data' ) )
            return $post_id;
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
            return $post_id;
        foreach ( $this->meta_fields as $meta_field ) {
            if ( isset( $_POST[ $meta_field['id'] ] ) ) {
                switch ( $meta_field['type'] ) {
                    case 'email':
                        $_POST[ $meta_field['id'] ] = sanitize_email( $_POST[ $meta_field['id'] ] );
                        break;
                    case 'text':
                        $_POST[ $meta_field['id'] ] = sanitize_text_field( $_POST[ $meta_field['id'] ] );
                        break;
                }
                update_post_meta( $post_id, $meta_field['id'], $_POST[ $meta_field['id'] ] );
            } else if ( $meta_field['type'] === 'checkbox' ) {
                update_post_meta( $post_id, $meta_field['id'], '0' );
            }
        }
    }
}
if (class_exists('customheaderMetabox')) {
    new customheaderMetabox;
};

next include file in function.php using this code include(get_template_directory().'/header-custom.php');

after this step you will see new metabox in post and page on wp admin.

next if you want to show that image put this code in your header.php or in page.php <img src="<?php echo get_post_meta( $post->ID, 'addimageheader_24744' , true);?>">

0

I am using this solution

I created a custom field called banner and placed it in header.php file or header-single.php file.

<?php if(get_post_meta(get_the_ID(), 'banner', true)) : ?>
<img src="<?php echo get_post_meta(get_the_ID(), 'banner', true); ?>" />
<?php else : ?>
<?php the_title(); ?>
<?php endif; ?>

I think it work fine

  • How shall i use this code? I'm not really good in php coding. Thanks! – Jornes Dec 10 '14 at 19:10
  • hey plz check this url it is very simple to create meta box and get image chandankumar.in/… – Amit Mishra Dec 10 '14 at 19:18

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.