Adding More Widget Styles to WP Part 2

In my last post, I shared how you can edit the “simple text” widget style of your Artisteer 3 generated WordPress theme. In this post, we’re going to take things a step further, and I’ll show you how you can create as many block styles as desired for your theme. So, let’s get started!This assumes that you already have a working template that you want to use for your main theme. Make sure to get this template just how you want it before editing or adding your block code, and of course, make sure you save a copy first before doing any editing.

1.) The first thing you want to do when you are ready to add a new block style is to create the style in Artisteer and export that theme. You’ll want to go into your new “block theme’s” exported image folder and rename all of the images relating to the block you just created. I’d recommend renaming everything to block2, so for your blockheader.png file, you should now call it block2header.png and so on. Once you have renamed everything appropriately, add your newly named images to the image folder of your main template.

2.) Go ahead and go to the style sheet from your new “block theme” as well, and copy and paste all of the code relating to the block into a text editor such as notepad. It should start with /* begin Box, Block */
.art-block
and end with }/* end Box, BlockContent */ just above the post styling.

3.) Once you’ve pasted the code into your editor, you’ll want to go through and again, rename all references to block to block2 including urls to images (just make sure they match the actual image name you gave them).

Once you are sure that you have made all of the necessary name changes, go ahead and copy this code into your the style sheet of your main template.

4.) Now, in your main template, go to the wrappers.php file and find the following:
<?php
// $style = ‘post’ or ‘block’ or ‘vmenu’ or ‘simple’

Add your new block style with the others, which we’ve called ‘block2′ so the code should now look like this:
<?php
// $style = ‘post’ or ‘block’ or ‘block2′ or ‘vmenu’ or ‘simple’

5.) Now, go to the block theme template where you created your new block style, and open up it’s wrapper.php file. Find the following code: function art_block_wrapper($args) { Copy the entire code relating to the block wrapper (it stops just above function art_vmenu_wrapper($args…) and paste that into a text editor. Now, everywhere you see the word “block” change it to “block2″ See colored items below for reference.

function art_block2_wrapper($args) {
$args = wp_parse_args($args,
array(
‘id’ => ”,
‘class’ => ”,
‘title’ => ”,
‘content’ => ”,
)
);
extract($args);
if (art_is_empty_html($title) && art_is_empty_html($content)) return;
if ($id) {
$id = ‘ id=”‘ . $id . ‘”‘;
}
if ($class) {
$class = ‘ ‘ . $class;
}

$begin = <<<EOL
<div class=”art-block2{$class}”{$id}>
<div class=”art-block2-body”>
EOL;
$begin_title = <<<EOL
<div class=”art-block2header“>
<div class=”l”></div>
<div class=”r”></div>
<h3 class=”t”>
EOL;
$end_title = <<<EOL
</h3>
</div>
EOL;
$begin_content = <<<EOL
<div class=”art-block2content“>
<div class=”art-block2content-body“>
EOL;
$end_content = <<<EOL
<div class=”cleared”></div>
</div>
</div>
EOL;
$end = <<<EOL
<div class=”cleared”></div>
</div>
</div>
EOL;
echo $begin;
if ($begin_title && $end_title && !art_is_empty_html($title)) {
echo $begin_title . $title . $end_title;
}
echo $begin_content;
echo $content;
echo $end_content;
echo $end;
}

6.) Paste your newly edited code into your regular templates wrapper.php file just below the regular block code. (Please just use the code given here for a reference, but don’t try pasting it into anything, as it will most likely get all screwed up. As you can see, it always changes the directions of quotation marks just for starters.)

7.) Now, go into your regular templates options.php file and find the following code:
$art_sidebars_style_options = array(
‘block’ => ‘Block style’,
‘post’ => ‘Post style’,
‘simple’ => ‘Simple text’

8.) Add your new block name and style call to this as well. It should now look like this:
$art_sidebars_style_options = array(
‘block’ => ‘Block style’,
‘block2′ => ‘Block2 style’,
‘post’ => ‘Post style’,
‘simple’ => ‘Simple text’

9.) Finally, go to your widgets.php file and find the following code:
$art_widgets_style = array(‘default’ => ‘sidebar default’, ‘block’ => ‘block’,  ‘post’ => ‘post’, ‘simple’ => ‘simple text’);

Add in your new block title in the same format as the others. So, it should now look like this:

