This hack is to restrict personal IPs on All in One Adsense and YPN! extension for wordpress. The reason to add this code(hack) in, it’s because alot of the isp are using dynamic ips, or your company may only have a single ip sharing to thousands of employee. This is our current situation, and you don’t know how much your employee “LOVED” you by spam clicking on the links. This will hurt you if google decide that you are spamming on the ads.

First open the file “all-in-one-adsense-and-ypn.php” under wp-content/plugins/all-in-one-adsense-and-ypn/ and search for the following line of code.

global $user_level, $ai_loadnetwork;

above this line of code add the following code in, and change “Y.O.U.RIP”, “YOU.R.SECOND.IP” to your own ips. Use commas for multiple ips.

$ips = array("Y.O.U.RIP", "YOU.R.SECOND.IP"); //Personal IPS by DesignerSandbox.com
$isFound = in_array($_SERVER['REMOTE_ADDR'], $ips);//Personal IPS by DesignerSandbox.com
if ($isFound) { return ""; } //Personal IPS by DesignerSandbox.com
  global $user_level, $ai_loadnetwork;

Let’s say you had insert the adsense code statically by using “Executable PHP widget” or other place like header or footer. You can also use the following code to eliminate ips you prefer.

<?php
$ips = array("Y.O.U.RIP", "YOU.R.SECOND.IP"); //Personal IPS by DesignerSandbox.com
$isFound = in_array($_SERVER['REMOTE_ADDR'], $ips); //Personal IPS by DesignerSandbox.com
if (!$isFound ) {
 ?>
<script type="text/javascript"><!--
google_ad_client = "pub-8856908794260554";
/* 300x250, created 9/20/10 */
google_ad_slot = "4607888938";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<?
 }
?>

Related Posts

• DesignerSandbox Roadmap on post-it (3)
• Adding Multiple Attachment for Joomla K2 Component according to the number of JoomFish’s language hack (1)
• Installing Magento [version 1.4.2.0] on ICDSoft (4)
• How to embed YouTube Video within the Facebook fbml tabs (6)
• How to completely disable Magento module (1)

In this post we are going to do a simple make over of the <-more-> link/button. We are going to add in a style class in this link.

<div class="entry">
     <?php the_content('Continue Reading &raquo;'); ?>
</div>

<a class="more-link" href="http://www.designersandbox.com/wordpress/feedburner-for-your-wordpress/#more-270">Continue Reading »</a>

a.more-link{
	background:#699eb6;
	padding:2px 7px;
	margin: 0;
	margin:20px 0;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	font-style:italic;
	font-weight:bold;
	padding:4px 20px;
}
a:link.more-link,
a:visited.more-link{
	color:#c6c6c6;
	text-decoration:none;
	display:inline-block;
	margin-bottom:5px;
	font-size:1.5em;
}
a:hover.more-link{
	color:#47798f;
	background:#d9d9d9;
	text-decoration:none;
}

I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.

Good Luck!

Remember to subscribe to our RSS feed.

Related Posts

• DesignerSandbox Roadmap on post-it (3)
• Adding a top navigation on wordpress (4)
• Adding a Page Navigation to your Wordpress (4)
• Adding Style to your TAGS for Wordpress (0)
• Centering a div block without the width using pure CSS (All Browser) (0)

Creating your WordPress feed (self-hosted WordPress)

