We were seeing a few comments on using a different color on a different page, and the menu items with a color bar underneath, so we though we would have a look at see what we could do.

This is the result of a few hours work and we think it is quite fun, again it is yours to download use, change, delete, first things first is to have a look at the theme in action, you can do that here Color My World, then you may want to download it, that’s easy no registration just download it now Color My World (455) .

This theme is does not have thumbnail support or a widgetized footer so we have gone with the traditional two sidebars, after you have created the pages and are happy with the top level menu item you will need to apply the templates to the pages, we will cover this in this post.

-

Color Options

We designed the theme with neutral color choices for the content, and have given you the ability to change the colors to your own.

The Menu colors are in the sequence you set them in the admin page, you can find this after you activate the theme in “Appearance > Theme Options”, you can see this in the next screen shot.

We have included the header with the theme, you can replace the image in the folder, there is no option in the theme settings, all you need to do is change any of the colors below to your own choice and the theme will update when you save the options, you need to enter the full hex code which looks like #FF00FF.

If you are stuck for ideas for a color scheme then why not get some ideas and inspiration from Colour Lovers you will see the hex codes, write them down and enter them in the admin panel.

Page Templates

When you add pages you will need to apply the correct template, we have included 6 standard and 6 wide templates, the page numbers start after the home page from 0-6, you can apply the templates from, Pages > Edit > select the page and “Quick Edit” as in the screen shot below.

For the coders out there that would like to know how it works we will be following this post up with another functional post with code examples.

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

Some of the WordPress groups on LinkedIn the members might be to high a level for the posters in the Artisteer forum who require specific answers on Artisteer themes and templates.

Anyway I have created a LinkedIn group ‘Artisteer Online User Group’, feel free to join in we do not mind the level of questions you ask or answer, you can showcase your website, seek critique, ask for help, post a job, post an article link, network with other users.

Please Join me on LinkedIn Artisteer Online User Group

David

Sites in One Day:

We would like to welcome a new contributor of themes and services to Digital Raindrops,  Sites in One Day are already active and have contributed six themes with two variants left and right sidebars, these themes have flash headers, not just one but a number of different flash headers with instructions on how to change them, we are looking forward to more themes.

CMS-Lite Website:

The cms-lite plugin and website has been released, already we are seeing over 2000 visitors a week for the cms-lite plugin and our latest tutorials, many thanks to all visitors.

Featured Free Theme:

Our featured free theme for March is the Digital Raindrops cms-portfolio theme, this feature packed theme has a clickable logo, header information pane, cu3er slideshow, WordPress thumbnail functions with our added links and mouseover effects, four columns of images on the home page, and two with excepts on the categories page, and not forgetting the four panel footer area, we are proud of this theme and want to, share it, get it,  change it, use it, here is the overview and you can download it from the main Digital raindrops website with the benefit of being notified of upgrades, and thier will be a lot of new functions added to this theme, view it here, and read about it here:

If you would like to contribute tutorials, themes, free or premiun to Digital Raindrops the feel free to contact us: admin@digitalraindrops.net

Thats all folks!

This is free version of our portfolio theme and is a cut down version of a commercial premium theme we will be releasing in April, with this version you will need to edit the files where the commercial version will have a setup page and a number of additional pages and options.

This theme is not a typical blogging theme and designed to promote yours or your customers professional skills or services, so it needs no sidebars and is not adSense enabled although there are many other themes and plugins that could deliver these.

Credits and plugins

You will need to have the cu3er slideshow  WordPress plugin from 18Elements which uses a category to feed the display, you can view: The Portfolio Theme here if you have visited the portfolio site recently you might need to refresh your browser, ctrl+F5, and you can download the free version from here. CMS-Portfolio Theme (862)

If you like the fancy bookmarks here and on the single post pages then that plugin is Sexy Bookmarks which you can download and install on your blog.

The thumbnail code in this ‘free theme’ was created based on a post by Mark Jaquith here and we would like to thank mark for making the code easy to follow.

cu3er settings

A picture is worth many words so here are the settings you will need to use, the category ID will be the one you use for the slideshow:

Footer

When you activate the theme you will have four footer areas to populate however you want, these replace the need for a sidebar as you can cover most of what you want with these.

Header Logo

To enable the logo first you must replace with your own logo the ‘logo.jpg’ file (670 x 106 pixels), this is in the theme images folder, then you need to copy the ‘cms-header-logo.php’ file in the cms-addons folder into the themes folder, this will hide the blog title and show the logo.

Header Information

Open the ‘cms-header-info.php’ file in the themes folder, there are four information options in this file, change them to your own values, if you want a URL link then you must have the http from a website or the @ for an email and fill in the $infoName value, looking in the file and at the header image or our portfolio website will help with setting this up.

Changing the Menu Options

You can change the menu options by following the method in this tutorial here:

Changing the Colors

You can change the colors of the links to your own values for the information panel, Post Headers and footer content in the themes cms-colors.css file, you will need to change the hex value for each element to your own requirements.

Body Image

The body image can be found in the images folder you can change this to your own, the header is transparent which gives a rather nice effect.

That all there is really, once again if you like this theme share a link to this post on your own website, leave a comment or 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.

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 (198)

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 (18)

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: