Welcome again to the bi-weekly release here in the WP Paragraphe Shop. If my goal is indeed set up every two weeks a new, cheap theme for WordPress, I will keep everytime the higest quality and a singular approach to every one of the designs.

This time, I’m presenting to you the Social Karma Theme, a classic, blog styled theme with some special layout and a notable typographic work.

I invite to you to test directly the demo.

As usual, I’ve used sIFR, a splendid 404 page (click here), some super-cool styled tags to surprise positively your readers (with the text-shadow property, for those browsers accepting the last CSS rules, plus some extra borders, rounded corners, and hovering effects), some background textures (and shadows) for the header, and a fresh layout to break the tubular structure so often found in the blogosphere.

The theme is as well a balanced commercial product : just 25$ to acquire a total presence, for an otherwise highly priced custom project.

Also, and as you can expect, I’m here to work on all those little custom details that you can eventually demand for your theme, for no extra charge.

The theme comes as is, but I can implement by demand some extras, like :

- implementing videos in the layout
- showing thumbnails in excerpts
- plugin recommendations
- sIFR customitzations…

Does the theme support widgets ?

Yes. Three widgets in the footer, and one in the sidebar : for recent comments, recent posts, RSS, Admin Log In/Out links, advertisments …

How do I set an ad ?

You must go to the Widgets Section in your WordPress Admin, then locate a Text Widget in the area of choice (three columns in the footer, one in the sidebar), and fill it with a path to your image/ad. Remember to wrap that image with the pertinent hyperlink.

Can I modify which social icons to show in the header ?

Sure. The theme comes with one of the bests icons set of all the times : Aquaticus Social Icons. They are a true masterpiece, and you have many of the main internet services covered with its own icon. I include all of them, and in the header there’s just a selection.

You can send me some instructions to use that combination or that other that you’d like, and I’ll do it for you, or you can open the required file (header.php) and make there the changes, with the included icons or with some other set that you download from the net.

How it looks with IE6 ?

It looks fine : I’ve included a png fix, as well as a special css for it. The icons wont fade in and out … but once again, IE6 is in process of extinction, so it wouldn’t be a major problem.

The theme have a clean, valid code as HTML 4.01 Strict.

Special note for developpers working for a client : “Please contact me before puchaising !”

You are very welcome to post here in the comments your impressions, opinions and suggestions !

Thanks for reading The Paragraphe.

This is a smooth, clean and minimal Premium WordPress Theme, specially conceived to run a light magazine, an arty blog (fashion, music, design…), and even some academics network, or just a personal tool to publish your thoughts, while providing at the same time a strong focus in aesthetics.

The theme presents all the contents inside an explicit grid, inspired by the japanese typography, and it’s carefully commented to apply any changes – in the fonts and the colors – to match your style always you need to.

The theme is both a solid, finished ensemble of files, and an open lab to apply some customization, setting up a unique theme suiting your personal needs.

For individual users (and for collective projects as well), Hokkaido WP Theme will spread your ideas around the world screens.

Goodies :

1. Original Layout in the Index : 5 columns, showing posts chronologically.
2. Cool structure in the Article’s Page : with two divs, one for the visuals, another for the text.
3. Easy navigation in the Archives Page.
4. Counting Posts in any paginated page : index, archives.
5. automatic sIFR effect : with Rockwell as a default, but you can change it for any font in your computer (see below).
6. Widgetized space deployed across 5 columns.
7. 404 Page : showing all the pertinent links to invite your users to read more whether they arrive to some “gone content” (which happens more often than desired).
8. Super-cool styles for the comments (yes, threaded comments too !) : memorable, sweet, and social.
9. Easy styling in the CSS archive, specially for beginners (just look at the end, uncomment and overwrite).
10. Toll free support for tips and customizations.
11. 50$ Premium WordPress Theme for a personal license ! (75$ for the developers license : your client will be happy to pay for a good investment anyway).