For the best results using FeedBurner with your self-hosted WordPress site, we recommend the FeedBurner FeedSmith plugin (originally authored by the legendary Steve Smith). The plugin will detect all ways to access your feed (e.g. http://www.yoursite.com/feed/ or http://www.yoursite.com/wp-rss2.php, etc.), and redirect them to your FeedBurner feed so you can track every possible subscriber. It will forward for your main posts feed and optionally, your main comments feed as well.

The plugin is currently compatible with downloadable WordPress versions 1.5 through 2.5. (Please note that “tag” feeds in later WordPress versions are not supported.)

I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top, and while your at it, sign up for my newsletter, which includes even more valuable resources that I will not be posting here.

Good Luck!

Remember to subscribe to our RSS feed.

Related Posts

• Adding Breadcrumbs to Your WordPress (1)
• Adding Square User Photo to an Author for Wordpress (1)
• Author Image Plugin For WordPress (1)
• Syntax Highlighter for Wordpress (1)
• Displaying Code in Color on your wordpress (2)

<div id="dsnav" class="clearfix">
    <ul id="cssmenu">
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_pages('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?>
    </ul>
</div>

<div id="dsnav" class="clearfix">
    <ul id="cssmenu">
    <li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>
    <?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?>
    </ul>
</div>

#dsnav {
	float:left;
	overflow:visible;
	padding:0;
	position:relative;
	width:100%;
	background:#999;
}
#cssmenu ul {
	margin: 0; /* all lists */
	padding: 0;
}
#cssmenu {
	height:30px;
	margin:0;
	overflow:hidden;
	padding:0 20px;
}
#cssmenu li {
	display:block;
	float:left;
	margin:4px 10px 0 0;
	padding:0;
}
#cssmenu li a {
	background:#CCC;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	color:#000000;
	display:block;
	font-size:80%;
	font-weight:normal;
	padding:4px 6px;
	text-decoration:none;
	text-transform:uppercase;
}
li.current-cat a{
	background:#000!important;
	color:#FFF!important;
}
#cssmenu li a:hover {
	background:#000;
	color:#FFF
}
li.current-cat a:hover{
	background:#333!important;
	color:#ccc!important;
}

css style explanation

#dsnav {

	float:left;
	padding:0;
	margin:0;
	width:100%;
	background:#999;
}
.clearfix{
	clear:both;
}

#cssmenu li {
	display:block;
	float:left;
	margin:4px 10px 0 0;
	padding:0;
	text-transform:uppercase;
}

#cssmenu li a {
	background:#CCC;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	color:#000000;
	display:block;
	font-size:0.8em;
	font-weight:normal;
	text-decoration:none;
	padding:4px 6px;
}

#cssmenu li {
	display:block;
	float:left;
	margin:4px 10px 0 0;
	padding:0;
	text-transform:uppercase;
}

#cssmenu ul {
	margin: 0; /* all lists */
	padding: 0;
}
#cssmenu {
	height:30px;
	margin:0;
	overflow:hidden;
	padding:0 20px;
}

li.current-cat a{
	background:#000!important;
	color:#FFF!important;
}
#cssmenu li a:hover {
	background:#000;
	color:#FFF
}
li.current-cat a:hover{
	background:#333!important;
	color:#ccc!important;
}

Related Posts

• DesignerSandbox Roadmap on post-it (3)
• Adding a Page Navigation to your Wordpress (4)
• Wordpress – Restricting Personal IPs on All in One Adsense and YPN! (1)
• Virtuemart Product Categories Module Hack (extra span PLEASE!) (3)
• Adding style to your read more link (the_content) (6)

If the regular wordpress comments system are not enough for your viewer, you may want to take a look at intense debate system. It is a system that does magic in the field of comments.

With much greater management and functions with Intense Debate, this is a great module that makes organizing your comments much easier.

• Comment Threading
• Reply-By-Email
• Email Notifications
• Commenter Profiles
• Moderation/Blacklisting
• Reputation Points & Comment Voting
• Plugins API
• OpenID
• Widgets
• Twitter
• RSS Readers & Tracking

Related Posts

• Feedburner for your WordPress (2)
• Adding a Page Navigation to your Wordpress (4)
• Adding QuickTag to the html Editor in Wordpress (3)
• Adding Breadcrumbs to Your WordPress (1)
• Adding Square User Photo to an Author for Wordpress (1)

Treating your user good is always a key for web development. By adding a page navigation is one important key to wordpress blogging. Let’s take a look at the big boys which uses page navigation in there blog style tuts/reviews.