$art_widgets_style = array(‘default’ => ‘sidebar default’, ‘block’ => ‘block’,  ‘block2′ => ‘block2′, ‘post’ => ‘post’, ‘simple’ => ‘simple text’);

That’s all there is to it! You now have another block style that you can add to any of your widgets either in the Theme’s Options Panel of the Dashboard, or within any of the Widgets themselves. Enjoy, and please let me know if you have any questions or comments. As always, contact me if you are interested in a beautiful, custom WordPress or blogger theme design or any other print or web design needs.

© 2010 – 2011, reflectingthedesigner.com. All rights reserved.

Jennifer
February 4th, 2011 at 10:10 am

Thanks for the tutorial! So I have a question… I see that you just posted this a few months ago….. BUT… What version of Artisteer are you using? I don’t have a wrapper.php or an options.php file. I’m wondering if you’re using a different version that generated those files? I’m using the latest released version, Artisteer Version 2.5.0.31067. Are you using the 2.6 RC?

Any thoughts are greatly appreciated!!! :)

February 4th, 2011 at 10:38 am

Jennifer,

This is Artisteer 3. It’s beta, but still works well. Actually, you only have these options within the new version of Artisteer. I love some of the new features they’ve included! Unfortunately, you are still pretty limited with 2.5

Jennifer
February 4th, 2011 at 10:46 am

Just figured that out by reading the Part 1 of your tutorial. I went straight to Part 2 because it was all I really needed.

So you’re using the latest WordPress RC and the latest Artisteer Beta… Bummer! I’m not brave enough to install those on a production site. Guess I’ll wait a bit!

February 4th, 2011 at 11:32 am

I tried the newest version out on a couple of test platforms first, and was pleased to see how well it did. The only things that needed to be fixed were just some extra spaces in the CSS. I already tweak the code to get desired styles, but other than that, it works great!

August 7th, 2011 at 5:49 pm

I created the theme I am editing with Artisteer 3 – however I don’t have a wrapper.php or an option.php – do I need to alter something in my main theme in order to get those files?

August 7th, 2011 at 6:27 pm

I normally use Dreamweaver to edit any code and those 2 files didn’t show up in the folder exported from Artisteer 3. I found the wrappers.php & options.php files – I had to upload the secondary theme to wordpress to access them. However the function code : function art_block_wrapper($args) { does not exist in my secondary wrappers.php file (do I need to activate this theme for it to show up?).

August 7th, 2011 at 7:26 pm

You can find those files in an exported theme by looking inside of the library folder. Nothing is hidden in your files before exporting it. All of the core files can be edited before you upload the theme to WordPress.

August 7th, 2011 at 7:29 pm

As a note, in your wrappers.php file you’ll find the code that tells your theme how to treat each widget style. It won’t look exactly like the code above because every theme is different. However, you should be able to see the different sections for each type of style such as post, simple, block, etc.

Bilal
November 2nd, 2011 at 3:34 pm

One of the best tutorials i have seen on artisteer tweeks, i love that..makes job lot easier while i was looking to get something which let me style my one widget according to my desire (twitter widget styled).
I am using artisteer 3.1 and there is a change in it for step 5 and 6 (just a little).. instead of art_block_wrapper it’s now theme_block_wrapper….and so on…
hope you edit the best tutorial to keep it up to date… welldone.

November 2nd, 2011 at 9:32 pm

I’m glad you pointed out the change in prefix in the newer version of Artisteer. I did put a note on that in my category description, but of course that won’t show up in individual post view. One more thing to point out is that Artisteer now gives you the ability to change the prefix yourself or have no prefix (which I prefer doing in most cases.) Glad that the tutorial was helpful.

Clare
March 2nd, 2012 at 8:20 am

This is just what I’ve been looking for. I’d already worked out the basic theory in my head but your post now makes it clear where I need to put things.
Thank you so much for putting this together.

Marco
March 12th, 2012 at 2:05 pm

Hey Sarah, don’t bother answering my question in previous comment: just saw there is an independent style for each widget in WordPress administration. I was searching in the wrong place (Artisteer). You can delete my question! Have a nice day.

March 13th, 2012 at 3:01 am

I was just about to respond to tell you that, but glad you figured it out. :)

March 16th, 2012 at 7:47 pm

you have an example site of this topic

quite intersting because we are strugling to complete this
issue, and artisteer seems the only solution at the moment ;)

ps you have maybe some topics how to go from
psd to wp ?

