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 (1033), 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.

Look at this image, we have the Home menu item and then three Categories and on the right we have a Page menu, pretty cool menu and not hard to achieve, you will need Artisteer 2.4 to complete this tutorial.

All we have done here was to copy the art-menu() function from the functions.php file and paste this in the demo-functions.php, then we added two parameter which we will use to great effect later, and changed some of the code.

The first parameter we pass in is the menu type ‘pages’ or ‘’ for categories, the second is the position of the ‘Home’ menu item ‘left’, ‘right’ or ‘’, in the screenshot above we have added the home menu item before categories as we always expect this menu item to be the first.

This is the categories function <?php demo_menu_items(”,’left’); ?> ,the first parameter blank for categories the second to place the home button left of the categories, the pages <?php demo_menu_items(‘pages’,”); ?> ,that is quite simple to use really.

As you can see we have also split the two menus, one left and one right, you can place either menu where you like, all on one line, left and right, and pages and categories in their own space,the menu function comes in a file that you can download the demo-functions.php

Horizontal functions download the file here Navigation Functions (1359) however the bonus file is downloadable at the end of this tutorial and includes both Horizontal and Vertical Menu functions.

You do not need to copy and paste the code, but for those that want to integrate this  into their own code here it is.

/* Start CMS-Tutorial horizontal menu */
function demo_menu_items($menuType,$homePosition)
{
 global $artThemeSettings;
 if ('left' === $homePosition) {art_print_homepage();}
 if ('pages' === $menuType)
 {

 add_action('get_pages', 'art_menu_get_pages_filter');
 add_action('wp_list_pages', 'art_menu_list_pages_filter');

 wp_list_pages('title_li=&sort_column=menu_order');

 remove_action('wp_list_pages', 'art_menu_list_pages_filter');
 remove_action('get_pages', 'art_menu_get_pages_filter');
 }
 else
 {
 add_action('get_terms', 'art_menu_get_terms_filter');
 add_action('wp_list_categories', 'art_menu_wp_list_categories_filter');

 wp_list_categories('title_li=');

 remove_action('wp_list_categories', 'art_menu_wp_list_categories_filter');
 remove_action('get_terms', 'art_menu_get_terms_filter');
 }
 if ('right' === $homePosition) {art_print_homepage();}
}
/* end CMS-Tutorial horizontal menu */

Stylesheet

If you want to option to split the menus on one line like the screenshot we need to add two small blocks to the demo-custom.css or the style.css.

/* Start cms-lite menu left and right blocks */
.demo-left
{
float: left;
}
.demo-right
{
   float: right;
}
/* End cms-lite menu left and right blocks */

Functions File

We need to let WordPress know that our function exists to do this we add a line at the start of the functions.php file in the root directory of the theme.

/* Start code to load custom functions file */
if (file_exists(TEMPLATEPATH. '/demo-functions.php')) include_once(TEMPLATEPATH. '/demo-functions.php');
/* End code to load custom functions file */

Header File

This is where we call our new function, we have a few options here, if we just wanted to add our categories menu somewhere then we leave the Artisteer code and add in a call to our menu open header.php and add your line where you want the menu to appear.

<div class="art-nav">
  <ul class="art-menu">
   <?php demo_menu_items('',''); ?>
  </ul>
</div>

This is the call for the menu in the screenshot.

<div class ="art-nav">
  <div class="demo-left">
   <ul class="art-menu">
     <?php demo_menu_items('','left'); ?>
   </ul>
  </div>
  <div class="demo-right">
   <ul class="art-menu">
     <?php demo_menu_items('pages',''); ?>
   </ul>
  </div>
</div>

We will leave you to explore other options, we do love to hear from you so drop back and leave a comment or add a link to a live website.

Bonus Section

As you have taken the time to read this tutorial here is a bonus just for you, as well as the horizontal menu we have added the vertical, code is much the same except that you pass in ‘top’ or ‘bottom’ for the ‘Home’, and you set this up in the demo-functions.php file.

In the widgets you now have two Vertical Menus the Artisteer one and our Full Vertical Menu, so you could have pages on one and categories on the other, or use the Full Vertical Menu for both pages and categories in any order.

Just the code and the download to add now, for the code in the demo-functions.php you find this function and set the parameters as you want in the full_widget_verticalmenu function look for the code in the first block.

Download: Both Menu Functions (111)

<ul class="art-vmenu">
<?php demo_vmenu_items('','top'); ?>
<?php demo_vmenu_items('pages',''); ?>
</ul>

