Migrate Artisteer Themes to WordPress 3

We cannot say how easy it is working with child themes, however we understand that some will prefer editing the original themes, so we are following the child tutorials with a simple two file upgrade and a set of options to add the new features to existing Artisteer 2.3 and 2.4 themes as and when they might be needed. 

You can download the theme migration files Here: Migrate Artisteer to WordPress 3 (1471)

We have already created a series of tutorials and we will be linking to them for reference points and code changes, we will tell you what you need to complete from each section, and you will be able to see the screenshots, we are going to take a step by step approach.

To add the migration files to an existing theme copy the two files from the zip file to the themes main folder, open functions.php and paste in these two lines positions 3 and 4 that is it there is no change yet to the theme.

<?php
load_theme_textdomain('kubrick');
/* Digiatal Raindrops WordPress Version 3 Support */
if (file_exists(TEMPLATEPATH. '/custom-functions.php')) include_once(TEMPLATEPATH. '/custom-functions.php');

Now we can open up the first migration file custom-functions.php, you will see there is a lot of code but the only parts we need to change is the settings, as you can see they are all set to false we will switch them on as we go through the different steps.

// Choose Which Options to activate, for Version 2.3 do not activate vertical menu (vmenu.active)
$customSettings = array(
 'theme.changeHeader' => false, //Allow the header to be changed
 'theme.selectHeader' => false, //Allow the header to be selected from list
 'theme.thumbnailHeader' => false, //Select to use thumbnails for page and post headers
 'theme.headerHeight' => 0, //Enter the header Height
 'theme.headerWidth' => 0, //Enter the header Width
 'theme.noTitleTextColor' => false, //Allow the title color to be changed
 'theme.changeBackground' => false, //Allow the header to be changed
 'hmenu.active' => false, //Horizontal Menu Support
 'vmenu.active' => false, //Vertical Menu for 2.3 do not activate vertical menu (vmenu.active)
 'vmenu.simple' => false, //Select false for collaping Vertical Menu effect default expanded
 'vmenu.title' => "", //Enter a title for the Vertical Menu blank for none
);

Header Functions

There are six setting for the header section lets look at these first:

  •  theme.changeHeader : This value will enable the admin to to upload and change the main header image.    
  •  theme.selectHeader : This value will enable you to supply a set of predefined header images for the admin to select from.
  •  theme.thumbnailHeader : This value will enable the admin to to upload and change the header image for any post or page.
  •  theme.headerHeight : The height of your header image from the images folder
  •  theme.headerWidth : The width of your header image from the images folder
  •  theme.noTitleTextColor :  Set this to true if you are not dispalying the title text or do not want to change the color

 Changing the Header Image and Color

Set the theme.changeHeader => true, find our header image in the themes images folder view properties and set the width and height values from our header image like in this example theme.headerHeight => 150, theme.headerWidth => 960, if we do not want to be able to change the text color then we just set the theme.noTitleTextColor => true, 

Open our header.php and we will find this code <div class=”art-header-jpeg”></div> insert a return between the >< all we need to do is paste in the code below where we inserted the return.


 &amp;amp;amp;lt;?php
  // Start Twenty Ten theme code - Check if this is a post or page, if it has a thumbnail, and if it's a big one
  if ( is_singular() &amp;amp;amp;amp;&amp;amp;amp;amp;
   has_post_thumbnail( $post-&amp;amp;amp;gt;ID ) &amp;amp;amp;amp;&amp;amp;amp;amp;
   ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&amp;amp;amp;gt;ID ), 'post-thumbnail' ) ) &amp;amp;amp;amp;&amp;amp;amp;amp;
   $image[1] &amp;amp;amp;gt;= HEADER_IMAGE_WIDTH ) :
   // Houston, we have a new header image!
   echo get_the_post_thumbnail( $post-&amp;amp;amp;gt;ID, 'post-thumbnail' );
  else : ?&amp;amp;amp;gt;
   &amp;amp;amp;lt;img src=&amp;amp;amp;quot;&amp;amp;amp;lt;?php header_image(); ?&amp;amp;amp;gt;&amp;amp;amp;quot; width=&amp;amp;amp;quot;&amp;amp;amp;lt;?php echo HEADER_IMAGE_WIDTH; ?&amp;amp;amp;gt;&amp;amp;amp;quot; height=&amp;amp;amp;quot;&amp;amp;amp;lt;?php echo HEADER_IMAGE_HEIGHT; ?&amp;amp;amp;gt;&amp;amp;amp;quot; alt=&amp;amp;amp;quot;&amp;amp;amp;quot; /&amp;amp;amp;gt;
  &amp;amp;amp;lt;?php endif;
  // End Twenty Ten theme code - Check if this is a post or page, if it has a thumbnail, and if it's a big one
  ?&amp;amp;amp;gt;

That is all done save the file and test in our local environment, for a look at more detail and some screenshots check out the child theme tutorial here:

Selecting Default Headers