March 16th, 2012 at 10:55 pm

I’ve done several themes with this method. For Cross Impact, I actually made a separate page template that incorporated two new sidebar areas side by side. You can see that here. I also offer a couple of free themes using this. My most recent is a tropical theme that has a sidebar within the header perfect for adding a slider plugin to. You can check it out here. It’s from a previous version of Artisteer (not the newest release) which is what this tutorial is taken from.

As far as going from PSD to WordPress, I simply get the basics set up in Artisteer, do a screenshot, and then make changes in Photoshop for header, background, etc. I add into Artisteer elements that I’ve created such as custom repeatable background graphics, header and menu elements, etc. Some times Artisteer doesn’t put out the image as I’d like. For example, I’d prefer to have a smaller repeating graphic for a large header than a huge image that takes longer to load. In that case, I export the theme, and simply replace the image I want to change with my own.

Hope that helps.

March 16th, 2012 at 7:56 pm

another question on this one

isn’t it much easier when exporting/saving template just to
change the prefix>>> here it is art
but then art2 ?

and then just only the images?
this only for first step
wrapper and block will stay the same

just asking, saving time ?

greetz marco

March 16th, 2012 at 11:03 pm

I’m not sure what you mean about the art or art2 prefix. Yes, you should always set those as desired upon export. This example just uses the standard export model if not changed. Also not quite sure what you mean about just the images and this being just the first step? The first steps involve you actually creating your different style within Artisteer and exporting those. That’s where changing the names in the css comes in. So, you would change all references to “block” in the css of your newly exported theme (the one for the new block style) to “block2″ so it renders correctly. If you don’t change the name, your new block style will look like the simple text because it’s calling for a styling class that won’t exist. Maybe you could clarify your question a little.

March 17th, 2012 at 12:22 pm

Q was confusing maybe, but no bother
your way is the wright one, there is no shurtcut ;)

and the result is splendid

see example >> http://vivatest.be/tafel2

and wp ecomerce is running fantastic
only login slide dashboard
does strange in it s activating
>>> first activate plugin then activate theme
otherwise the plugin doesn t work correctly

greetz marco from Belgium

PS how can a post/page commentbox be customized
like this one beneeth? Because it isn ‘t possible
in artisteer ?
(i mean without >>>>You may use these HTML tags and attributes:

)

March 17th, 2012 at 12:23 pm

You may use these HTML tags and attributes etc ……………

March 18th, 2012 at 6:17 am

This can be found within the comments.php file. Simply edit that file as desired.

April 28th, 2012 at 12:26 pm

Hi, Jumped in here but couldn’t find exactly what I was looking for. I have a theme which is made in artisteer & my task is to re-design some stuff.

I am trying to add & style widgets like: First widget area, Second widget area etc. By default, a new added widget area get a div class name using this code from sidebars.php : <div class="layout-cell layout-cell-size”>

The problem is:

A] I added a widget into area ‘First’ – styled it with 100% width. Looks great. It has a div class attached like:

B] I try to add another widget in area ‘Second’ – Whenever I add a text widget into it – the div class name changes to for this as well as above mentioned widget area + the size is reduced to 50% for both of them.

C] Due to div change – my style for A has gone!

D] I want to keep First Widget Area as 100%, Second & Third widget area as 50% and so on. I can manage that if I can get DIV CLASS auto naming fixed for all widget areas.

I think, since you have plenty of experience with these themes – thought of asking it here.

Thanks in advance :)

Sarah
April 29th, 2012 at 3:54 am

First of all, this post is about changing the styling options of a widget area, not editing or actually adding a sidebar area. I have a separate post for that. You don’t want to edit the positioning of the sidebar by adjusting the widget styling.

If you would like to adjust the size of the sidebar space or add new sidebar space in the way you mentioned, the easiest thing to do would be to simply imitate the styling of the footer sidebar widget space. You will need to edit the sidebar.php, file, create a new sidebar php file for the specific sidebar areas you want to add, then style that area accordingly.

January 1st, 2013 at 7:06 pm

Hi Sarah:

Happy 2013!
Just curious whether this technique will work in Artisteer 4?

Thank you :-)

~Scott

January 2nd, 2013 at 1:27 am

Yes, the widget styles themselves is done in the same basic way.

LEAVE A COMMENT

Powered by sweetCaptcha


Anti-Spam Protection by WP-SpamFree