Categories only Code.

<ul class="art-vmenu">
<?php demo_vmenu_items('',''); ?>
</ul>

Pages only Code.

<ul class="art-vmenu">
<?php demo_vmenu_items('pages','top'); ?>
</ul>

Enjoy share and don’t forget to add some feedback.

-

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.

Our latest theme is the Portfolio Theme, we have used Artisteer 2.4, cu3er slideshow and have created a function to add a number of categories, posts and tags when the theme is first loaded, check back early February for linking, columns and mouseover fading.

Visit The Wedding Theme to see how the post images look, while you are there sign the guestbook, we would say view our photos but if we have not emailed you the password you will not be able to.

This post has been created based on a post by Mark Jaquith here and we would like to thank mark for making the code easy to follow.

But in this short tutorial we are only looking at the Post Images, support for post images is now a part of WordPress and is easy to implement so lets get started, if you have been following our tutorials then you will already have these lines in the demo-functions.php file, if not you can add them to the Artisteer functions.php file.

The width (200)  and height (133)  dimensions we used here in line three are for a standard landscape image, you may want to change the dimensions to a square or portrait based on the type of posts you will be making.

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

/* Start WordPress Thumbnail Support Code */
add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 200, 133, true); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size
/* End WordPress Thumbnail Support Code */

Now we need to add a style to the stylesheet for our image, you may want to pad the image or add additional margins to suit your theme, Artisteer adds a margin around the img tag, in our theme it was 7px so we added that to the image width, 200 to 214px, and a right margin just to push the text more to the right.

Add to either your demo-custom.css or the Artisteer theme style.css

/* Add a div to the post list for our thumbnail images */
#demo-image
{
 margin-right: 7px;
 float: left;
 overflow: hidden;
 width: 214px;
 height: 100%px;
}

Last step is to add our image into two Artisteer files, index.php and archive.php, as you scroll down you will see this line.

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

Below that is another line that look like this, paste the code lines after this lines

<!– article-content –>

Add this code to the index.php and archive.php

<!-- Start demo code Add our post image to the post list -->
 <div id="demo-image">
 <?php the_post_thumbnail(); ?>
 </div>
 <!-- End demo code Add our post image to the post list -->

So your code block should look like this:

<div class="art-postcontent">
 <!-- article-content -->

 <!-- Start demo code Add our post image to the post list -->
 <div id="demo-image">
 <?php the_post_thumbnail(); ?>
 </div>
 <!-- End demo code Add our post image to the post list -->

 <?php if (is_search()) the_excerpt(); else the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?>
 <?php if (is_page() or is_single()) wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

 <!-- /article-content -->
</div>

Now that is it with the code how easy was that, just edit a post and in the right column you will see an option for the Post Thumbnail, select an image from the post media and you will see an option to make thumbnail, save the post and view your website.

The last and most important thing is to let others know if this helped you, just add your comment to this post for anyone else reading it.

Artisteer is a theme creation tool not a content manager, so the answer was no, however out of the box how close could Artisteer come, the answer “pretty dam close”.

We got to work with Artisteer 2.4 and one key factor we had to consider was that our home page content would all be styled on the ‘sidebar style and not the content area’, so we come up with this template to add our content to, note: that we have not used bullets as they mess things up.

Have a look at the finished site Here: http://digitalraindrops.net/demo/wordpress/cms-overview/

Get the starting theme files: Custard Theme Tutorial Start (228)

Getting Started

All you will need for this tutorial is WordPress 2.9+, a text editor, the demo theme and some images and text to create your posts.

Do not worry if you have not created the files from the best practices post, they are already in the theme download, get it here:

Plugins

The Dynamic Feature Gallery from Studio Grasshopper

Download: http://wordpress.org/extend/plugins/dynamic-content-gallery-plugin/

Website: http://www.studiograsshopper.ch/dynamic-content-gallery/

The Category Post Widget

Download: http://wordpress.org/extend/plugins/category-posts/

Website: http://jameslao.com/2009/12/30/category-posts-widget-3-0/

Firefox and Browser Add-On

We also recommend that you use the Firefox browser with the firebug Add-on, you use firebug to inspect any issues that may need resolving later, where you might add padding etc.

Content Areas

We have the ‘Dynamic Content Gallery’ and three category columns to create, we will use the WordPress and Artisteer sidebars code to create three content panes, this will be in our new functions file which we will call from the functions.php, the most important thing when creating new sidebars is that they are created after the Artisteer sidebars, the reason is because in the sidebar1.php they are called by index and not name.

