I'm currently creating a custom WordPress theme and using the WordPress Options Framework plugin to make a custom options page for my client. I'm able to easily create an image upload option and can get that uploaded image to show up where I intend it to within my theme's framework. Within my options file (required for the plugin to work), the array I've created for the image upload functionality is the following code:

$options[] = array(
'name' => __('Header Overlay', 'options_framework_theme'),
'desc' => __('This creates a full size uploader that previews the image.', 'options_framework_theme'),
'id' => 'header_overlay',
'type' => 'upload');

Then, within the theme I call that uploaded image with the following code:

<img src="<?php echo of_get_option('header_overlay', 'no entry'); ?>" />

Like I mentioned this all works perfectly. However, what I cannot figure out is how to extract the Alt Text from the image upload dialogue and including it as an echo within the img src tag in the theme. Is there anything I can add within the array above to create something to echo within the theme?

If I do a search for the text of_get_option throughout the files, I find one file. This is the code:

if ( ! function_exists( 'of_get_option' ) ) : 
    function of_get_option( $name, $default = false ) { 
        $config = get_option( 'optionsframework' ); 
        if ( ! isset( $config['id'] ) ) { 
            return $default; 
        $options = get_option( $config['id'] ); 
        if ( isset( $options[$name] ) ) { 
            return $options[$name]; 
        return $default; 
  • I suppose of_get_option only returns a string with the image source. Can't this be set to return the full attachment object?
    – brasofilo
    Dec 6, 2012 at 15:23
  • Thanks for your reply. That sounds like a good suggestion. However, I wouldn't even know where to start to make that happen. If I do a search for the text of_get_option throughout the files, I find one file. This is the code: if ( ! function_exists( 'of_get_option' ) ) : function of_get_option( $name, $default = false ) { $config = get_option( 'optionsframework' ); if ( ! isset( $config['id'] ) ) { return $default; } $options = get_option( $config['id'] ); if ( isset( $options[$name] ) ) { return $options[$name]; } return $default; } endif;
    – Brandon
    Dec 7, 2012 at 0:02
  • I've included your code in the Question, you can edit and update it whenever needed to include more information. In that function, I'd inspect the variable $options. If you do a print_r or var_dump maybe the site will break. Check this search results for how to debug with FirePHP/FireBug. This option is also good.
    – brasofilo
    Dec 7, 2012 at 1:09
  • I was just mentioning this to the plugin author yesterday.... well similar. Personally I'd prefer if the upload saved the attachment ID, then I'd be able to control what size the image is displayed at and you'd be able to access the alt text. Just not sure when I will get to try to create a pull request for him to look at. In theory you can catch this info when the script sends the img src back to the text input, but I'm not sure how you'd do it and still maintain backwards compatibility for all those who are relying on this plugin. Jan 18, 2013 at 20:17
  • I'd prefer the attachment ID as well because you're right, you'd be able to do more with it. For now, my solution is to create a text field where the user can add alt text. I then call that in the alt text of the img tag. It works for now...I'd love to be able to call it out of the attachment properties though. Question: What does it mean to 'create a pull request?' Does that have something to do with GitHub?
    – Brandon
    Jan 19, 2013 at 15:16

1 Answer 1


There are 2 potential solutions to this.

Solution 1: Since Options Framework only gives you an uploader, I assume you are entering the alt text manually on the WP admin side. You could create a text option for the alt text so you can enter it from your custom options panel. Then just echo that option where you need it:

$options[] = array(
    'name' => __('Header Overlay Alt Text', 'options_framework_theme'),
    'desc' => __('Alternate text for your header overlay image.', 'options_framework_theme'),
    'id' => 'header_overlay_alt',
    'type' => 'text');

Then in your template:

<img src="<?php echo of_get_option('header_overlay'); ?>" alt="<?php echo of_get_option('header_overlay_alt'); ?>">


Solution 2: (This one more directly answers your question.)
a) Retrieve the attachment ID based on the URL and b) use that ID to retrieve the corresponding alt text. (Credit for part a goes to Philip Newcomer: http://philipnewcomer.net/2012/11/get-the-attachment-id-from-an-image-url-in-wordpress/.)

function pn_get_attachment_id_from_url( $attachment_url = '' ) {

global $wpdb;
$attachment_id = false;

// If there is no url, return.
if ( '' == $attachment_url )

// Get the upload directory paths
$upload_dir_paths = wp_upload_dir();

// Make sure the upload path base directory exists in the attachment URL, to verify that we're working with a media library image
if ( false !== strpos( $attachment_url, $upload_dir_paths['baseurl'] ) ) {

    // If this is the URL of an auto-generated thumbnail, get the URL of the original image
    $attachment_url = preg_replace( '/-\d+x\d+(?=\.(jpg|jpeg|png|gif)$)/i', '', $attachment_url );

    // Remove the upload path base directory from the attachment URL
    $attachment_url = str_replace( $upload_dir_paths['baseurl'] . '/', '', $attachment_url );

    // Finally, run a custom database query to get the attachment ID from the modified attachment URL
    $attachment_id = $wpdb->get_var( $wpdb->prepare( "SELECT wposts.ID FROM $wpdb->posts wposts, $wpdb->postmeta wpostmeta WHERE wposts.ID = wpostmeta.post_id AND wpostmeta.meta_key = '_wp_attached_file' AND wpostmeta.meta_value = '%s' AND wposts.post_type = 'attachment'", $attachment_url ) );


return $attachment_id;

$your_id = pn_get_attachment_id_from_url(of_get_option('header_overlay'));
$alt_text = get_post_meta($your_id, '_wp_attachment_image_alt', true);

Then echo it out as needed:

<img src="<?php echo of_get_option('header_overlay'); ?>" alt="<?php echo $alt_text; ?>">

I know this question is 6 months old, but even if the OP has moved on, hopefully this answer will help someone!

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.