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-newslibraryadmin folder and add our variable to the proper array. In this case, we will add the variable text_intro

[php]
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);
}
[/php]

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:

[html]
<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>
[/html]

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:

[php]
add_action(‘hybrid_before_content’, ‘intro_text’);
[/php]

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

[php]
function intro_text(){
global $news_settings;

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

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.

[php]
$news_settings = get_option( ‘hybrid_news_theme_settings’ );
[/php]

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.

27 thoughts on “How to add an option to Hybrid News options page”

  1. 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. 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.

Leave a Reply to Fer Cancel reply