Recently made the decision to shift from adding own logo to using the built-in header. I used to have the uploading in theme options for better editing when installing the theme. However, it comes to my concern that, not everyone has the idea of cropping, not to mention, Photoshop it.
Placing the graphic editing of WordPress to theme option is a bunch of work and of course resource taking if not develop properly. So the header it is.
First off, define the size and text, here I got no header text, force to use logo:
define('NO_HEADER_TEXT', true );
define('HEADER_IMAGE_WIDTH', 400);
define('HEADER_IMAGE_HEIGHT', 140);
Then add the function, I still hate WordPress don’t built that in first for us to eliminate instead.
add_custom_image_header( 'header_style', 'admin_header_style' );
Now we need to create both function (header_style and admin_header_style):
function header_style() {
if( '' != get_header_image() ) : ?>
<style type="text/css">
.header-title {
display: block;
margin: 0 auto;
text-indent: -9999px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
background-image: url(<?php header_image(); ?>);
}
</style>
<?php endif; }
function admin_header_style() { }
Depending on your CSS, I use .header (for a H1 tag) for the site name. The whole thing:
define('NO_HEADER_TEXT', true );
define('HEADER_IMAGE_WIDTH', 400);
define('HEADER_IMAGE_HEIGHT', 140);
add_custom_image_header( 'header_style', 'admin_header_style' );
function header_style() {
if( '' != get_header_image() ) : ?>
<style type="text/css">
.header-title {
display: block;
margin: 0 auto;
text-indent: -9999px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
background-image: url(<?php header_image(); ?>);
}
</style>
<?php endif; }
function admin_header_style() { }
Now it has cropping function to have the exact logo size that will not distort the layout. Easier for explanation and documentation too.
Let’s check out what I watched:
