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.

Continue reading

Investica Part Four

Only one last thing we need to do for the two column post layout and that is to move the image below the title, as Artisteer have moved the post output we cannot change the layout in the page or content files, so we will change the code.

We have to stop and consider the rest of our pages that might use the thumbnail, these may include the search results, category and later a magazine style single category page, so we will leave the core function alone but copy and rename it for the homepage two column output.

Continue reading

Investica Part Three

We can see from the images in the last post that we have a text link Continue Reading… in this section we are going to turn this into a button that fits in nice with out theme, to do this we will edit the excerpts function in the functions.php file.

As we see in the earlier posts some Artisteer functions have parameter arrays that we can pass in, we do not need to cut out code to change the ‘Continue Reading’ to a single word like ‘More’ we can just pass a parameter to the Artisteer function, this means that on our home page we can have the word ‘More’ but our post lists will still display the text link.

Content-Home.php

Lets for our theme open our new content-home.php file this is the one where we passed in the thumbnail parameters as $arg  we will change that name to something more meaningful in this section $thumb.

Download Part Two Files: Investica Part Three (761)

We are passing two arguments to the theme_get_excerpt() function, these will override the defaults and display our changes, the first in our $excepts array is the ‘more_tag’ notice the __( this is for localisation in a WordPress language file.

The second is our a new parameter we have added called ‘more_button’, this is because we need a flag to tell the function if we want text or a button returned to our post, we have used a 1 here we could use true.

We edit the line at row four ($thumb) and add the lines five and six, then in the array elements ‘thumbnail’ and ‘content’ we pass in the two array variables $thumb and $excerpt, this is all we do in the content-home.php file.

<div class="two-column">
<?php
/* set the thumbnail size */
$thumb= array('size' => array(250,170) );
/* custom More Button */
$excerpt = array('more_tag' => __('More', THEME_NS),'more_button' => 1);
?>
<?php
    global $post;
    theme_post_wrapper(
        array(
                'id' => theme_get_post_id(),
                'class' => theme_get_post_class(),
                'thumbnail' => theme_get_post_thumbnail($thumb), //Large Thumbnail
                'title' => '<a href="' . get_permalink( $post->ID ) . '" rel="bookmark" title="' . get_the_title() . '">' . get_the_title() . '</a>',
                'before' => theme_get_metadata_icons( '', 'header' ),
                'content' => theme_get_excerpt( $excerpt ),
                'after' => theme_get_metadata_icons( '', 'footer' )
        )
    );
?>
</div>

functions.php

If we view our theme now we will see the changed more tag but not the button, we have to add code for the button style in the functions.php we open this file and navigate to line 250, and we insert a new variable to take the value we passed in with the ‘more_button’ this will be used as a condition a little way down the function, at line 249 find the code : null)); add these two lines with returns and line feeds before and after.

/* We want to show a button on two column posts */
$more_button = theme_get_array_value($args, 'more_button', 0 );

 

We then look at line 315 to 317 which should look like this:

if ($show_more_tag) {
    $the_contents = $the_contents.' <a class="more-link" href="'.$perma_link.'">'.$more_tag.'</a>';
}

 

We want to add a condition here to see if the $more_button is set if it is we output a button style string, if not the standard string is returned.

if ($show_more_tag) {
    // Added Button Condition
    if ($more_button) {
        $the_contents = $the_contents.'<br></br><span class="art-button-wrapper" style="margin-top: 5px"><span class="art-button-l"></span>';
        $the_contents = $the_contents.'<span class="art-button-r"></span><a href="'.$perma_link.'" class="art-button">'.$more_tag.'</a></span>';
    }else{
        $the_contents = $the_contents.' <a class="more-link" href="'.$perma_link.'">'.$more_tag.'</a>';
    } // Added Close Condition
}

If we look at this we have added the art-button-wrapper, art-button-l, art-button-r and the art-button spans and classes, notice that we have added a <br></br> tags so our button is on a new line, we have also added an inline style with a top margin of 5 pixels.

Open the functions.php in the download to see where this code fits in the theme_get_except() function, look at the other parameters that we can pass in that may help with other themes.

lesson-3-1  

As we can see the button looks quite nice for the home page, we can have to look at the number of words for the excerpts in Admin > Theme options and change this setting to reduce the number of words for a more uniform display.

In the next part we will be looking at moving the title, as the layout is code driven we will copy one of the Artisteer functions, re-name and use this for the updated layout.  

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.

Investica Part Two

In part one we added two sizes of thumbnail image to our theme, if we look at the Investica Template we can see that there are posts in two columns with a wide image, in part two we will create the two column layout and set the wide image.

This will require two new files, the first will be home.php that will become the landing page for our website, the second will be content-home.php this will be the loop for our two column display and get our new thumbnail by passing an argument to the Artisteer thumbnail function.

Continue reading

Investica Part One

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 April 2011 and we halted the tutorials while we looked at the changes.

In this series we are looking to convert a WordPress theme to be as close as we can get it to the Artisteer html template, when we change from html to WordPress in Artisteer we loose a lot of the home page layout, the html layout is what we will try to recreate.

Continue reading