Custard Media Theme

In this tutorial we will be using the methods outlined in the Best Practices post, this theme modification tutorial was created after we read a post in the Artisteer forum where the question was asked can Artisteer do this?

target

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.

screenshot

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

Get the starting theme files: Custart Theme tutorial (Start) (1064)

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

Settings-1

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

Settings-2

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.

Settings-4

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.

Settings-3

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

Settings-5

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

final-1

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 Media Theme (Final) (934)

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.

Notice

Code disclaimer information
This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.

All sample code is provided by www.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

We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of any themes or files is restricted to site supporters.

You can register for a 10 year ‘Free Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.

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

5 thoughts on “Custard Media Theme

  1. Silly question but am I creating a new fucntions.php file or am I using the one in the wp-includes.

    I keep getting a blank page that says classes=cleared. I think I missed a step

  2. Silly question but am I creating a new fucntions.php file or am I using the one in the wp-includes.

    I keep getting a blank page that says classes=cleared. I think I missed a step

  3. Silly question but am I creating a new fucntions.php file or am I using the one in the wp-includes.

    I keep getting a blank page that says classes=cleared. I think I missed a step

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Connections

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

Related Posts

Posted in Themes

tabbed

We were searching for code to create a tabbed admin page for our WordPress to facebook Plugin, and we found a very nice website with the code we needed, the website is recommended as one to visit. It took a … Continue reading

Read More