Investica Part Five

In part five we are leaving the home page to look at adding a subtitle, a while ago we visited a WordPress website where the theme had a subtitle full width below the menu bar, this was teaser text to grasp the readers attention.

Thinking about using a string of subtitle text as well as getting the attention of a website visitor it may have SEO benefits, if we wrap the text in <h2> tags it will likely get picked up by the search engines and indexed as a bonus.

Theme Options

Artisteer have created theme functions to set and retrieve default custom fields for the post and page meta, these functions are wrappers that contain the WordPress page meta calls, we can see the Artisteer defaults if we choose a page or post and add new or select edit.

Download Investica Part Five Files: Investica Part Five (879)

Here we can see the Artisteer Theme Options we cannot find these then we select Screen Options and check the Theme Options checkbox, notice the Title in Menu is a text box, we will add a new option called Subtitle we are not happy with the way the textbox spills outside the screen area so we will move the theme options below the editor in the main area.

lesson-5-1

admins.php

Let us start by moving the post Theme Options options below the editor in the central column, in the /library/ folder we locate and open the file admins.php, if we look for line 128 we will se these two code blocks.

function theme_add_meta_boxes() {
    add_meta_box( 'theme_meta_box',
                  __('Theme Options', THEME_NS),
                  'theme_print_page_meta_box',
                  'page',
                  'side',
                  'low'
                 );
    add_meta_box( 'theme_meta_box',
                  __('Theme Options', THEME_NS),
                  'theme_print_post_meta_box',
                  'post',
                  'side',
                  'low'
                 );
}

Where we see the arguments ‘side’ and ‘low’ these are the placement to the side and the order priority low, as we want to use the subtitles we will add a comment and promote these see the changes between the two blocks.

//Changed side to normal and low to high
function theme_add_meta_boxes() {
    add_meta_box( 'theme_meta_box',
                  __('Theme Options', THEME_NS),
                  'theme_print_page_meta_box',
                  'page',
                  'normal',
                  'high'
                 );
    add_meta_box( 'theme_meta_box',
                  __('Theme Options', THEME_NS),
                  'theme_print_post_meta_box',
                  'post',
                  'normal',
                  'high'
                 );
}

 

options.php

The meta box options and the main Theme Options are set in the options.php file this is also located in the /library/ folder, we are going to add an option for our subtitle lets look at the option

The id is a storage identifier, as the post and page meta is unique per post id we can use the same ‘id’, this is a lowercase slug, ‘name’ is a mixed case visual label, we can add a little prompt in the ‘desc’, and last of all we tell WordPress we want a textbox to hold the subtitle. 

array(
'id'    =>    'subtitle',
'name'    =>    __('Page Subtitle', THEME_NS),
'desc'    =>    __('Subtitle Banner Text', THEME_NS),
'type'    =>    'text'
),

 

If we open options.php and navigate to the end we can see two blocks of options the first for the page meta the second for the post, first thing we do is add a comma after the sub array closing parentheses ),

Now we can post our code block after the new comma and before the ); which closes the main array, we now have a code block that looks like this.

global $theme_page_meta_options;
$theme_page_meta_options = array (
    array(
    'id'    =>    'theme_show_in_menu',
    'name'    =>    __('Show in Menu', THEME_NS),
    'desc'    =>    __('Yes', THEME_NS),
    'type'    =>    'checkbox'
    ),
    array(
    'id'    =>    'theme_show_as_separator',
    'name'    =>    __('Show as Separator in Menu', THEME_NS),
    'desc'    =>    __('Yes', THEME_NS),
    'type'    =>    'checkbox'
    ),
    array(
    'id'    =>    'theme_title_in_menu',
    'name'    =>    __('Title in Menu', THEME_NS),
    'type'    =>    'text'
    ),
    array(
    'id'    =>    'theme_show_page_title',
    'name'    =>    __('Show Title on Page', THEME_NS),
    'desc'    =>    __('Yes', THEME_NS),
    'type'    =>    'checkbox'
    ),
    /* Added new Option */
    array(
    'id'    =>    'subtitle',
    'name'    =>    __('Page Subtitle', THEME_NS),
    'desc'    =>    __('Subtitle Banner Text', THEME_NS),
    'type'    =>    'text'
    ),
);
global $theme_post_meta_options;
$theme_post_meta_options = array(
    array(
    'id'    =>    'theme_show_post_title',
    'name'    =>    __('Show Title on Single Page', THEME_NS),
    'desc'    =>    __('Yes', THEME_NS),
    'type'    =>    'checkbox'
    ),
    /* Added new Option */
    array(
    'id'    =>    'subtitle',
    'name'    =>    __('Post Subtitle', THEME_NS),
    'desc'    =>    __('Subtitle Banner Text', THEME_NS),
    'type'    =>    'text'
    ),
);

 

header-subtitle.php

Next we need a template part so we can add the subtitle to the themes header with a single code line, in the main theme we create a new file called header-subtitle.php we add code to this file with conditions that will only show the subtitle if we have set a subtitle, and if the file (page) type is a single or a page, look at line one for the ‘if’ condition, lines two and three for the check to see if we have a subtitle. 

<?php if( is_page() || is_single() ) : ?>
    <?php $subtitle = theme_get_meta_option($post->ID, "subtitle"); ?>
    <?php if( $subtitle ) : ?>
        <div id="subtitle">
            <h2 class="subtitle-heading"><?php echo $subtitle; ?></h2>
        </div>
        <div class="cleared reset-box"></div>
    <?php endif; ?>
<?php endif; ?>

 

inv-style.css

In the inv-style.css file we created in an earlier part we add a style block, we can use a background image or delete the background: line from the style block, the background image we used is in the download. 

/* Subtitle Bar on Pages and Single Posts */
#subtitle {
    display: block;
    background: url("../images/subtitle_bg.png") no-repeat scroll left top transparent;
    position: relative;
    border: solid 1px #BFBFBF;
    border-bottom: none;
    margin: 0 auto;
    height: 50px;
    width: 898px;
}
h2.subtitle-heading {
    padding-top: 10px;
    font-family: "Lucida Sans Unicode",Verdana;
    color: #888888;
    font-size: 24px;
    font-weight: normal;
    font-style: italic;
    text-align: center;
}

 

header.php

The last file we edit is the header.php this is located in the main folder and a new call to our template part header-subtitle.php is added between:

<div class="cleared reset-box"></div>
    <div class="art-sheet">

 

So we will have the title between the header and sheet theme elements, the code should look like this:

<div class="cleared reset-box"></div>
    <?php /*Add our subtitle here */ ?>
    <?php get_template_part('header','subtitle') ?>
    <div class="art-sheet">

 

Now when we visit the edit section for pages and posts we will have the subtitle option available, Artisteer have already given us the option to turn of the page title, so the subtitle can be quite meaningful to our visitors.

lesson-5-2

Visit this page on the sample website:

lesson-5-3

In part six we will tackle the logo, the Investica logo is nice but it is not ours so we will add a theme option so we can upload a new logo from the Theme Options.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Artisteer

googlefonts11.png

As Artisteer users one of the first things many of us do is add code to hide the titles, we often do this for the simple reason that the default fonts are safe and boring, so in this post we … Continue reading

Read More

Posted in Investica

lesson-1-thumb

This is the first in a series of posts and code tutorials we are running in April 2011, these are Artisteer based and there has been a slight delay, as a new version of Artisteer was released on the 4th … Continue reading

Read More