Have you seen or used Thoughtplifier theme? If you notice, there is this “limited fixed sidebar“. Basically it’s an element which is positioned using the position: relative absolute combo and its top CSS property is dynamically modified using jQuery so it can be set to be stopped when the window is scrolled to particular area.

To create this functionality, here are what you need:

1. .scroll() : trigger an action when the window is scrolled
2. .scrollTop() : get the margin-top of current scrolled window toward the top side of the document
3. .offset() : get the margin-top or margin-left of particular element toward the document
4. .height() : get the height of particular element

Combine those APIs to work on this logic. When the window is scrolled:

1. If the window position is in between top limit and bottom limit (let’s say the you want this limited fixed area should only move beside article area and stopped when the window is scrolled to comment area), animate it in relative manner toward the position of the top window.
2. If the window position has reached bottom limit, stop the fixed limit area above the bottom limit
3. If the window isn’t in between top limit and bottom limit NOR reached bottom limit which means that it is scrolled to the top, re-positioned it to its original state.

Here’s the jQuery functionality created based the logic above:

If the window is scrolled:
$(window).scroll(function(){
// place the action here
});

The if conditional logic:

$(window).scroll(function(){
if ( ){
/* Check if the current window position is below the #article AND above the #content */
} else if (){
/* If the current window position is below the #comment, stop it on the top of #comment. */
} else {
/* If it isn't below the #content or in between #article and #comment,
it means that the window is scrolled to the top. Set the value to zero
to place the #box on its original position. */
}
});

And here’s the complete code:

$(document).ready(function() {
var starting_position = $('#box').offset();
var top_padding = 10;
var bottom_limit = $('#comment').offset();
var box_height = $('#box').height() + 20;

$(window).scroll(function(){
var top_window = $(window).scrollTop();

if (top_window > starting_position.top && top_window < bottom_limit.top - box_height){
$('#box').stop().animate({top: top_window - starting_position.top + top_padding}, 400);
} else if (top_window > bottom_limit.top - starting_position.top - box_height){
$('#box').stop().animate({top: bottom_limit.top - starting_position.top - box_height }, 400);
} else {
$('#box').stop().animate({top: 0 }, 400);
}
});
});

I’d recommend you to check out the demo page and view its source code to understand it more. I’ve added couple of comment lines to make it more understandable:

Limited Fixed Area Using jQuery Demo

There are lots of handy jQuery APIs, but in my opinion, one of the jQuery fanciest API is .animate(). We can simply say that animate is about transitioning any CSS property you want. Let’s say you have this 100 X 100 pixels box and you want to change its size to 150 X 150 pixels once user clicks it. This is the ‘plain way’ of doing it:

While it gets the stuff done, compare the way its size is changing by using .animate():

Prettier, isn’t it? That’s what .animate does: it changes css properties (dimension, color, opacity, display, background color, you name it). However, rather than ‘jumping’ the values of the properties, it changes the CSS properties you stated by transitioning it from the current values to desired values, one step at time, which makes it looks animated. Hey, the name of the API is animate(), right?

Lately one of the project i’m involved in is having this weird issue which unable to save the whole menu items we made (The menu item saving process is suddenly ended after 80-something menu items are saved). Okay, it is idea of mine to use mega dropdown menu but i didn’t expect that it is going to have hundreds of menu item on it LOL Weirdly, it works well on local and development server. Considering this issue i think the problem is not the incapability of WordPress in handling hundreds of menu-item. I (currently) believe that the problem is on the server configuration which we’re still working on it.

However, there is a requirement to add more menu item. Since it is currently unable to save more menu-item through dashboard interface, i decided to figure out how WordPress menu works and insert the menu item directly through the database (i’m using PhpMyAdmin) while we’re working on the server configuration issue. After some couple of times messing with the database, i finally get how it works.

If you’re about to ‘directly insert‘ a menu-item to existing menu location, there are three tables that you’re going to modify: wp_posts, wp_term_relationships and wp_postmeta. However, if you’re going to see it on its bigger picture, wp_terms and wp_term_taxonomy is also involved in this.