If you plan to use Galleries please write me back and I’ll provide you with a custom CSS and an extra image.php file. The reason is by default all the images are hidden in the main article’s text, to have that special layout.

To install another font here are the instructions :

Go inside the theme’s folder – this is the path : /sifr/flash/sifr.fla.

Open sifr.fla, double click in the whitespace, select the text, and select a new font for it.

Then, export the work to a .swf file, with the default settings you’ll find after clicking in ‘export’, under the File menu in Flash.

Save the file in the same directory (/sifr/flash/), and, finally, open functions.php to change the font name, twice.

Another step is required ; go this path in the theme’s folder : /sifr/js/sifr-config.js, and change every “rockwell” word with the name of your new font.

“I haven’t Flash, how to do it ?”

Answer

There are several on-line tools to upload a font file, and process it to receive a .swf file.
Here’s one of the best :
sIFR Generator.

“For an extended documentation about sIFR, please visit Novemberborn“

Credits go to :

Mark Wubben for sIFR.

Pat Dryburgh, for his the WP-sIFR mix.

Brand Spanking New, for their super-cool icons.

And …

The Japanese XIX century Artwork like this (Yoshitoshi, 1867-1880).; via Bibli Odissey

I was thinking in create a solid and flexible, standard WordPress theme, to allow any kind of internet publisher having at their disposal a comfortable tool, a consistent design, and a clean, validated code, in order to start a long run project.

This way was how the Peppermint Theme was born. As curated in the inside as it is in the outside, easy to browse and work with – both, for the readers and for the admins-, Peppermint arrives as a new contribution to the blog / magazine format, with all the needed features to acquire a wide, memorable space in the net.

Please note, the theme’s price include all the customizations that you as user plan for your project, so you can ask me for any feature to implement, for no extra fee.

Default features of The Peppermint :

Pages

A transparent dark film is the background for the top Pages in the header. The space, 950 pixels wide, have room for a true battery of Pages, reflecting a further hierarchy, and showing the static sections and sub-sections of your Blog.

Useful not only for the About, Search, or Contact Pages, but also for an access to any kind of taxonomy space, where to list tags, categories, links, and archives by date, author or subject, as well as for those special Pages that your Plugins can require, or just some custom spaces to deploy a “surrounding” architecture around the main site’s content.

By default, all of the Parent Pages will be listed, alphabetically.

Header

Maybe one of the most prominent elements in the design is the green, textured header. A little bit of Photoshop magic, and a clear, white Georgia font will do the work for us in order to gain the attention and the first impression in the site : we have content to deliver.

Next to it, a soft but clear Search Box, driving to the Search Results Page, will keep in every new page loaded, with a particular color palette to offer a fresh detail to the most ‘researchers’ between our users.

Menu

The Main Menu is conceived to display specific categories, that you will choose from the Admin Panel. Every item will print a category by its Slug Name, slug that you will assign easily, without changing any ‘real’ cat’s name.

Our seven Main Cats in the Menu are called whether they get marked, by you as an Admin, with the following peppermint-slugs (invisible for the user, visible for WordPress, and that you must quick-edit, in your cats).

They are :

1. firstcat
2. secondcat
3. thirdcat
4. fourthcat
5. fifthcat
6. sixthcat
7. seventhcat

That way, the category slugged as ‘firstcat’, whatever its ‘real’ name be, will be printed (with its real, normal name) in the first menu item.

The blog’s description and the author’s archive little red link

In order to optimise the receptions in your site, the users will receive a welcome message, again writable from the backend : we are here asking to WordPress for printing our blog’s description, that we will use in all of its power.

A little link will sign that welcome message, bringing to the user, if it’s clicked, to an archive page, showing the latest post written by the main editor in your site.

To specify which exact name will be shown here, you must go the Users sections in your Blog, and change the public name with which you as an admin will be identified by your users.

The Featured Ones

Now it comes the innovative part. How to find a way to show some featured content that we accept as balanced, but that be distinctive at the same time ? How to use a style to organize the best of the week, that everybody will recognize as yours, and find it useful … because appealing ?