Smashing Magazine

net tuts+

In this tutorials, I am going to guide you through on setting up your own page navigation on your wordpress.

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

.wp-pagenavi span, .wp-pagenavi a{background:url('images/number_bg.gif');}

Related Posts

• Adding a top navigation on wordpress (4)
• DesignerSandbox Roadmap on post-it (3)
• Adding style to your read more link (the_content) (6)
• Feedburner for your WordPress (2)
• Easy steps to install intensedebate to your wordpress (13)

Let’s take a look at styling your tags on your blog. This article focus on the easy step to create a css driven class for your tags. Simply you can change it to any color, background color you want in it. Have fun with it.

Original PHP Code

Code to be changed, or you can search the_tags and replace your the_tags php code with the following code.

<?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>

Replace with the following

The following code just simply added a div with tags class in it, so it will be easy for us to change the look and feel later on. Simply added a h6 tag for the Tags header, of course you can give any header as you prefer.

<?php the_tags( '<div class="tags"><h6>Tags: </h6>', '', '</div>'); ?>

CSS code to modify

Here is the code that make the style work

.tags {padding: 10px;background:#eeeeee; border:1px solid #E0E0E0;}
.tags h6 {font-size:1.3em; border-bottom:dotted 1px #CCC; margin:0 0 10px 0;padding:0;}
.tags a:link, .tags a:visited{color:#699eb6; text-decoration:none; display:inline-block; margin-bottom:5px;font-size:0.9em;}
.tags a:hover{color:#47798f; background:#d9d9d9; text-decoration:none;}
.tags a{background:#c6c6c6; padding:2px 7px; margin: 0; margin-right:5px; -moz-border-radius: 4px; -webkit-border-radius: 4px;}

Related Posts

• Adding QuickTag to the html Editor in Wordpress (3)
• DesignerSandbox Roadmap on post-it (3)
• Adding style to your read more link (the_content) (6)
• Adding a top navigation on wordpress (4)
• Adding a Page Navigation to your Wordpress (4)

Often time when you edit the content, you would like to add a custom class or div/span to wrap your text. How do i add this QuickTag to the html editor in wordpress. WYSIWYG function in the wordpress include all the basic functions such as bold, italic, link and etc. WordPress refers thess buttons set as Quicktags.

HTML view on your WYSIWYG Editor

Visual view on your WYSIWYG Editor

In this tutorial you will see how easy it is to add a Quicktag bar within your editor. You basically have a editor custom as your like. I am going to add 2 buttons that create a span and div tag which ask you or your editor for a class to the HTML eidtor Quicktag.

The file you need a change is under

wp-includes/js/quicktags.js.

On the new wordpress included file you will have two file quicktags.js and quicktags.dev.js. quicktags.js is a compressed file which it is hard to custom. Basically I just copy and paste all the code from quicktags.dev.js to quicktags.js

quicktags.dev.js

The below code is basically adding the code to the HTML editor.

edButtons[edButtons.length] =
new edButton('ed_span_class'
,'span'
,''
,'</span>'
,'p'
); // special case

edButtons[edButtons.length] =
new edButton('ed_div_class'
,'div'
,''
,'</div>'
,'p'
); // special case

Adding the button action

function edShowButton(button, i) {
	if (button.id == 'ed_img') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
	}
	else if (button.id == 'ed_link') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}
	else if (button.id == 'ed_span_class') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertSpanClass(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}
	else if (button.id == 'ed_div_class') {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertDivClass(edCanvas, ' + i + ');" value="' + button.display + '" />');
	}
	else {
		document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
	}
}

Below the function list add this code

Where is the function list you are talking about? Search the following codefunction edInsertLink. Basically for easy tracking, I put the code right below the edInsertLink function.

function edInsertSpanClass(myField, i, defaultValue) {
	if (!defaultValue) {
	defaultValue = '';
	}
	if (!edCheckOpenTags(i)) {
		var CLASS = prompt('Enter the CLASS name for your SPAN' ,defaultValue);
		if (CLASS) {
			edButtons[i].tagStart = '<span class="' + CLASS + '">';
			edInsertTag(myField, i);
		}
	}
	else {
		edInsertTag(myField, i);v
	}
}

function edInsertDivClass(myField, i, defaultValue) {
	if (!defaultValue) {
	defaultValue = '';
	}
	if (!edCheckOpenTags(i)) {
		var CLASS = prompt('Enter the CLASS name for your DIV' ,defaultValue);
		if (CLASS) {
			edButtons[i].tagStart = '<div class="' + CLASS + '">';
			edInsertTag(myField, i);
		}
	}
	else {
		edInsertTag(myField, i);v
	}
}

Resources

Edit Quicktags Tutorials by tamba2.org.uk
Colour your Quicktags by tamba2.org.uk

Related Posts

• Adding Style to your TAGS for Wordpress (0)
• Easy steps to install intensedebate to your wordpress (13)
• Wordpress – Restricting Personal IPs on All in One Adsense and YPN! (1)
• DesignerSandbox Roadmap on post-it (3)
• MORE FREE STUFF COMING UP – Merry X’Mas to you all (2)

For the past years, the word “breadcrumb” are very popular in modern web design/development. Most of the template / theme provider or developer will add this feature in their package. So if you are new to the web, simply breadcrumbs or breadcrumb trail is a navigation tools that help user to know which section they are in. An UI (user interfaces) for user to track their location within your blog so that they don’t get lost from hundred cats and million of post you got in your blog post ;P

In this article we are going to introduce Breadcrumb NavXT

Breadcrumb NavXT - Download
Authors: mtekk, hakre

Breadcrumb NavXT, the successor to the popular WordPress plugin Breadcrumb Navigation XT, was written from the ground up to be better than its ancestor. This plugin generates locational breadcrumb trails for your WordPress blog. These breadcrumb trails are highly customizable to suit the needs of just about any blog. The Administrative interface makes setting options easy, while a direct class access is available for theme developers and more adventurous users. Do note that Breadcrumb NavXT requires PHP5.

Now how to Add Breadcrumbs to your WordPress

1. Download the latest vesion from wordpress – Download
   
2. Disable any previous version of this plugin or Breadcrumb Navigation XT.
3. Now you can install the plugin as follow.
   Backend > Plugins (left side) > Add New (left side) > Upload (locate on the right panel) > Activate Plugin (right panel)
4. Continue reading, or follow instructions given by your theme

Breadcrumb NavXT basic usage (or you can visit the author project page)

Depending on your theme this section may be unnecessary. If you are using berry as your theme everything is done for you so you have no further steps to take. If you are a theme developer visit the documentation for examples on how to directly access the bcn_breadcrumb_trail class. Otherwise keep reading.

Open the appropriate file for your theme (typically header.php or index.php). This can be done within WordPress’ administration panel through Presentation > Theme Editor or through your favorite text editor. Place the following code where you want the breadcrumb trail to appear.

If you want this to show in everywhere on your wordpress, best place is to place it on the header.php

Save the file (upload if applicable). Now you should have a breadcrumb trail on your WordPress powered site. To customize the breadcrumb trail you may edit the default values for the options in the administrative interface. This is located in your administration panel under Settings > Breadcrumb NavXT.

html/CSS breadcrumb for your wordpress

This is just a css reference for you to use, of course you can change to anything you like.
Maybe different color, fonts, background, image and etc.

PHP

    <div class="breadcrumb">
    <?php
    if(function_exists('bcn_display'))
    {
        bcn_display();
    }
    ?>
    </div>

CSS

div.breadcrumb{ background:#f8f8f8; padding:10px 10px 10px 30px;}
.breadcrumb{font-size:10px;color:#b8b8b8;}
.breadcrumb a:link, .breadcrumb a:visited{color:#699eb6; text-decoration:none;}
.breadcrumb a:hover{color:#47798f; background:#FFC; text-decoration:underline;}

Advanced Usage

Examples on some advanced usage situations are available in the documentation.

Further Study about breadcrumb

If you would like to take a look at a more in-depth view of what and how breadcrumb are made for. Please take a look at the following post by smashingmagazine.

Related Posts

• Feedburner for your WordPress (2)
• Adding Square User Photo to an Author for Wordpress (1)
• Author Image Plugin For WordPress (1)
• Syntax Highlighter for Wordpress (1)
• Displaying Code in Color on your wordpress (2)

Authors: cptnwinky, westonruter

Allows a user to associate a profile photo with their account through their “Your Profile” page. Admins may add a user profile photo by accessing the “Edit User” page. Uploaded images are resized to fit the dimensions specified on the options page; a thumbnail image correspondingly is also generated. User photos may be displayed within a post or a comment to help identify the author. New template tags introduced are:

• userphoto_the_author_photo()
• userphoto_the_author_thumbnail()
• userphoto_comment_author_photo()
• userphoto_comment_author_thumbnail()

Important: all of these “template tags” must appear inside of PHP script blocks (see examples below). The first two should be placed in the posts loop near the_author(), and the second two in the comments loop near comment_author() (or their respective equivalents). Furthermore, userphoto_the_author_photo() and userphoto_the_author_thumbnail() may be called anywhere (i.e. sidebar) if $authordata is set.

The output of these template tags may be modified by passing four parameters: $before, $after, $attributes, and $default_src, as in: userphoto_the_author_photo($before, $after, $attributes, $default_src). If the user photo exists (or $default_src is supplied), then the text provided in the $before and $after parameters is respectively prefixed and suffixed to the generated img tag (a common pattern in WordPress). If attributes are provided in the $attributes parameter, then they are returned as attributes of the generated img element. For example: userphoto_the_author_photo('', '', array(style => 'border:0')) Just added in 0.8.1 release are these two new template tags:

• userphoto($user, $before = '', $after = '', $attributes = array(), $default_src = '')
• userphoto_thumbnail($user, $before = '', $after = '', $attributes = array(), $default_src = '')

By using these, it is uneccessary to set the global $authordata to display a photo. Just pass $authordata, $curauth or whatever variable you have which contains the user object, or (as of version 0.9), pass in a user ID or a user login name.

Here’s an example that shows a few ways of inserting a user’s photo into the post loop: //this will display the user’s avatar if they don’t have a user photo,

<?php while (have_posts()) : the_post(); ?>
    <div id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
        <div>
            <?php the_time('F jS, Y') ?>
            by <?php the_author() ?>

            <!-- displays the user's photo and then thumbnail -->
            <?php userphoto_the_author_photo() ?>
            <?php userphoto_the_author_thumbnail() ?>

            <!-- the following two do the same since $authordata populated -->
            <?php userphoto($authordata) ?>
            <?php userphoto_thumbnail($authordata) ?>

            <!-- and this is how to customize the output -->
            <?php userphoto_the_author_photo(
                '<b>Photo of me: ',
                '</b>',
                array('class' => 'photo'),
                get_template_directory_uri() . '/nophoto.jpg'
            ) ?>
        </div>
        <?php the_content('Read the rest of this entry &raquo;'); ?>
    </div>
<?php endwhile; ?>

To download or read more information about this plugin please visit to the plugin page

Square Thumbs for User Photo

Extends the User Photo plugin to allow the generation of square thumbnails. You MUST have the User Photo plugin installed, or this plugin will NOT work.

Plugin initially produced on behalf of Puffbox.

To download or read more information about this plugin please visit to the plugin page.

Related Posts

• Feedburner for your WordPress (2)
• Adding Breadcrumbs to Your WordPress (1)
• Author Image Plugin For WordPress (1)
• Syntax Highlighter for Wordpress (1)
• Displaying Code in Color on your wordpress (2)