Let’s say I’m going to add a custom menu item with “@fikrirasyid” as its label and a link to my twitter profile “http://twitter.com/fikrirasyid” as its URL.

1. Insert new record to wp_posts table

Click to enlarge

These are some fields you have to pay attention to:

• ID : The ID of the item
• post_title : Information that will be used as “label” of the menu-item
• post_status : make sure it’s “publish”
• post_name : Information that will be used as its slug
• menu_order : information that is used to determine the order of the menu-item.
• post_type : Make sure that it’s “nav_menu_item”

2. Insert new record to wp_term_relationships

Click to enlarge

for more understanding toward wp_term_relationships‘ term_taxonomy_id field, take a look at wp_terms and wp_term_taxonomy tables below.

Click to enlarge

Click to enlarge

3. Insert 8 new records to wp_postmeta

Finally here’s the last recipe. These 8 records on the wp_postmeta are where the values of menu-item is stored.

Click to enlarge

Click to enlarge

Anyway, there is further note you need to know for these meta_keys:

• _menu_item_object : there is custom, pages, categories, custom taxonomies, and so on and so forth.
• _menu_item_object_id : If the type of menu-item is page, then this meta_key will store the value of page ID (note that it’s page ID on wp_posts, not the nav_menu_item ID version of it)
• _menu_item_menu_item_parent : the ID of parent menu item

And that’s it. To comprehend it more, it’ll be a good idea to take a look to your existing local WordPress site’s database and understand it in your own situation.

Here’s a simple truth about modal box: It is ridiculously easy to be made.

The Logic

Basically, modal box is a ‘flying’ box on top of another content. To achieve this kind of state, all you need is:

1. Create a wrapper which is positioned on top of everything. Utilize the usage of position:fixed, 100% width & height, top & left and z-index (if it is needed)
2. Create the ‘box’ inside the wrapper. Place your content within it. Utilize the usage of margin: auto to adjust its position
3. You want to show it only if user click particular link, right? great, now display:none it.
4. Using javascript (i’m using jQuery), show the wrapper if particular DOM is clicked.
5. The modal box need to be hidden after its content is read. Using javascript, create a functionality which makes the wrapper hidden if particular DOM is clicked.

The HTML Markup

Place this code anywhere you want. I’d rather place it on the bottom of the page, though.

<div id="modal-background">
<div id="modal-box">
<h2>This is the modalbox</h2>
<p>Paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#" id="close-modal">Close this modal box</a>
</div>
</div>

The CSS

The trick: style it on modal-box-is-shown state first. If the styling has been okay, display:none it.

#modal-background      {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:none;}
#modal-box          {display:block; background:#fff; width:400px; padding:20px; margin:100px auto; box-shadow:0 0 10px #efefef;}
#modal-box h2          {margin-top:0;}

The JavaScript, using jQuery

Use the beauty of jQuery’s fadeIn() and fadeOut() in setting display:block and display:none a DOM.

$(document).ready(function() {
$('#show-modal').click(function(){
$('#modal-background').fadeIn();
return false;
});

$('#close-modal').click(function(){
$('#modal-background').fadeOut();
return false;
});
});

The Demo

And that’s that. Here’s the demo:

Demo of Simple Do-It-Yourself Modal Box

As usual, please take a look at its page source code for further explanation. Hope it helps

Why do we have to learn how to code tabbed area while there are so many plugins that able to create a tabbed area instantly? Why do we have to reinvent the wheel?

Because understanding how it works is a good plus for you. If you understand the way it works, you may customize it for your further need. Plus, it’s a damn easy.

So let’s get going

The Markup

Basically, this is the common structure of a tabbed area:

Click picture to enlarge

A wrapper contains a tab navigation which is built on unorder-lists plus a link inside and a tab content which contains several div areas.

Here’s the code:

<h1>Dead Simple <em>Do-It-Yourself</em> Tabbed Area</h1>
<div id="tab-wrap" class="clearfix">