Open the file named demo-functions-php and add the code below  before the end tag ?>, we have added a prompt in the file to create the content panes.

/* Start code to create 3 content areas for the categories */
function demo_create_content_pane(){
 if (function_exists('register_sidebars')) {
 register_sidebars(3, array(
 'name' => 'Content %d',
 'before_widget' => '<div id="%1$s">'.'<!--- BEGIN Widget --->',
 'before_title' => '<!--- BEGIN WidgetTitle --->',
 'after_title' => '<!--- END WidgetTitle --->',
 'after_widget' => '<!--- END Widget --->'.'</div>'
 ));
 }
}
/* End code to create 3 content areas for the categories */

Next we need to let WordPress know that we have added the new sidebars, open functions.php and look for the code which will be the same as above and add these lines after the sidebars function.

/* Start code to create 3 content areas for the categories */
demo_create_content_pane();
/* End code to create 3 content areas for the categories */

You now should have this in your functions.php.

if (function_exists('register_sidebars')) {
 register_sidebars(1, array(
 'before_widget' => '<div id="%1$s">'.'<!--- BEGIN Widget --->',
 'before_title' => '<!--- BEGIN WidgetTitle --->',
 'after_title' => '<!--- END WidgetTitle --->',
 'after_widget' => '<!--- END Widget --->'.'</div>'
 ));
}

/* Start code to create 3 content areas for the categories */
demo_create_content_pane();
/* End code to create 3 content areas for the categories */

If you have read the Best Practices post it will all be clearer now, we are creating a new home page with four dynamic content areas, and the only change to our theme is these three lines, how cool is that?

The html code

Next we need two blocks of html code one for our Content Gallery and one for our Category Posts, instead of doing this in the home.php page we will create two new files, again the reason for this is management and portability of functions and code, the empty files are already created for you in the demo theme.

Open the file named demo-contentbar.php, this file contains the structure for our category columns, one container and three columns, notice we are calling the art-sidebar code here, this gives us the sidebar attributes and styles.

<div class="demo-content">
 <div class="demo-content1">
  <?php if (!art_sidebar('Content 1')): ?><?php endif ?>
 </div>
 <div class="demo-content2">
  <?php if (!art_sidebar('Content 2')): ?><?php endif ?>
 </div>
 <div class="demo-content3">
  <?php if (!art_sidebar('Content 3')): ?><?php endif ?>
 </div>
</div>
<div> class="cleared"</div>

the second file we need to populate with code is the demo-feature-gallery.php, this is the container for our “dynamic Content gallery”

<div id="demo-featureGallery">
 <div  class="inner">
<!-- Dynamic Feature Gallery Start -->
<?php if( function_exists( 'dynamic_content_gallery')) dynamic_content_gallery(); ?>
<!-- Dynamic Feature Gallery End -->
 </div>
</div>

That concludes the Content Areas

Home Page

The Home Page will present our content to the public, all we need in this file is a skeleton page structure and our content, the feature gallery sits between the header and content and the category posts sit inside the content.

Open the file named home.php and paste in this code, notice in the code that we are checking if the file exists first, this means if you remove a file you will not get a fatal error.

<?php get_header(); ?>
<?php if (file_exists(TEMPLATEPATH. '/demo-feature-gallery.php')) include(TEMPLATEPATH. '/demo-feature-gallery.php'); ?>
<div class="art-content-layout">
 <div class="art-content-layout-row">
 <div class="art-layout-cell art-content">
 <!-- Start Categories go here -->
 <?php if (file_exists(TEMPLATEPATH. '/demo-contentbar.php')) include(TEMPLATEPATH. '/demo-contentbar.php'); ?>
 <!-- Start Categories go here -->
 </div>
 <?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
</div>
<div></div>
<?php get_footer(); ?>

Layout

In this next section we need to add the layout to the theme, we do this as a stylesheet, setting widths, height and positions.

Starting with the content block which consists of the outer frame and three content areas, notice the widths of the content areas inside the frame.

/* Content Bar and three content areas Width */
/* Content Panel layout */
.art-content-layout .demo-content
{
width:100%;

}
.art-layout-cell art-content .demo-content
{
 position: relative;
 margin-top: 0;
 padding: 0;
 border: 0;
 float: left;
 overflow: hidden;
 width: 100%;
 height: 100%;
}

