A Wordpress Development Blog » Featured http://www.binarspace.com Another WordPress Development Blog Mon, 29 Nov 2010 10:34:47 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Using the Menus in WordPress http://www.binarspace.com/wordpress-tips-and-tricks/using-the-menus-in-wordpress/ http://www.binarspace.com/wordpress-tips-and-tricks/using-the-menus-in-wordpress/#comments Wed, 17 Nov 2010 10:55:14 +0000 admin http://www.binarspace.com/?p=201 Today’s tip is about using the wordpress built in menu functions. If implemented correctly these will let you customize the menus and help you manage the blog much more easier.

First you need to open functions.php and “register” the menus. Just put in the following line:


register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'test binar' ),
) );

The code above will register only one menu. If you want more just extend the array.

Once the menus are registered the only thing that needs to be done is to “mark” their position in the template.

Open the template file (usually header.php) and locate the menu lines. The menus are built using html code or wordpress functions like wp_list_pages. Replace those lines with:

wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );

Save and go in Admin Appearance tab. You will see the Menu interface is enabled and ready to use.Just build a menu, put some links in and assign them to primary location and you are ready to go.

Random Posts

]]> http://www.binarspace.com/wordpress-tips-and-tricks/using-the-menus-in-wordpress/feed/ 0 Using custom background function to style any other div http://www.binarspace.com/wordpress-tips-and-tricks/using-custom-background-function-to-style-any-other-div/ http://www.binarspace.com/wordpress-tips-and-tricks/using-custom-background-function-to-style-any-other-div/#comments Thu, 04 Nov 2010 11:34:56 +0000 admin http://www.binarspace.com/?p=142 Since version 3.0 wordpress developers have a new design option to play with. It’s about the add_custom_background() function , a new and comfortable way to manage your theme background without editing the css file.

To enable the custom background feature in a theme you just need to paste the add_custom_background(); command in functions.php file and you are in complete control of the background.

Today’s trick is about using the custom background css interface to style any particular div and not the actual theme background.

For this we have to do the following :
- Copy paste the code below in functions.php

function new_custom_background_cb() {
$background = get_background_image();
$color = get_background_color();
if ( ! $background && ! $color )
return;

$style = $color ? "background-color: #$color;" : '';

if ( $background ) {
$image = " background-image: url('$background');";

$repeat = get_theme_mod( 'background_repeat', 'repeat' );
if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
$repeat = 'repeat';
$repeat = " background-repeat: $repeat;";

$position = get_theme_mod( 'background_position_x', 'left' );
if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
$position = 'left';
$position = " background-position: top $position;";

$attachment = get_theme_mod( 'background_attachment', 'scroll' );
if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
$attachment = 'scroll';
$attachment = " background-attachment: $attachment;";

$style .= $image . $repeat . $position . $attachment;
}
?>
<style type="text/css">
#page { <?php echo trim( $style ); ?> }
</style>
<?php
}

The function has the same code as _custom_background_cb() function, that you can found in theme.php and is responsible with building the background style . The only change is on line #page { <?php echo trim( $style ); ?> }.

Here we just replaced the body with #page. So the generated style will be applied to the #page div (or another div that you chose) instead of body.

To call the modified function you just need to add her name as first parameters for the add_custom_background();
So add this line in functions.php and your done


add_custom_background(new_custom_background_cb,'','');

The second trick is to make the custom style sheet to be applied only on home page.

In the same function as above add if (is_home()) before the <style type=”text/css”> . Of course make sure you close the conditional tag and also you can switch back from #page to body if you want the background only for the main page.

The code will look like :

// the rest of the original function.
if (is_home()){
?>

<style type="text/css">
body { <?php echo trim( $style ); ?> }
</style>
<?php
}
}

Random Posts

]]> http://www.binarspace.com/wordpress-tips-and-tricks/using-custom-background-function-to-style-any-other-div/feed/ 1 Automatically insert Adsense code in old posts. http://www.binarspace.com/wordpress-tips-and-tricks/automatically-insert-adsense-code-in-old-posts/ http://www.binarspace.com/wordpress-tips-and-tricks/automatically-insert-adsense-code-in-old-posts/#comments Tue, 02 Nov 2010 12:02:06 +0000 admin http://www.binarspace.com/?p=131 There are many situations when old blogs with tons of posts and traffic are not monetized at all. At one point the owner may decide to publish ads(or some other commercial stuff) inside posts. But how ? Editing 300+ posts to manually insert ads is not really a solution if you are an individual.

Here is a quick solution. The code below will take your posts, split them by ‘<p>’ tags (paragraphs) and insert a code every x(a number you can change) paragraphs.

