Unable to display favicon using get_favicon()?

Question

I'm using fetch_feed (based on Simplepie) to display an array of RSS feeds (favicon & headlines only). Documentation on the simplepie website says to use get_favicon in the stylesheet. And I'm using the fetch_feed codex example. I'm getting the spacing where the favicon should be but not the favicon. The feed links appear fine.

CSS:

.rss a {
padding:0 0 0 20px;
background:transparent url(<?php echo esc_url ( $item->get_favicon() ); ?>) no-repeat 0 1px;
}

PHP:

<h2><?php _e('Recent news from Some-Other Blog:'); ?></h2>

    <?php // Get RSS Feed(s)

        // include_once(ABSPATH . WPINC . '/feed.php');

        // Get a SimplePie feed object from the specified feed source.

        $rss = fetch_feed(array('http://wordpress.org/news/feed/','http://beernews.org/feed/'));

            if (!is_wp_error( $rss ) ) : // Checks that the object is created correctly 

                  // Figure out how many total items there are, but limit it to 5. 

                  $maxitems = $rss->get_item_quantity(20); 

                    // Build an array of all the items, starting with element 0 (first element).

                    $rss_items = $rss->get_items(0, $maxitems); 

            endif;

    ?>

<ul style="list-style-type: none;">

    <?php if ($maxitems == 0) echo '<li>No items.</li>';

    else

        // Loop through each feed item and display each item as a hyperlink.

        foreach ( $rss_items as $item ) : ?>

            <li>   

                <a class='rss' href='<?php echo esc_url( $item->get_permalink() ); ?>' title='<?php echo 'Posted '.$item->get_date('j F Y | g:i a'); ?>'>

                                      <?php echo esc_html( $item->get_title() ); ?>

                                </a>

                <?php echo '<hr/>'; ?>

            </li>

        <?php endforeach; ?>

</ul>

Answer 1

You can't ( and shouldn't ) have php in your css files, css should be static and unchanging. If you need to generate dynamic css, you can put it inline in the header, or have your theme add a url via wordpress from which to generate the css stylesheet dynamically.

add_action('wp_head',createfunction("","echo '<style>.rss a { background-image: url(".esc_url ( $item->get_favicon() )."); }</style>';"));

If you made the CSS PHP executable, the browser could ( and probably will ) cache the stylesheet making the icon incorrect on some pages when using multiple feeds. It would also be a security issue.

Answer 2

You have to tell apache to parse css files for php. One way is to edit .htaccess and add the directive below to get php to parse css files.

AddType application/x-httpd-php .css

See http://net.tutsplus.com/tutorials/php/supercharge-your-css-with-php-under-the-hood/

Answer 3

You have several different problems. One is that your CSS selector (.rss a) doesn't refer to anything in your HTML. You want a.rss instead.

Second, as previously stated, CSS files are not parsed by PHP (by default, anyway), so you need your favicon reference somewhere that gets parsed by PHP.

Also, since each feed will have a different favicon, you need to fetch the correct one within your foreach loop. Try something like this (unnecessary line-breaks added for clarity):

foreach ( $rss_items as $item ) : ?>
    <li>   
        <a class='rss' 
            style='background-image:<?php echo $item->get_favicon(); ?>'
            href='<?php echo esc_url( $item->get_permalink() ); ?>' 
            title='<?php echo 'Posted '.$item->get_date('j F Y | g:i a'); ?>'
        >
            <?php echo esc_html( $item->get_title() ); ?>
        </a>
    </li>
<?php endforeach; ?>

And here's your CSS:

a.rss {
    padding:0 0 0 20px;
    background:transparent url('some-placeholder-image-in-case-no-favicon-exists.png') no-repeat 0 1px;
}

Also -- and this is just editorializing, not related to your questions -- don't add an <hr> to the <li>; use CSS to add a bottom border.