Several solutions for us to do it :

Featured Series : three special categories that you will create, and name as you wish, are shown at the first look. They must have as a slug (invisible for the user, visible for WP) the following keynames :

1. featured1,
2. featured2,
3. featured3 ; again, a simple quick-edit in your cats is the only step required to set them up.

Rounded corners, encapsulated content : all is about the user’s path.

Cropped images : letting know partially, but visibly, the nature of the article to come (some changes in our CSS can restore a conventional image).

Cool Excerpts : über-styled excerpts to put in value our recommended posts, in grey & blue, with some sweet dots towards the single article.

All of our latest posts

And finally, to make happy the more focused users, a big list (the number of posts to show are controlled in your WP settings) of the last posts is waiting to be read, showing date, tags and number of comments.

The Footer : Widgets ? Widgets.

We are ending our Index Page with (oh, surprise) the Footer. Obviously, a non-widgetized Footer is something in peril of extinction : we need archives, we need recent comments, we need lists of links, we want custom text snippets, credits, pages again, recent posts across our whole site. And we have them all.

By default, the theme is listing the wordpress blogroll, so you must go to your Widgets Area and choose what you want to show in it.

The Article’s Page

Every Article have some special goodness for you. First of all, we have some social icons, already prepared for making those vital recomm’s and spread your articles all around the net. The services covered are :

1. Twitter
2. Stumble Upon
3. Digg
4. Technorati
5. Magnolia

If you wish that I implement another social service for you, for example Facebook, you just have to ask for it.

Then we have, with a cool fade in / fade out effect (like with the social icons), the possibility to print the article, and, thanks to the Blueprint CSS framework we added to our standard styles, allow to the printer skip all of the unnecessary images that can disturb a further lecture in paper.

Third, we will find a Resume Section before the comments, where to find 5 (or more) Related Posts by Category, thanks to the super-quick plugin from the Sergej Müller lab, joining the categories the post belongs to, which will bring to their correspondent archives, as well as the tags with which the post is marked (going to the tag’s archive).

We must mention here the special layout in our archives, a true luxury in this days of the minimal design.

Finally, again in the Article’s page, we have a scroll feature, driving to the comments from the top part of the article, and restoring the user to the top once he/she arrives at the end.

A smooth movement, installed thanks to jQuery (and which quickness will be in relation with the amount of written material you have in the post), will bring the user avid of comments to the so-wanted debate.

Well, and what more ?

There’s more. Functions.php, one of the theme’s files, will protect your site from a major range of attacks just deleting the version of WordPress you are running, and which hackers need, in order to do their bad things. We will found there also (in functions.php) a little bit of code implementing the same size for all your words whether you install a Tag Cloud.

I can mention too the custom excerpts in the featured section, which have no brackets “[...]” at the end, and the wonderful set of Coquette Icons courtoisie of Dry Icons directly for you.

We won’t forget neither the Current Date and custom message in the footer !

And … if you have some ideas, which could convince you to ask for the theme, don’t hesitate it ! Use the comment form below.

Cordially,

Ignacio

Credits :

• Coquette Icons, several series
• jQuery, our Smooth Operator
• Local Scroll jQuery Plugin, our second Smooth Operator too
• The super-quick Related Posts by Category, by Sergej Müller.