A nice feature of WordPress 3 is the built in functions to allow theme developers to offer a selection of built in headers, to do this we set theme.thumbnailHeader => true and create a new folder inside the images folder called headers.

Then we can create a few headers with the same dimensions as our default header, and a thumbnail image with a scale width of 230px, we have developed a function that will read the names of the images in this folder, so no need to change any code just give them nice names and offer them for selection on the admin page.

 That is all done save the file and test in our local environment, for a look at more detail and some screenshots check out the child theme tutorial here:

Changing the theme background

To offer the theme admin the ability to change the background is about one minutes work, so if you would like to be able to upload a different  background image or color just  set ‘theme.changeBackground’ => true,

Open header.php and find the line <body> just change it to:


&amp;amp;amp;lt;!-- Add Background Support --&amp;amp;amp;gt;
&amp;amp;amp;lt;body &amp;amp;amp;lt;?php body_class(); ?&amp;amp;amp;gt;&amp;amp;amp;gt;

 That is all done save the file and test in our local environment, for a look at more detail and some screenshots check out the child theme tutorial here:

Custom Styles

In the second file custom-style.css we will find the settings we need to update for the Horizontal Menus, the top blocks of code are the ones you may need to change, we have set the colors to inherit, you may want to change these to hex codes like #FF00FF, the other settings are for the sub-items on the menu and details of where to find the values from Buds Tech Shed tutorial which we used for one of  the code examples. 

These are some of the setting you may want to change if you use the Horizontal Menus


/* Start add Version 3 Menu Support from Buds Tech Shed */

.art-menu li.current-menu-item a .l, .art-menu li.current-menu-item a .r ,
.art-menu li.menu-item-parent a .l,.art-menu li.menu-item-parent a .r
{
   top:-58px; /* Check Buds tutorial for setting this value */
}

.art-menu li.current-menu-item a .t, .art-menu li.menu-item-parent a .t
{
   color:#0C0E0C; /* Check Buds tutorial for setting this value */
}
/* End add Version 3 Menu Support from Buds Tech Shed */
/* =Secondary Menu from the twenty ten theme
-------------------------------------------------------------- */

/* The additional menu structure */
/* This section is where you can style the menu to your theme */
#access .menu-header, div.menu
{
 width: 874px; /* change to your theme width */
}

#access {
 width: 874px; /* change to your theme width */
 background: inherit; /* Change to color Value #E0E0E0 */
 border-bottom: solid 1px inherit; /* Change to color Value #E0E0E0 */
}
#access .menu-header,
div.menu {
 font-size: inherit; /* change if you want a different size */
}
#access a {
 text-decoration: none; /* Change Value */
 color: inherit; /* Change to color Value #E0E0E0 */
 line-height: 28px; /* Change Value */
}
#access ul ul a {
 background: inherit; /* Change to color Value #E0E0E0 */
 line-height:1em; /* Change if required */
}
#access li:hover &amp;amp;amp;gt; a,
#access ul ul :hover &amp;amp;amp;gt; a {
 color: inherit; /* Change to color Value #E0E0E0 */
 background: inherit; /* Change to color Value #E0E0E0 */
}
#access ul li.current_page_item &amp;amp;amp;gt; a,
#access ul li.current-menu-ancestor &amp;amp;amp;gt; a,
#access ul li.current-menu-item &amp;amp;amp;gt; a,
#access ul li.current-menu-parent &amp;amp;amp;gt; a {
 color: inherit; /* Change to color Value #E0E0E0 */
}

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
 color: inherit; /* Change to color Value #E0E0E0 */
}

It is not as scary as it may look, if you only change the values that you need to for your theme.

Horizontal Menus

We covered the menus in detail in our child theme tutorials and would suggest that these are the reference points to use, you will see how to setup and change the code in header.php.

Main Menu:  set ‘hmenu.active’ => true, and for more detail and some screenshots check out the child theme tutorial here:

Second Horizontal Menu : set ‘hmenu.active’ => true, and for more detail and some screenshots check out the child theme tutorial here:

Vertical Menu Artisteer 2.4 

 Set ‘vmenu.active’ => true,  to activate the Vertical Menu, that is all you need to do apart from set it up in the admin section and drag the new widget to the sidebar, options  ‘vmenu.simple’ => false,  select true if you do not want a collaping Vertical Menu effect,  ‘vmenu.title’ => “”,  you can enter a widget title Vertical Menu blank for none.

 For a look in more detail and some screenshots check out the child theme tutorial here:

Credits

Code Samples: BudsTechShed 

Code Samples: Artisteer Generated Theme

Notice

Note: we do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

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 some themes and files is restricted to site supporters.

You can register for a 10 year ‘Free Supporters Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content some of these 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.

Leave a Reply

Connections

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

Related Posts

Posted in Migration

Child-8-12

To much information and still finding it a bit scary, lets us make it very easy, this quick guide is all the code changes except the styling, there are only three code block to do honest, first we need to find the header.jpg in … Continue reading

Read More