<ul id="tab-nav">
<li><a href="#first-tab">First Tab</a></li>
<li><a href="#second-tab">Second Tab</a></li>
</ul>

<div id="tab-content">
<div class="tab" id="first-tab">
<h2>This is first tab</h2>
<p>This is first tab. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="tab" id="second-tab">
<h2>This is second tab</h2>
<p>This is second tab. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</div>
</div>

The Logic

This is how the tab -commonly- works.

Stylesheet

1. Style the markup so it looks like a tab
2. Hide all tabs – using stylesheet

Javascript initialization on page load

1. Show first tab – using javascript
2. Give specific class to first link on tab navigation to indicate that it is the active tab nav item – using javascript

When the tab nav item is clicked (Behaviour)

Important: href attribute of the tab-navigation link is pointed to specific tab ID. So when the tab-navigation item is clicked:

1. Get the value of href attribute of the clicked link
2. Hide all tab area
3. Show element with that value (which is an ID of one tab area)
4. remove all class which indicates active behavior from tab-navigation link
5. Add class to clicked tab-navigation link
6. Prevent link from behaving default action which is moving browser page to the assigned ID

That’s the logic.

The codes

The Stylesheet. Pretty self explanatory

/* Basic Styling */
#tab-wrap {display:block; width:300px; background:#efefef; padding:10px; margin-top:40px;}

/* Tab Navigation */
#tab-nav li {float:left;} /* floated. If this area isn't floated, it will be collapsed */
#tab-nav a {float:left; padding:5px 5px 2px; width:140px; background:#efefef;}
#tab-nav a.active{background:#fff;}