• Fast-loading theme.
• Elegant dark wood Background.
• Cool header, that you can modify in the CSS file through the WP Editor : Purple, Blue, Cyan, Green, Brown.
• Rounded Corners in every post.
• Subtle grid for a fixed, organised lecture (The Blueprint CSS Framework)
• Greyish, well-spaced layout sorrounding the main text tube, to make your readers feel comfortable during their lecture.
• Three columns footer layout, for a spectacular end, in every post. Load on your bookmarks !
• Widgets section in the header, to display your Recent Posts & your Recent Comments anywhere in the blog.
• Widgetized Footer & Sidebar : to list your archives, the log in / out link, some text snippet, the Search box …
• Custom excerpts : forget those criminal brackets “[...]” in your excerpts, they are now sweet “(…)”.
• Custom excerpts again : some 20 words to display.
• Appealing Purple/Blue/Light Grey Palette.
• Main Pages & Cats listed horizontally in the header.
• Valid Code as HTML 4.01 Strict ! (WP sometimes throws some “/” sign closing the img tags, but it’s still valid).
• Fine in IE6.
• Good-looking theme, to serve your content in an adult, discreet, optimized way.
• Consistent, grown, memorable global effect.
• Header, Footer, Sidebar widgetized for a free customitzation.
• Good typography curation.
• Versatil use : between the personal blog and the magazine style – a well-packed theme.
• Clean, fast-loading code.
• Optimized CSS images for a speedy load.

If you want to try some changes in the theme, here are some tips :

“How do I set up the Cats & Pages in the header (the main Menus) ?”

Answer:

By default, the theme will select ALL of your Pages to show in the top Menu, and the 9 first Categories (a non-infinit number) you have created (in chronological order). To change that, open head.php and head2.php (but no the normal header.php), provided with the theme, and change that in the end :

<div class="menu">
     <ul>
          <?php wp_list_categories('title_li=&number=9'); ?>
     </ul>
</div> 

With that :

<div class="menu">
     <ul>
          <?php wp_list_categories('title_li=&include=CATS-SLUGS'); ?>
    </ul>
</div>

What are we adding ?

&include=CATS-SLUGS

Replace that “cats-slugs”, just listing, sepparated by commas, the slug names of the categories you wish to show. The same method goes for the pages, in the top section.

“Can I choose another background for my header ?”

Answer

Yes. You have 5 backgrounds to choose by default, which you can call in your CSS stylesheet, through the WordPress Themes Editor.

Find that line : .header { width:950px; height:417px; background:url('images/headers/red.png'); } And change the name of the image (here “red“) for one of the other images stocked in the image’s folder (for example, “green“).

You can still create your new headers backgrounds, upload them next to the existents ones, then change again their name in style.css. Remember their width is 950px wide, and their height is 417px.

Can I put an image as a title instead of the default html text ?

Answer

Sure. To do that, and once you have created and uploaded your title’s image in the image’s folder, open again head.php and head2.php, and replace that bit :

<div class="thetitle span-11">
   <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('title'); ?></a></h1>
</div> 

With that bit :

<div class="thetitle span-11">
   <a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('url'); ?>/wp-content/themes/charlotte/images/yourimage.extension"></a>
</div> 

, changing the image’s name and extension.

“I’d prefer to get rid of the header’s widgets. Can I delete them ?”

Answer

Yes. You must go to head.php and find a div identified with the class="main". This is what it’s inside :

<div class="thetitle span-11">
   <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('title'); ?></a></h1>
