The full overview of other features can be found in the post for on Business Portfolio One , you can also view the new menu Business Portfolio two:!

Replace the Logo

Create a new Logo 422px * 80px upload the new Logo in the Admin > Media > Add New page:

Copy the File URL and open the Appearance > Theme Options page and paste in the url, save settings and you have now replaced the logo

The New Menu

We have re-designed the menu to make it more appealing, we changed the following images and styles in the style.css, height of the header, header-gradiant, menuItems, and Nav, for the nav.png we added a gradiant, rounded the corners and added an inner glow, for the menu items we made the back transparent and added a footer bar image and arrow head.

But for now download and enjoy, don’t forget some feedback and share this page with others, if you want to buy us a pint then you can donate via PayPal from the home page.

This is the themes front page, from the top we have added a search box, clickable logo, five social network clickable icons, Super Slide post slider, advertisement bar with four adverts, theme thumbnails, three feature posts, and a four section widgetised footer.

We have changed the name of the Artisteer ‘Footer’ option page to ‘Theme Options’ and given you a way to dynamically set the URL’s and alternative text from this page.

To start view the Business Portfolio Theme, then if you like what you see you can download it here and now: CMS-Lite Business Portfolio (1029), then just upload the theme to a test environment and read the rest of this post for the setup options.

.

Header Options

Activate the theme and from the Admin > Appearance > Theme Options you will see two sections, Header Logo URL and Header Social Icons, you only need to add the header logo URL if you want the logo to direct the viewer to a main website, leave this blank for your blogs home page.

For the five social icons you activate these when you enter a URL, for an email address you add mailto: to the email address, the websites should start with http://, the five icons that come with the theme are email, facebook, twitter, linked in, and an rss feed, you can change these if you want we will tell you where to get them and how to change them later in this post.

Other Setup Options

The Home Feature Post Category is what you will use for the three featured posts on the home page, this category should only have 3 posts and will not show in the sidebar menu.

Home content adverts is the central bar of four adverts and can be used to link to any sites, pages, posts etc:, following the instructions for the social icons URL’s.

Smooth Slider

For this theme you will need to use the Smooth Slider plugin downloadable from WordPress, just search for this Smooth Slider plugin from the plugins page.

We are using Smooth Slider in preference to cu3er and the Dynamic Feature Gallery which we have used in other themes, this is to showcase other slider options.

Set the following options from Admin > Settings > Smooth Slider, note the height and width required for this theme, you can set the other options to your own preferences.

Adding Posts

You can see from the screenshot below that there are two new options on the post page, the checkbox below the post is where you choose the Smooth Slider posts to include, adding a thumbnail to a post will give a thumbnail in the category archives, adding a post to the  Home Feature Posts category will display the post thumbnail and except to the home page.

Changing Theme images

To change the header logo just create a png logo with a transparent background we use this free website for our text logos, and replace the one in the themes images folder, make sure that the height of your logo is 80 pixels.

To change the social media icons you can download the icons for ‘free’ from this website and from this set resize the icons to 60 pixels by 60 pixels and replace one of the icons in the icon’s folder, it is important to use the same name.

To change the advert gif images replace one of the images in the ads folder, we have left the images from the website in the folder for testing, it is very important to size the images 250 pixels by 115 pixels.

That is all there is to it, please enjoy the theme pop back and leave a link to a website where you have used the theme, or leave a comment we are not able to offer support for our free themes, feel free to contact us if you would like us to develop an exclusive theme just for your site.

We have used this plugin in the our wedding theme, the cu3er slideshow  WordPress plugin from 18Elements uses a category to feed the display, you can view: The Wedding Theme here.

To have the slideshow embedded in the home page we cannot use a sidebar widget so you will have to add a line of code to the home page, this tutorial will use a 2.4 version theme created with the Artisteer template maker.

Stylesheet

We need to add a style to the stylesheet for our slideshow container, as we want to pad the slideshow, add borders, change margins to suit our theme, to start we need to open our style.css and find these two style blocks  making a note of the width settings, this will be used to calculate your slideshow width.

/* begin Layout */
.art-content-layout
{
 display: table;
 padding: 0;
 border: none;
 width: 996px;
}

/* begin LayoutCell, content */
.art-content-layout .art-content
{
 width: 75%;
}

We now know the width of our theme and we can calculate the width of our slideshow 996px * 75% =  747px we will be adding a nice left and right margin of 25px and padding 5px to suit our theme, different themes will need adjusting, so our div width = 747 – 60 =  687px we rounded this to 685px to suit our theme.