/* The Tab */
.tab {background:#fff; padding:10px; float:left; width:280px; display:none;}

The Javascript (using jQuery)

$(document).ready(function() {
$('.tab:first').show();
$('#tab-nav a:first').addClass('active');
$('#tab-nav a').click(function(){
var tabID = $(this).attr('href'); // Get the value of clicked a's href attribute
$('.tab').hide(); // Hide all tab
$(tabID).fadeIn(); // Show aimed tab
$('#tab-nav a').removeClass('active'); // Remove 'active' class from all nav item
$(this).addClass('active'); // Add 'active' class to clicked nav item
return false; // Kill the link, don't do default action which is 'jump' to destined ID
});
});

The Demo

Finally here’s the demo:

Demo of Dead Simple DIY Tabbed Area Using jQuery

View the source code of the demo page for further explanation. Hope this tutorial helps

After smashing some bugs and adding couple of features, finally i can say that Thoughtplifier, the theme which is used by my personal blog and Outstando (as in September 27th, 2011) has reached version 0.2. You can use this new version right away, just click the download button below and it is going to be downloaded directly from GitHub:

Download Thoughtplifier 0.2

Smashed bugs on version 0.2:

• Fixing page-navigation style bug
• Fixing author-box collapsing bug
• Fixing wp-smiley margin bug
• Removing unwanted :focus state
• Updating Theme Options Framework to version 0.9
• Heading’s text-transform adjustment
• Fixing broken jQuery function in iOS browser

Added Features in version 0.2:

Seven custom fonts for headings using Google Webfonts

Pacifico Font

Leckerli One Font

Kreon Font

Georgia Font

Copse Font

Carter One Font

Banger Font

Lobster Font

Add custom script through theme options

Set link as button

Just add class="button" to any link in content section, then voila! It turns into button-alike link

The future of Thoughtplifier

Like what i’ve mentioned on the previous post, you can participate to the development of Thoughtplifier Theme. It is hosted on GitHub so you may fork it, contribute your code, report any bugs, suggest any features or opinion, etc. My personal goal for this theme is submitting it to WordPress Theme Directory as soon as it hits the version 1.0 (i hope it has become mature enough, though) - I’ve received lots great things from WordPress community, I guess it’s the time for me to contribute to the community.

So what are you waiting for? Download Thougtplifier version 0.2 now!

Download Thoughtplifier 0.2

Here’s how it works:

1. It is basically a form
2. Most of its fields are text field
3. To make it interactive, most of the text fields are hidden. Some fields are filled by click-the-image-or-text then insert the information attached to the object into the hidden text field
4. When you hit the order button, the hidden text field is sent along with the shown text field.

Here’s the code to make the thing works:

The HTML markup

Optimize the use of image’s title attribute. Set a class for images that is intended to be the selector.

<img src="images/thumb-1.png" alt="image no.1" title="image no.1" />
<img src="images/thumb-2.png" alt="image no.2" title="image no.2" />

Assign an ID to the intended text field.

<input type="text" id="image-selected" value="" />

Create a previewer DOM. Since the text-field will be hidden, we need something that will be used to show the user which image that they have been selected.

<h3 id="preview-word"><span id="preview-selected-image"></span> has selected.</h3>

The JavaScript (jQuery)

Here are what we’re going to do. if the image is clicked:

1. get the value of clicked image’s title attribute
2. insert the clicked image title value to assigned text field.
3. insert the clicked image title to assigned DOM which is built for previewing purpose.
4. the preview text is hidden by default, show it.

For usability purpose, it’s a good idea to make selected item different from the unselected else. It reduces confusion. So:

1. Change all image background to its default background color
2. Change the clicked image background color to particular background color

Here’s to code:

$('.selector').click(function(){

// this is where the trick happens
var data = $(this).attr('title');
$('#image-selected').attr('value', data);
$('#preview-selected-image').text(data);
$('#preview-word').show();

// for decorative and usability purpose
$('.selector').css('background-color', 'white');
$(this).css('background-color', '#960000');
});

To make it clearer, here’s view the demo page of this tutorial. View the page source to view it in action:

View the demo.

Thougthplifier is a one-column focus-to-content WordPress theme i crafted based on Essential Theme modification i made for my personal blog and outstando. Some folks asked me to release it so here it is, after some modifications to make it more customizable.

Thoughtplifier is designed to be as simple as possible yet functional to use. However, please notice that the development of the theme hasn’t done yet. I’m applying release-early-release-often-thing to this theme. If you find any bug, please tell me through Thoughtplifier’s Github issue page. I also invite any of you who wants to use this theme to collaborate: fork, commit, feature suggesting, or anything you can imagine. Just go throug Thoughtplifier’s Github page.

Demo & Download

Demo site will available soon. Meanwhile, you may check this site. Outstando is using Thoughtplifier.

Click here to Download Thoughtplifier Theme

Features

Added on version 0.1 (August 22, 2011)

• WordPress custom menu
• Dropdown menu
• Widget areas on navbar & footer
• Featured image support
• Pagination navigation
• Author box
• Related posts box
• Support threaded comment
• Well styled content styling
• Customizable color scheme
• More features to come. Please suggest features you want through Thoughtplifier Github page. We’ll discuss it.

Screenshots

We’ve discussed about creating simple random background in WordPress, including its cons which has no back-end interface, on the previous post. Some people are okay with having no backend interface since they have access to put the image directly on the server’s directory. However, for less-geeky person, this can be a trouble. This post will show you the fix of this issue: we’re going to create a more manageable random background feature which has a backend interface.

Basically, these are what to do to create this feature:

1. Open functions.php file of your theme
2. Create a new custom post-type with post-thumbnail support enabled. Let’s name it random-background
3. Modify its post column edit page to make it more neat
4. Create a function which generates stylesheet that modified the background using random-background‘s post-thumbnail
5. Hook the function which generates stylesheet into wp_head()

That’s all. Here are the functions:

1. Create a new custom post-type with post-thumbnail support enabled. Let’s name it random-background

Open your functions.php and paste this function. This function will create new post-type called random-background and generate the dashboard interface.

// Add custom post type called random-background
add_action('init', 'ess_manageable_random_background_posttype');
function ess_manageable_random_background_posttype()
{
$labels = array(
'name' => _x('Backgrounds', 'post type general name'),
'singular_name' => _x('Background', 'post type singular name'),
'add_new' => _x('Add New', 'book'),
'add_new_item' => __('Add New Background'),
'edit_item' => __('Edit Background'),
'new_item' => __('New Background'),
'view_item' => __('View Background'),
'search_items' => __('Search Background'),
'not_found' =>  __('No background found'),
'not_found_in_trash' => __('No background found in Trash'),
'parent_item_colon' => ''
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title', 'excerpt', 'thumbnail')
);
register_post_type('random-background',$args);
}

2. Modify its post column edit page to make it more neat

Since we’re only use the title, excerpt, and post thumbnail, let’s modify the post column to show only those three things. Paste these functions below the previous function:

// Modifying the edit page
add_filter("manage_edit-random-background_columns", "title_ess_manageable_random_background");
add_action("manage_posts_custom_column", "ess_manageable_random_background_columns");

function title_ess_manageable_random_background($columns) //this function display the columns headings
{
$columns = array(
"cb" => "<input type=\"checkbox\" />",
"title" => "Background Title",
"description" => "Description",
"thumbnail" => "Thumbnail"
);
return $columns;
}

function ess_manageable_random_background_columns($column)
{
global $post;
switch ($column)
{
case "description":
the_excerpt();
break;

case "thumbnail":
the_post_thumbnail('home-thumb');
break;
}
}

3. Create a function which generates stylesheet that modified the background using random-background’s post-thumbnail

Select one random post and pull its post-thumbnail. Print it as a stylesheet. Paste this function below the previous functions.

// Printing the background
function ess_manageable_random_background(){

$backgrounds = get_posts('post_type=random-background&numberposts=1&orderby=rand');
foreach( $backgrounds as $post ) :
setup_postdata($post);

$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'home-main' );
echo '<style type="text/css"> body{background:url(' . $image[0] . ');}</style>';

endforeach;
wp_reset_query();

}