Copy paste the code in your functions.php and replace the $commercial value with your ad code .I promise I will make a plugin that will do this but in a friendly manner.

add_filter('the_content', 'display_autoadsense');

function display_autoadsense($content){

$commercial=' --->> Copy paste here the adsense code << ---';
$needle='</p>';
$bum=explode($needle,$content);
$count=0;
$every=3;

foreach ($bum as $key => $value) {
$count++;
if($count ===$every){
$new_content= $new_content.$value.'</p><p>'.$commercial.'</p>';
$count=0;
}

else {
$new_content= $new_content.$value.'</p>';
}

}

return $new_content;
}

Change the value of $every with the no of paragraphs you want between ads. Remove the $ count=0; line if you want to display ads only one time.

Random Posts

]]> http://www.binarspace.com/wordpress-tips-and-tricks/automatically-insert-adsense-code-in-old-posts/feed/ 0 Moving Kubrick gradient into other wordpress themes http://www.binarspace.com/wordpress-tips-and-tricks/moving-kubrick-gradient-into-other-wordpress-themes/ http://www.binarspace.com/wordpress-tips-and-tricks/moving-kubrick-gradient-into-other-wordpress-themes/#comments Thu, 28 Oct 2010 11:29:29 +0000 admin http://www.binarspace.com/?p=106 Today’s recipe is a little more complicated than the usual ones and it will be in two parts. I will show you how you can “move” the header gradient generator from good old Kubrick theme into any other theme.

I started the research by looking into the script that creates this gradient for Kubrick theme and even if we could write a new one from scratch I think it will be faster if we just adjust the original.

Step 1
First step is to copy the header-img.php from default theme into your new theme and open it for editing. If you don’t have it you can download it from here.

The first line of code is this one $img = ‘kubrickheader.jpg’;

The ‘kubrickheader.jpg’ is the actual canvas where the gradient script will do the job. If you open the image you will see that the gradient fills an area inside a round corner container and there are white borders + a gray background.

The script needs to find this image so you have two options: copy it from the default theme or create a new one with an imagine editing software.

At this point is good to know the height and width of the gradient we will create. For the purpose of this tutorial we will assume that a height of 200 and a width of 760 are the values we need (these are ‘kubrickheader.jpg’ sizes.)

The next lines of code represent the validation of the color codes we sent via GET. Btw the script will be called like this:
http://yoursite.com/wp-content/themes/yourtheme/header-img.php?upper=000033&lower=F3F3F3
Where upper and lower variable represent the 2 base colors for gradient.

Step 2
Remove from file the definition of the $white variable and the $corner array – we will not do round corners on this example (You can keep it if you plan to use corners).

Step 3
Now set the height of your gradient (in our case it will have the same height as the default image).So in code you should have

$h=200;

Step 4
Remove the “Blank out the blue thing” code since we will not using it.

Step 5
In the “Draw a new color thing” piece of code set the x1 and x2 values to 0 and 760. These values are left and right gradient limits and in our case they will be default image limits. Move the x1 and x2 declarations near the h value set in Step3. This is just to have all the gradient size variables in one place.

Near $h declaration make a new variable called $from and set it to 0. The $ from variable is the start point on y scale. When it’s 0, it means the gradient will start from top margin.

Step 6
Comment or remove the If block in the “Draw a new color thing” area. It’s corner related.

Step 7
In the imageline instruction replace the number 18 with the $from variable. In the original script the gradient starts 18px after the top margin. In our case we control the start point with the $from variable.

imageline( $im, $x1, $from + $i, $x2, $from + $i, $color );

Step 8
Test the script :
http://yoursite.com/wp-content/themes/yourtheme/header-img.php?upper=000033&lower=F3F3F3

It should produce a image of 200 px height , 760px wide containing a color gradient that starts from rgb color of #000033 and ends at rgb color of #F3F3F3.

The extra control.
If you want to draw this gradient inside a image , just like the original Kubrick script does , you can set new values for x1 and x2(as start and end points on horizontal), $from as starting point on vertical and for $h as the gradient height.

This set of values: $x1=20, $x2=740, $from=20 and $h=160 will create a gradient inside the default image and leave of border of 20px around it.

If you want to have corners for the gradient you have the put back the lines we removed and play with the values from corner array.(start with the values from original script.)

Note:
If you want to use the gradient as background for a div (and you don’t have corners) you don’t need to generate a wide image. A 5 px wide jpeg will do (you will tile it horizontally) and will make the gradient script much faster.

In the second part we will make a menu in admin and a page where users can choose the gradient colors.

Download the modifed script here.
You can view the output of this example here .

Random Posts

]]> http://www.binarspace.com/wordpress-tips-and-tricks/moving-kubrick-gradient-into-other-wordpress-themes/feed/ 1