Allground - Responsive Fullscreen Backgrounds for WordPress with images, YouTube videos, Google Maps and self hosted videos

How to add an option to Hybrid News options page

I’ve been working a bit with the great WordPress framework that Hybrid Theme is. It really speeds up the development process, and you can even forget about it if the blog you need is closely resembled by one of the freely available themes. For example, I built the SoloKawaii site in about three hours from achieving a colour combination, the proper typography, and coding it using Hybrid News. I also created images for the slider that displays featured news.
Hybrid News has some options to format the layout you need but sometimes you could need more options for your client or for yourself in the theme options page. In this tutorial, we will cover just that: adding another option to the theme options page.

ht

What we will be doing is adding a simple textarea to the options page. In order to do that, first we need to open the theme-settings-admin.php file, located in the hybrid-news\library\admin\ folder and add our variable to the proper array. In this case, we will add the variable text_intro

function news_theme_settings() {
$settings_arr = array(
'feature_category' => false,
'feature_num_posts' => false,
'excerpt_category' => false,
'excerpt_num_posts' => false,
'headlines_category' => array(),
'headlines_num_posts' => false,
'text_intro' => false,
);
return apply_filters('news_settings_args', $settings_arr);
}

Now we need to add the textarea control to the options page. From the same folder, open general.php and locate the table.form-table element. Add the following:

<tr>
   <th>
      <label for="<?php echo $data['text_intro']; ?>"><?php _e('Introductory Text:','news'); ?></label>
   </th>
   <td>
      <textarea id="<?php echo $data['text_intro']; ?>" name="<?php echo $data['text_intro']; ?>" cols="35" rows="5"><?php echo $val['text_intro']; ?></textarea>
   </td>
</tr>

Please note that we are overlooking the fact of the localization that is available with the Hybrid Theme. With these markup and code we output the ID name and Value for the variable we created in the previous step.

Now, you can’t access these variables using the standard get_option function provided by WordPress since the variables are stored within an array. The variable that is accessed using get_option is hybrid_news_theme_settings from the theme-settings-admin.php file so you better don’t mess it up with it. If you go to wp-admin/options.php you will see the variable as a serialized field. The proper way to access this variable is using the array variable referencing the variable by its name.

Let’s open the functions.php file from Hybrid News root folder. What we will be doing for this test is another interesting feature of the Hybrid Theme, we’ll be using one of its action hooks. At the end of the add_action block in Hybrid News’ functions.php add:

add_action('hybrid_before_content', 'intro_text');

The hook we’re using is hybrid_before_content and it will call the intro_text function. Now let’s write down that function:

function intro_text(){
global $news_settings;

echo '<p class="text-intro">';
echo $news_settings['text_intro'];
echo '</p>';
}

We’re calling the global variable $news_settings, which is the array that contains all Hybrid News options or settings. If you haven’t changed the first lines of functions.php you will see that line 19 has a sentence using get_option to initialize $news_settings, this is why we can use this global variable just by calling it from within our function.

$news_settings = get_option( 'hybrid_news_theme_settings' );

We’re done. If you visit your site now you should see the introductory text. Of course you can add any type of component to the options page just by following a similar procedure. Next time we will learn how to add more sections to Hybrid News front page configuring some select controls in the options page and calling them from the front page. See you next time.


