Using the new WordPress Customizer and SimplePie Together
It’s been awhile since I’ve posted some code tutorials! Unfortunately the blog has taken a back seat to client projects, a (real!) book I’m writing on Advanced WordPress, and several talks for conferences this summer! However today, I had to write something cool I thought you’d guys would enjoy.
Let’s pretend your client wants to show a blog feed from somewhere else on the internet, and have an image assigned to it. It would look something like this:
Now you could just get the RSS feed from your client and hard code all this in using plain Simplepie, which is included in WordPress anyways. But what if the client wants to constantly change where the feeds are coming from? In this example, my client wanted to use this as an advertising block – so he would need to be able to continually change the photos are URLs.
So how about we add a new section to the new WordPress customizer? We’ll add a text field for the RSS URL, and then an actual image uploader for the featured image! We’ll then tie all of that to SimplePie, and even output the link to the advertiser’s original site and name. The customizer will look like this:
Snazzy eh? I sure love that WordPress customizer.
Let’s start out our customizer function if you don’t have one already.
Then we’ll need to add a new “section” to the WordPress customizer (the one that says “Friends Feeds”)
$wp_customize->add_section('themename_sectioname', array( 'title' => __('Friends Feeds', 'themename'), 'priority' => 130, ));
It seriously can’t get any simpler than that. Make sure you change themename to the name of your theme, and sectioname to the name of the section (for example, friends_feeds). Priority states the order it’s going to show up in the customizer. The lower the number, the higher it’ll go.
Now we need to first add the bits for the text field, that will house our RSS URL. More easiness:
$wp_customize->add_setting('themename_theme_options[themename_optionname]', array( 'default' => 'Input RSS URL', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control('themename_optionname', array( 'label' => __('Friend Ad 1 RSS URL', 'themename'), 'section' => 'themename_sectionname', 'settings' => 'themename_theme_options[themename_optionname]', 'priority' => 1 ));
Again you’ll need to change themename, sectionname and optionsname. The add_setting function creates the actual option and this is where you add the default text in the field. You shouldn’t ever need to change capability or type. add_control sets the label of the option and adds it to the appropriate section. Make sure you update the ‘section’ option to have the same name as the section you created earlier.
Easy, right? The image uploader is almost exactly the same!
$wp_customize->add_setting('alternativz_theme_options[image_upload_friend1]', array( 'default' => '', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'image_upload_friend1', array( 'label' => __('Friend Ad 1 Image', 'alternativz'), 'section' => 'alternativz_friendsAds', 'settings' => 'alternativz_theme_options[image_upload_friend1]', 'priority' => 2 )));
The really only difference between the text field (which is the default option type, btw) and the image uploader, is the inclusion of new WP_Customize_Image_Control in first line of the add_control function. Here you can also see how I named my options with my themename (alternativz) and option name (image_upload_friend1) and section name (alternativz_friendsAds)
Close out your customizer function and add a register so WP will grab it:
} add_action('customize_register', 'alternativz_customize_register');
Refresh your customizer and bam! Prettiness ensues! Now to tie in SimplePie. I expect most of you are familiar with the basic use of SimplePie, so we’ll move along quickly. Here’s how we can tie in the customizer options:
<?php include_once(ABSPATH . WPINC . '/feed.php'); ?> <?php $options = get_option('alternativz_theme_options'); ?> <div class="friend"> <?php $rss = fetch_feed($options['alternativz_friendsAd1']); if (!is_wp_error( $rss ) ) : $maxitems = $rss->get_item_quantity(1); $rss_items = $rss->get_items(0, $maxitems); endif; ?> <?php if ($maxitems == 0) echo '<p>No items.</p>'; else foreach ( $rss_items as $item ) : ?> <img src="<?php echo $options['image_upload_friend1']; ?>" alt="Sponsored by <?php echo $rss->get_title(); ?>"/> <h3><a 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></h3> <p class="sponsored">Sponsored by <a href="<?php echo $item->get_base(); ?>" target="_blank"><?php echo $rss->get_title(); ?></a></p> <?php echo $item->get_description(); ?> <?php endforeach; ?> </div>
Most of this should look familiar, but let me call your attention to a few lines:
<?php $options = get_option('alternativz_theme_options'); ?>
This is how we call our options, now we just need to echo them out. For example, instead of inputting the RSS URL, we just pass the name of the text option we created above:
$rss = fetch_feed($options['alternativz_friendsAd1']);
Amazingly enough, you do the same exact thing for the image:
<img src="<?php echo $options['image_upload_friend1']; ?>" alt="Sponsored by <?php echo $rss->get_title(); ?>"/></pre< I also wanted to call your attention to how I did the feed's main URL and title - it took a lot of googling to find the answer to that, so I thought it might be helpful to point out. <pre lang="PHP"><p class="sponsored">Sponsored by <a href="<?php echo $item->get_base(); ?>" target="_blank"><?php echo $rss->get_title(); ?></a></p>
Don’t worry – this only took me a couple of hours to do….but at least I saved you guys! Next time this should take about 5 minutes to implement 😉