4. Hook it into the wp_head!

Hook it into wp_head so it appears on the head section. Paste this function below the previous functions:

// Hook ess_manageable_random_background() into wp_head()
add_action("wp_head", "ess_manageable_random_background");

*****

Kudos! Now manageable random background feature for your WordPress theme has been created. To use it, go to Dashboard > Backgrounds > Add New. Type the title and description, then set the featured image. This featured image is the one that will be pulled by ess_manageable_random_background() function. After you’ve set the featured image, hit the publish button. Voila! It’s all done. Repeat the task to add more backgrounds.

FYI, If you’d like see how does it work, as usual i’ve made the TwentyTen Child Theme which uses this feature. Download the demo here.

Several days ago, a friend of mine @arhamHaryadi asked me about how to make a random background which changes every time visitor visit / refresh the page. The answer is simple yet easy, use Matt Mullenweg’s randomimage script. Instruction of how to use it is pretty self-explanatory on that script. However, some of you probably want to use it on your theme. Here’s the quick how-to integrate it into your WordPress theme:

1. Create a directory on your theme folder named randombg. Put all images you want to use as random background on this directory.
2. Create a file named randomimage.php inside the freshly-created randombg directory. Copy and paste Matt’s randomimage script into that file.
3. Open your theme’s functions.php file and paste these functions. Read the comment on the script for further explanation. Basically what these functions do are printing a stylesheet and hooking it into wp_head() theme hook.

   // Hooking ess_random_background() to wp_head()
   add_action("wp_head", "ess_random_background");
   
   // Printing random image background stylesheet. Random image calling is done by Matt Mullenweg's randomimage script
   function ess_random_background(){
   ?>
   <style type="text/css">
   body    {background:url(<?php bloginfo("stylesheet_directory"); ?>/randombg/randomimage.php);}
   </style>
   <?php
   }
   

That’s it. Pretty simple and easy to do, huh? This is the simplest way i know to create random background functionality to your WordPress theme. However, this trick has a downside: it has no back-end / dashboard interface so user should have an access to the FTP to put the image file on randombg directory. I’ve had a more manageable alternative than this, using WordPress custom post-type feature. I’ll discuss it on the next post. Stay tune on Outstando.

P.S.

I’ve made a twentyten child theme demo which uses this trick, just in case you want to see how does it actually work.

Download the file here.