“How to add an option to Hybrid News options page” received 25 comments! Add yours.

  1. Matt December 29th, 2009

    This is great, just what I needed. I’ve been using the free Premium News theme by WooThemes due to its highly extensible backend, but I really wanted to use Hybrid theme. Do you know about other themes with a easily customizable backend?

  2. Fer December 30th, 2009

    Great tutorial, thanks :)

  3. Elliot December 30th, 2009

    Matt, good question. I’ve published a short post pointing to two WordPress theme options frameworks and a couple of tutorials.

  4. You are now listed on FAQPAL January 8th, 2010

    How to add an option to Hybrid News options page…

    A tutorial covering the process of adding an option to the Hybrid News theme options page….

  5. Thomas February 13th, 2010

    Cool tip. I needed to add another drop down to Hybrid

  6. 10 Rare WordPress Theme Options Page Tutorials To Get You Started | CSS Reflex - Design Blog | Web Design | Inspiration and Resources for Designers February 15th, 2010

    [...] 5. How To Add Options Page To Hybrid News Theme [...]

  7. 10+ WordPress Tutorials: How to Create an Options Page for Your WordPress Themes and Frameworks - WPConstructs.com March 6th, 2010

    [...] 5. How to add an option to Hybrid News options page by iLovecolors [...]

  8. Very Useful 65 Wordpress Hacks | Design your way March 8th, 2010

    [...] How to add an option to Hybrid News options page [...]

  9. Affectionate_beauty April 2nd, 2010

    How you think when the economic crisis will end? I wish to make statistics of independent opinions!

  10. 9 Excellent Wordpress Theme Options Page Tutorials | Designer Wall April 4th, 2010

    [...] 5. How To Add Options Page To Hybrid News Theme [...]

  11. Wordpress Hacks « reeboot strategy April 20th, 2010

    [...] How to add an Option to Hybrid News Options Page [...]

  12. Deluxe Blog Tips April 24th, 2010

    I love the code of Hybrid more than other frameworks. This tutorial helps me a lot for digging into the code of Hybrid. Thanks for sharing.

  13. Wordpress Hacks And Customizations « moemir April 25th, 2010

    [...] How to add an Option to Hybrid News Options Page [...]

  14. Wordpress Hacks e Customizations! | sinergie.::.websolution | il blog May 7th, 2010

    [...] TricksHow To: Separate WordPress Comments and TrackbacksHow To: AJAXify WordPress Comment PostingHow to add an Option to Hybrid News Options PageSeparating Trackbacks from CommentsCustom CSS Per PostCustom Fields Hacks For WordPressList Posts by [...]

  15. What I’m Reading (weekly) | tj mapes May 9th, 2010

    [...] How to add an option to Hybrid News options page | WordPress | ilovecolors [...]

  16. Resources About Wordpress Hacks And Customizations May 31st, 2010

    [...] How to add an Option to Hybrid News Options Page [...]

  17. sinergie.::.websolution » Blog Archive » Wordpress Hacks e Customizations! June 18th, 2010

    [...] How to add an Option to Hybrid News Options Page [...]

  18. Wordpress hacks and tricks | Wordpress Theme Designing, Blog Optimization, Wordpress Videos December 10th, 2010

    [...] How to add an option to Hybrid News options page [...]

  19. 18 Tutorials Showing You How To Create WordPress Options Pages - tripwire magazine January 22nd, 2011

    [...] How To Add Options Page To Hybrid News Theme [...]

  20. 14 ideas para crear una página de opciones en tu Wordpress | code January 31st, 2011

    [...] How To Add Options Page To Hybrid News Theme [...]

  21. News March 20th, 2011

    So interesting to me … i have gained a lot from your post..
    …thanks

  22. 18 Tutorials Showing You How To Create WordPress Options Pages | How It Easy (HIE) Computing community May 6th, 2011

    [...] How To Add Options Page To Hybrid News Theme [...]

  23. FreeNewbie August 4th, 2011

    Thanx, I want to create like their demo, but to be able see their front page setting tutorial they make it tricky. So I wnat you to post more tutorial about Hybrid News theme.

  24. 14 ideas para crear una página de opciones en tu Wordpress | megustaelturismo June 27th, 2012

    [...] How To Add Options Page To Hybrid News Theme [...]

  25. The Utmost WordPress Hooks, Hacks & Top 20 Customizations Searches of 2013 | Design Inspiration. Free Resources & Tutorials December 26th, 2013

    […] How to add an Option to Hybrid News Options Page […]

Leave a comment