.demo-content .demo-content1{
 position: relative;
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
 overflow: hidden;
 width: 33%;
}

.demo-content .demo-content2{
 position: relative;
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
 overflow: hidden;
 width: 34%;
}

.demo-content .demo-content3{
 position: relative;
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
 overflow: hidden;
 width: 33%;
}

Next is our Dynamic Content Gallery, here the width is fixed for the theme width, and the height for the content we want to display.

/* Dynamic Feature Gallery alter margin left and top if required */
/* Width of art-contentLayout used for Feature gallery from style.css 992px */
#demo-featureGallery
{
 position: relative;
 margin: 0px;
 padding: 0;
 border: 0;
 float: left;
 overflow: hidden;
 width: 992px;
 height: 300px;
}

#demo-featureGallery .inner
{
 margin: 0px;
 padding: 0;
 border: 0;
 float: left;
}

Dynamic Content Gallery

Activate the “Dynamic Content Gallery” and set the width to 992 and the height to 300, if you have problems later with the display there is  a setting to use java and not mootools changing this works for me, I will not go into details on how to add a picture, create a category of featured, add am image to a post in this category, you need to add the image url and a description, then back to settings and select this category.

Gallery Method = One Category

Add the Category Here – NOTE: It will not show if you have no posts yet

When you Insert the image in the post copy the URL, select all and copy, then paste this in the box on the right, optional add the title to display.

Category Posts

For this theme we have set the thumbnail height and width in the demo-functions.php to 190 x 143, activate the Category Posts plugin, and add one to each of the Content Panes, select the category and say display thumbnails, enter the sizes here and say how many to display, our sample website has four.

Adding the post thumbnail is easy there is a new section on the right, when you select the image there is an option to use it as the post thumbnail

If you view your blog now you would have something like this.

Finishing Touches

As you can see the content has a white background, the theme has a background image we do not want, now you will see the power of using the demo-custom.css file, we will alter all of this without changing one line in the themes style.css, NOTE: see the !important on the colours, this tells WordPress that our setting should take priority over all others, how powerful we are!

Open the file demo-custom.css and add in this block of code, note the changes to art-sheet and art-body are done here and not in style.css

/* Turn off the background image */
body
{
 background-image: none !important;
}

/* color the background same as the sheet */
#art-main
{
 background-color: #FFD700 !important;
}

/* color the background same as the sidebar */
.art-blockcontent-body
{
 background-color: #EDCB07;
}

/* color the background same as the sheet */
.art-block
{
 background-color: #FFD700 !important;
}

/* Add a line to the top of each list item */
.art-blockcontent-body ul li
{
 border-top: 1px solid #000000;
}

/* Increase the height of each list item */
.art-blockcontent-body ul li {
 line-height:200%;
}

/* Add a closing line to the botton of the list */
.art-blockcontent-body
{
 border-bottom: 1px solid #000000;
}

And here we have our website with nice content areas, and the header photographs are mine, another ‘Hobby!”

We will leave you to play about with adding extra borders and styles, and hope that this tutorials gives you a better understanding of changing theme content, you can download the final theme with all the changes.

Demo blog here: http://digitalraindrops.net/demo/wordpress/cms-overview/

Download final theme here: Custard Theme Tutorial Final (48)

if you have really saved some time with this and have benefited with a working knowledge, you can make a donation from any page in the right sidebar!

thanks for looking.

Bonus Section

It would be nice if the post image was shown in the category list when you look up a category, so lets add this, as it would be the same method to add them to the index page on a normal theme!

Add to demo-custom.css

/* Add a div to the category post list for our images */
#demo-image
{
  margin-right: 10px;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 190px;
  height: 100%px;
}

And in the category.php (and index.php for a normal blog) we need to tell wordPress if there is an image then get it!

near the bottom you will find a div called “art-postcontent” after this add this code

<!-- Start demo code Add our post image to the category list -->
 <div id="demo-image">
  <?php the_post_thumbnail(); ?>
 </div>
 <!-- End demo code Add our post image to the category list -->

the cod should now look like this

<div>

 <div class="art-postcontent">

 <!-- Start demo code Add our post image to the category list -->
 <div id="demo-image">
  <?php the_post_thumbnail(); ?>
 </div>
 <!-- End demo code Add our post image to the category list -->

 <?php if (is_search()) the_excerpt(); else the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?>
    <?php if (is_page() or is_single()) wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

</div>