</div>
<div class="surface span-13 last">
   <div class="span-6">
      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('HeaderLeft') ) : ?> Space for some Widgets ! Go to your Admin panel and choose. Here, the widgetized section to fill is called HeaderLeft. <?php endif; ?>
   </div>
   <div class="span-6 last">
      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('HeaderRight') ) : ?> Idem here, called HeaderRight. I recommend a combination of text, recent posts, recent comments, some image (you must write its url in some Text Widget ... write me an e-mail if you have any question. <?php endif; ?>
   </div>
</div> 

We will replace all that code with this snippet :

<div class="thetitle span-24 last">
   <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('title'); ?></a></h1>
</div> 

We keep intact the <div class="main"> which was, and still will be, containing those codes.

Can I put some image (for example, some typographic image), instead of the blog’s description in the Home ?

Answer

Yes. Go to your widgets, and activate the ‘Widget Home’ with some text widget. Fill it not with text, but with the path to your typographic image (or other). Like this :

<img src="http://yourwebsite.com/wp-content/themes/charlotte/images/yourimage.format">

Remember to specify name and format where here is written yourimage and format.

Last words

Thanks for reading & enjoy !

Credits go to :

The Blueprint CSS Framework

Thanks to Bechster for a very useful code snippet.

Dark Wood Textures

Special Thanks to I Want This Website for reviewing the Theme

Here it is my second theme, after Charlotte.

I was thinking in something quite experimental, maybe just a ’short season’ WP theme, those first hesitant weeks when you are still testing your blog, still searching for a definition. And here it comes Ornette to the rescue.

Ornette Coleman was (is?) one of the masters of the early free jazz and beyond. I first heard of him through a short excerpt of an interview to Lou Reed, who was saying that in the New York of his youth, he was just wishing go to listen to Coleman.

So I said myself : a so engaging reference for Lou, must be a cool one.

I’m afraid I’ll never understand the free jazz, though. But, damn, Ornette inspired me to find, in the graphic dimension, something as in-process as his music !

Could you imagine a better way to give a reason for the release of a minimal theme ?

Explore, change, keep aside, retake …

This is the Ornette Theme.

“How do I change the sIFR colors ?”

Answer
You must go this path sifr/js/, open the sifr-config.js file, and change there the colors. Rememeber to use an hexadecimal RGB value (so 6 caracters).

“I’d like to go without sIFR this time / for a while. How do I prevent sIFR to load, in order to improve the load speed ?”

Answer
You must open functions.php and delete the sIFR part, in the end (it’s commented).

“How do I change the sIFR font to some other font?”

Answer
You have Rockwell as a default, but you can use any font you have in your computer.
I provide you with the Flash file to create your new .swf font. Go inside the theme’s folder – this is the path : /sifr/flash/sifr.fla.
Open sifr.fla, double click in the whitespace, select the text, and select a new font for it. Then, export the work to a .swf file, with the default settings you’ll find after clicking in ‘export’, under the File menu in Flash.
Save the file in the same directory (/sifr/flash/), and, finally, open functions.php to change the font name, twice.
Another step is required ; go this path in the theme’s folder : /sifr/js/sifr-config.js, and change every “rockwell” word with the name of your new font.

“I haven’t Flash, how to do it ?”

Answer
There are several on-line tools to upload a font file, and process it to recieve a .swf file.
Here’s one of the best :
sIFR Generator.

“For an extended documentation about sIFR, please visit Novemberborn, its Powerhouse, ruled by Mark Wubben.”

Credits go to :

Mark Wubben for the sIFR project.

Pat Dryburgh, for his clever WP-sIFR combo.

The BluePrint CSS Framework

Lou Reed & Ornette Coleman

Features

The theme have some PHP goods :

1. Posts Counter in any archive page : tags, categories … “There are X posts in Cinema”.
2. Awesome 404 page : whether your visitors fall onto a deleted post via some death link : a net of tags, categories and pages are waiting to offer the users all the required alternatives they could ask for.
3. Uber-quick Related Posts by Category : in any given post, 5 ‘neightbours’ will be listed at the speed of light. Courtoisie of Sergej Müller.
4. Curated Archive Page, where both, tags and categories, are shown strategically per post, to give in a breeze what the reader will find further.
5. Widgets-Ready Sidebar.

Plus :

sIFR in its splendor (automatized). No need to set up javascript files or export flash files. Install the theme, start to write, go to the frontend, and see how your headings have been replaced by a cool white Rockell font.

Transparency images, deployed depending on the container size, elastically, to give some cosmic look to your writings (only a bit).

Curated Colors in links and borders. Purple/orange palette.

Widgetized Sidebar to fill as you wish, with some valuable defaults.

RSS feed alredy there, to keep your readers informed.

Instructions :

1. Upload and install the Related Posts Plugin
2. Upload the Theme to the theme’s directory and activate
3. Customize the theme ! Don’t hesitate to ask here in the comms.

Credits go to :

- PSD Tuts, for the graphical idea and the tutorial.

- sIFR, once again.

- Blueprint CSS Framework