Next step open our demo-custom.css or style.css file and paste in the code below.

/* begin LayoutCell, sidebar1 */
.art-content-layout .demo-slideshow
{
 margin-top: 7px;
 margin-bottom: 7px;
 margin-left: 25px;
 margin-right: 25px;
 padding: 5px;
 width: 685px;
 border: dotted 2px #D1D1D1;
}

Include file

Next step is to create an include php file for our Slideshow which will be called from the index.php, copy the code below and paste into a new text editor file and save this as demo-slideshow.php .

<div class="demo-slideshow">
 <div class="inner">
<!-- cu3er Slideshow Start -->
 <?php if ( function_exists('install_cu3er') )  { install_cu3er(); } ?>
<!-- cu3er Slideshow End -->
 </div>
</div>

The last code step is to add a call to include our new file in our home.php or index.php or any other page file we may want the gallery on, find this line  <div class=”art-layout-cell art-content”> and insert the code below on the next line.

<!-- demo Slideshow Start -->
<?php if (file_exists(TEMPLATEPATH. '/demo-slideshow.php')) include(TEMPLATEPATH. '/demo-slideshow.php'); ?>
<!-- demo Slideshow End -->

Cu3er Setup

We can now adjust the settings from Admin > Settings > Cu3er, enter the width and height to match our theme, we have worked out the width from the two values we noted earlier, and you can suppress the slideshow category by following the other tutorial on this website.

We have used this in the our wedding theme, the cu3er slideshow  WordPress plugin from 18Elements uses a category to feed the display, when we added the images the slideshow category and the posts appeared, not a problem if the images form a part of a full post, but messy when used as placeholders.

View: The Wedding Theme.

We could hardcode the category ID and exclude this, that is fine on a static theme where we already know the Category ID, but what if we wanted to make the theme available to other clients or for free download.

On looking for a solution for our Artisteer theme to return a category ID we could not find a simple WordPress function to use on the lists, we have to create our own function that returns a value from the database, if you have been following our tutorials then you will already have demo-functions.php file, if not you can add them to the Artisteer functions.php file.

Add to either your demo-functions.php or the Artisteer theme functions.php

function demo_get_categoryID($catName){
 global $wpdb;
 $category_slug = str_replace(" ","-",$catName);
 $category_slug = strtolower($category_slug);
 $thevalue = $wpdb->get_var( "SELECT term_id FROM $wpdb->terms WHERE slug = '" . $category_slug . "'" );
 if ($thevalue) {
 return $thevalue;
 }else{
 return "";
 }
}

Now we need to filter the categories list to exclude the slideshow category from the menu, you can change the name as required.

In the Artisteer theme functions.php we will add this block of code to the code that returns the categories list, look for this line and insert the code below.

Find: wp_list_categories(‘title_li=’); and replace with the following lines.

/* Start demo Category add line */
 $exclude = demo_get_categoryID('slideshow');
 if ($exclude){
 wp_list_categories('title_li=&exclude='.$exclude.'');
 }else{
 wp_list_categories('title_li=');
}
/* End demo Category add line */

So your code block should look like this:

add_action('get_terms', 'art_vmenu_get_terms_filter');
 add_action('wp_list_categories', 'art_vmenu_wp_list_categories_filter');

 /* Start demo Category add line */
 $exclude = demo_get_categoryID('slideshow');
 if ($exclude){
 wp_list_categories('title_li=&exclude='.$exclude.'');
 }else{
 wp_list_categories('title_li=');
 }
 /* End demo Category add line */
 remove_action('wp_list_categories', 'art_vmenu_wp_list_categories_filter');
 remove_action('get_terms', 'art_vmenu_get_terms_filter');

last step is to add our image into two Artisteer files, index.php and archive.php, look for this line and insert the code below.

Find: <?php while (have_posts()) : the_post(); ?> and paste in the following lines

<!-- Start Check if our post is a slideshow post -->
<?php $slideCat = demo_get_categoryID('slideshow'); ?>
<?php if (in_category($slideCat) ) continue; ?>
<!-- End Check if our post is a slideshow post continue if it is -->

So your code block should look like this:

<?php while (have_posts()) : the_post(); ?>

<!-- Start Check if our post is a slideshow post -->
<?php $slideCat = demo_get_categoryID('slideshow'); ?>
<?php if (in_category($slideCat) ) continue; ?>
<!-- End Check if our post is a slideshow post continue if it is-->
<div>

Now we have hidden our slideshow category from view, remember that this will hide all posts in the specified named category, so only add the category to posts you do not want displayed .

Please leave a comment if you have found this post of use to your workflow.