Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Show default headers description on frontend WordPress

  • SOLVED

In the TwentyThirteen theme, three default headers are registered with:


register_default_headers( array(
'circle' => array(
'url' => '%s/images/headers/circle.png',
'thumbnail_url' => '%s/images/headers/circle-thumbnail.png',
'description' => _x( 'Circle', 'header image description', 'twentythirteen' )
),
'diamond' => array(
'url' => '%s/images/headers/diamond.png',
'thumbnail_url' => '%s/images/headers/diamond-thumbnail.png',
'description' => _x( 'Diamond', 'header image description', 'twentythirteen' )
),
'star' => array(
'url' => '%s/images/headers/star.png',
'thumbnail_url' => '%s/images/headers/star-thumbnail.png',
'description' => _x( 'Star', 'header image description', 'twentythirteen' )
),
) );


What is the best way to 1) check that a default description has been provided for a header image and 2) output this description on the frontend of my website?

Thank you

Answers (3)

2014-04-29

Hariprasad Vijayan answers:

Hello,

Add the following code to your theme's functions.php

function get_header_image_desc() {
global $_wp_default_headers;
foreach ( array_keys($_wp_default_headers) as $header ) {
$headerimg = sprintf( $_wp_default_headers[$header]['url'], $template_directory_uri);
if (strpos(get_header_image(),$headerimg) !== false) {
$header_description = sprintf( $_wp_default_headers[$header]['description']);
}
}
return $header_description;
}
function header_image_desc() {
echo get_header_image_desc();
}

You can call it in your header.php like
header_image_desc();
or
echo get_header_image_desc();
Let me know if you need help.


designbuildtest comments:

Hi Hariprasad, $template_directory_uri was undefined so I added:

get_template_directory() . '/images/headers.php';

I'm still getting an undefined variable error for $header_description however.

Thanks.


Hariprasad Vijayan comments:

Hi,

User get_template_directory_uri() for instead of $template_directory_uri

or you can use following functions

function get_header_image_desc() {
global $_wp_default_headers;
foreach ( array_keys($_wp_default_headers) as $header ) {
$headerimg = sprintf( $_wp_default_headers[$header]['url'], get_template_directory_uri());
if (get_header_image() == $headerimg) {
$header_description = sprintf( $_wp_default_headers[$header]['description']);
}
}
return $header_description;
}
function header_image_desc() {
echo get_header_image_desc();
}


designbuildtest comments:

Thanks Hariprasad. This works great when suggested headers are in use, but throws an error when either a user uploaded image is displayed or user uploaded images are being randomized.

Can this code be amended so the descriptions of user uploaded images are also displayed when present?


designbuildtest comments:

Hi again Hariprasad,

I cobbled the below together which incorporates your original <strong>get_header_image_desc</strong> function.

I'm sure there must be a more elegant way of doing this ...


function amended_get_header_image_desc() {

if ( get_header_image() ) {

$header_image = get_header_image();

$header_state = get_theme_mod( 'header_image' );

$default_header_images = array(
get_template_directory_uri() . '/images/headers/circle.png',
get_template_directory_uri() . '/images/headers/diamond.png',
get_template_directory_uri() . '/images/headers/star.png',
'random-default-image',
);

if ( in_array( $header_state, $default_header_images ) ) {
echo get_header_image_desc();
}

else {
global $wpdb;
$query = "SELECT ID FROM {$wpdb->posts} WHERE guid='{$header_image}'";
$id = $wpdb->get_var($query);
$caption = get_post($id)->post_excerpt;
if ( $caption ) {
echo $caption;
}
}

}

}


Hariprasad Vijayan comments:

Is your last updated code is working?


Hariprasad Vijayan comments:

Try this code. It working for random and custom header images

function get_header_image_desc() {
global $_wp_default_headers;
$header_description = '';
if($_wp_default_headers)
{
foreach ( array_keys($_wp_default_headers) as $header ) {
$headerimg = str_replace("%s",'',$_wp_default_headers[$header]['url']);
if (strpos(get_header_image(),$headerimg) !== false) {
$header_description = sprintf( $_wp_default_headers[$header]['description']);
}
}
}
if(empty($header_description))
{
$img_id = get_custom_header()->attachment_id;
$header_description = get_post($img_id)->post_excerpt;
}
return $header_description;
}
function header_image_desc() {
echo get_header_image_desc();
}


designbuildtest comments:

Outstanding, many thanks Hariprasad.

My code did work, but your solution is so much more elegant.

Thanks again.

2014-04-29

zebra webdesigns answers:

Hello Designbuild

following code will bring the header image description if the image is set. it wont work if the image is set to random.
I will try to provide the code for random.

<?php
function get_header_image_desc() {
global $_wp_default_headers;
$header_description = get_bloginfo('name') . ": " . get_bloginfo('description');
$header_image = str_replace( get_template_directory_uri(), "", get_theme_mod('header_image') );
foreach ( $_wp_default_headers as $header_key => $header ) {
if ( str_replace("%s", "", $header['url']) == $header_image ) {
$header_description = $header['description'];
}
}
return $header_description;
}

/* below code will output the image description */
echo get_header_image_desc();

?>


zebra webdesigns comments:

Hello Designbuild

the following solution works perfectly,
http://wordpress.org/support/topic/get-header-image-description-to-string#post-2420475

but you need to replace the default code in twenty thirteen to implement the above method.

Let me know if you need further help
Mail: [email protected]
Skype: bhuvan530531


zebra webdesigns comments:

Is there any reply for my answer ??


designbuildtest comments:

Sorry Zebra, I couldn't get that solution to work. I only want the description, not the image itself.

2014-04-29

Bob answers:

You can simply use


<?php echo get_custom_header()->description; ?>


designbuildtest comments:

Wonderful - thanks. This solution works great on the frontend, but not fully in Customiser view.

When you switch from "Randomize suggested headers" to a single suggested header, a Undefined property: stdClass::$description error is generated when is Customiser view.

Any fix you could suggest?

Thanks.


Bob comments:

I do not get such error.

have you modified any core code? or are you mixing other code with it.

Does it really important to work in Customiser view?


Bob comments:

If you wish to see effect in Appearance > Header

Then you need to modify this <strong>function twentythirteen_admin_header_image()</strong> in twentythirteen\inc\custom-header.php


designbuildtest comments:

Hi Bhavesh, not I haven't modified any core code. After a bit more digging I don't think get_custom_header()->description; is going to work. Have a look at <strong>bungeshea's</strong> response on [[LINK href="http://wordpress.stackexchange.com/questions/89667/add-credit-to-get-custom-header-in-alt"]]StackExchange[[/LINK]]


Bob comments:

It will return description if it is set in default image array created in custom-header.php.


Bob comments:

below code will check that if default images description is available then it will display it.
if you have custom uploaded photo then you can add "alt" text from media library.

It will display that alt text.

<?php if(get_custom_header()->description){
echo get_custom_header()->description;
} else{
$attachment_id = get_custom_header()->attachment_id;
$alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true );
if ( count( $alt ) ) echo $alt;
}
?>


In this attached image you can see how it is visible with site description.
I have added alt content from media library