Investica Part One

This is the first in a series of posts and code tutorials we are running in April 2011, these are Artisteer based and there has been a slight delay, as a new version of Artisteer was released on the 4th April 2011 and we halted the tutorials while we looked at the changes.

In this series we are looking to convert a WordPress theme to be as close as we can get it to the Artisteer html template, when we change from html to WordPress in Artisteer we loose a lot of the home page layout, the html layout is what we will try to recreate.

The Theme

These are the two screenshots of the html template and the WordPress theme, on the left is the html template, over the next few weeks we will add some of the layout to our WordPress theme, each post will be supported by starting and ending files to download, these are so we can compare code, you will need to download at each step, as only changed files will be in the download.

We have created a starting theme, so we are all working on the same files, we were going to direct you to the Artisteer website for the downloads but they are created with an earlier version, we are also including the artx file in the download, this was saved with the latest “Version 3 RC” from the 4th April.

thumbnail

screenshot

Download Starting Theme: Investica Starting Theme (1069) 

Download Lesson 1 Files: Investica Part One (1010) 

Visit the Artisteer Html Version of the Investica template, you might want to download the html version, and visit the Investica Digital Raindrops tutorial WordPress Version

Getting Started

Like always use a local WordPress install for development, this makes it easy to debug and upload files, if you are not sure how to setup a local environment read the Getting Started post from the twenty ten tutorials

Upload or copy across the WordPress theme and from Admin > Appearance and activate the Investica theme, we will need a text editor like NotePad++ which is a free editor with a built in syntax highlighter.

Target

The target of the first part is to set two different thumbnail sizes, one for the large image for the home page and setting the default thumbnail sizes in code, this will become the featured image size, and new files to create a custom stylesheet and functions file.

We will not be working with a child theme in this series as we have not had time to test the latest Artisteer as a child theme, most of the code is structured for child themes, however reading the Artisteer Forum it looks like most developers like to make the theme in one folder and add their own elements into the mix, later tutorials will be more focused on child themes.

Lets Get Started

There are a couple of small changes in the Artisteer functions.php file, in the themes folder open the file in our favourite editor, one of the first things to notice is that the “art_” prefix has gone Artisteer now use “theme_” as the prefix.

At the end of the functions.php file we add calls to the two custom files we will add next, by using the condition file_exists() WordPress will not error if the file does not exist.

/* Add our function file and stylesheet file this keeps our changes apart from the core theme code */
if (file_exists(TEMPLATEPATH .'/library/inv-functions.php')) include(TEMPLATEPATH .'/library/inv-functions.php');
if (file_exists(TEMPLATEPATH .'/library/inv-style.css')) wp_enqueue_style('inv-style.css', get_bloginfo('template_url') .'/library/inv-style.css', null, '1.0');

That is all we do for now in functions.php until later in the series.

inv-functions.php

Create a file in the /library/ folder called inv-functions.php and we are adding just a few lines of code in this file for part one by adding the lines below, here we are setting two images sizes to use in our theme, the small thumbnail for the archive, index, search and any other lists we choose.

The larger 250 * 170 will be used for our home page view, and later on a news page, we are using the featured image and not the first image from the post, that means we can size and control the presentation layer of our website, notice that the thumbnail is three fifths of the larger image this gives a proportional image, nothing worse that odd looking rectangle and square images on a website .

<?php
/*
We want to crop the featured images for our list thumbnails
And the home page displays
These are WordPress standard functions
*/
set_post_thumbnail_size(150,102);
add_image_size( 'homepage-thumbnail', 250, 170, true ); //Cropped
/*
We need to set the thumbnail sizes for our archive lists
Changing the WordPress Settings for Admin > Settings > Media
*/
if(get_option('thumbnail_size_w')!=150)update_option('thumbnail_size_w',150);
if(get_option('thumbnail_size_h')!=102)update_option('thumbnail_size_h',102);

defaults.php

In the /library/ folder locate the file called defaults.php and we are changing the thumbnail width and height from 100 to the new sizes as default, look for the lines below about line 28 and change the two sizes, adding a comment line so we know what we changed.

/*
Changed the Artisteer Default settings for the thumbnail Height and Width
*/
'theme_metadata_use_featured_image_as_thumbnail'    =>    1,
'theme_metadata_thumbnail_auto'    =>    0,
'theme_metadata_thumbnail_width'    =>    150,
'theme_metadata_thumbnail_height'    =>    102,

If we look at the Admin > Appearance > Theme Options we can see the changes, if we do not see these we reset the theme options.

lesson-1-1

Content

Using an empty database create about four test posts, we use the Lorem Ipsum Generator and look at the home page, we should now have a list of post with titles.

lesson-1-2

Prepare some images to use as thumbnails, for best results we make these consistent over our website, add a featured image from the Post > Edit > ‘Set Featured Image’ this can be located in the right column upload the image and set this as the featured image.

lesson-1-3

lesson-1-4    

If we visit the home page we now have a 150 by 102 featured image, but it is starting the post not in a list view, so we will have to change the view to show the featured image and excerpt.

To do this we go back to the default.php Artisteer have already given us an option to use the Excerpt, we find the line and set this to true, in the code 0 = false and 1 = true.

‘theme_metadata_excerpt_auto’    =>    0, find and change this to ‘theme_metadata_excerpt_auto’    =>    1, //Set True

The default for this setting is now set to show excerpts in all list, previws again and we can see this on the home page.

lesson-1-5 

In part two we will be creating a two column layout using the larger image, if we navigate to the uploads folder we can already see that WordPress has created our larger image ready, this is proportional at 300 by 204.

Notices

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

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://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

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

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

2 thoughts on “Investica Part One

  1. Great Post. I’m a bit confuse because the artisteer options are saved in file “funtions.php”, and you say that we must change the file “defaults.php”  for thumbnail settings and  theme_metadata_excerpt_auto’    =>    1
    Thanks in advace
    Emilio

Leave a Reply

Connections

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

Related Posts

Posted in Artisteer

googlefonts11.png

As Artisteer users one of the first things many of us do is add code to hide the titles, we often do this for the simple reason that the default fonts are safe and boring, so in this post we … Continue reading

Read More

Posted in Investica

lesson-2-thumb

In part one we added two sizes of thumbnail image to our theme, if we look at the Investica Template we can see that there are posts in two columns with a wide image, in part two we will create … Continue reading

Read More