this is what you now have and it works great if you do not have lists or quotes at the start of your posts, and you can just add images to specific pots.

The only time you should change core theme files is if it is the only way to change something, have you ever changed a value in a style and forgotten what the original value was when you wanted to roll back the change, or added code in the functions.php and forgotten what you added, all out tutorials going forward are going to use two new files and one line of code in the core functions.php file to load them, you could as a rule add these to your themes as a best practice.

The first file is a css file with the naming convention of your initials plus custom.css so mine is ‘dsc-custom.css’, so when in the tutorial it say open your css file, you will know to open this one.

Open your text editor and add a few comment lines between /* here */ to say what the file is for and save it as described above into your theme folder, it does not matter that there is no code changes in the file.

Stylesheet

/* This file is part of the Digital Raindrops CMS-Tutorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This CSS file will be loaded last, make any changes to your styles only in this file
*/

Functions

this file you will save the same as above with a name of your initials plus functions.php, so mine is dsc-functions.php

<?php
/* This file is part of the Digital Raindrops CMS-Tutorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This php file will be called from the main functions.php, make any new functions in this file
*/
?>

Not impressed, so lets put this into practice, in your own ???-functions.php file we will add some code to load our custom stylesheet and if you are using 2.9 we will add code to give page and post thumbnail support, so lists can show the thumbnails if the plug supports it, the next tutorials will be using the thumbnail functions.

First if you are using 2.9 adding support for the thumbnails only requires three lines of code, here you should set the default thumbnail size.

<?php
/*This file is part of the Digital Raindrops CMS-Tutorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This php file will be called from the main functions.php, make any new functions in this file
*/

/* Start WordPress Thumbnail Support Code */
add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 200, 200, true); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size
/* End WordPress Thumbnail Support Code */
?>

Next we will create a function to load our stylesheet when the theme loads, the clever part with this is the WordPress hook wp_print_styles, which calls a standard function and loads the stylesheet, notice we have added the ‘if’ condition this will stop any fatal errors if a function is withdrawn, or you upload to an earlier version of WordPress.

<?php
/* This file is part of the Digital Raindrops CMS-Tutrorial for WordPress and Artisteer
Copyright 2010  David Cox  (email : david.cox@digitalraindrops.net)
Plugin Support: http://www.digitalraindrops.net/Boards/
This php file will be called from the main functions.php, make any new functions in this file
*/

/* Start WordPress Thumbnail Support Code */
add_theme_support( 'post-thumbnails');
set_post_thumbnail_size( 200, 200, true); // Normal post thumbnails
add_image_size( 'single-post-thumbnail', 400, 9999 ); // Permalink thumbnail size
/* End WordPress Thumbnail Support Code */

/* Start code to load custom stylesheet name the function with your initials */
function dsc_stylesheet() {
if (file_exists(TEMPLATEPATH.'/dsc-custom.css')) ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/dsc-custom.css" type="text/css" media="screen" />
<?php }
add_action('wp_print_styles', 'dsc_stylesheet');
/* End code to load custom stylesheet name the function with your initials */
?>

Our last line of code goes into the themes functions.php file, open the file and after the <?php line add the call to your functions file.

/* Start code to load custom functions file */
if (file_exists(TEMPLATEPATH. '/dsc-functions.php')){
include_once (TEMPLATEPATH. '/dsc-functions.php');
}
/* End code to load custom functions file */

Conclusion

You now have a tidy system to add styles and functions to your themes without changing the core code to often, and code that is portable between themes, but what was all that thumbnail stuff about?

On your Pages and posts you will now have a new form where you can select a thumbnail for your post or page, WordPress will crunch it to size for you as well.

How can you use this thumbnail, some plugin already support this, on the home page we are using  category posts plugin.

http://wordpress.org/extend/plugins/category-posts/

In the next tutorials we will be using this and the Dynamic content gallery on a theme, trying to get from this theme I created following a post on the Artisteer forum.

Finishing with gallery and three columns of categories as a tutorial not for production use.

If it is your first visit and you are looking for the walkthrough you will find the pages on the top menu, the CMS-Lite has child menu items.

Feedback on the posts is welcomed, support is through the parent website, see the support page for the links.

The plugin has taken quite a while to complete, it is free of any charge to use as you see fit, if you do not understand something you can ask, you can suggest how to improve the plugin, do this through the forum.

If you have themes you would like us to add to the collection email us from the support page, these can be both free and premium, you will get full credit and links back to your website services.

Get the Plugin HERE: