techNerdia - Web Development Tips http://technerdia.com Web Development Tips, Tricks and Ideas Tue, 21 Feb 2012 21:08:10 +0000 en hourly 1 Add Google Code SyntaxHighlighter to WordPress without using a Pluginhttp://technerdia.com/885_syntaxhighlighter.html http://technerdia.com/885_syntaxhighlighter.html#comments Tue, 21 Feb 2012 21:05:51 +0000 tribalNerd http://technerdia.com/?p=885

~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> The Google Code SyntaxHighlighter instantly transforms code/scripts/markup (php, html, css, java, etc) into a readable and downloadable example code.

Google Syntax Highlighter Example

Disclaimer: If your Website has an active Syntax Highlighter installed on it, then you must replace the old Syntax Highlighter wraps with the style used by the Google SyntaxHighlighter. Otherwise your code examples will break.

Keep Current Syntax Highlighter Plugins / Scripts Active Until All Old Examples Have Been Replaced!

Why use the Google SyntaxHighlighter?

Because it’s pretty dang good! Of course, having the source code has massive advantages too. The simplest is not loading more brushes than your site may use. And the funnest, is the ability to customize the look to your desires.

The SyntaxHighlighter currently Supports: C++, C#, CSS, Delphi, Java, JavaScript, PHP, Python, Ruby, Sql, VB, and XML/HTML markup and code types. [ source ]

How Does The Google SyntaxHighlighter Work?

It uses Javascript to find the HTML Pre tag and parse the ‘code’ data within it. The Pre tag contains the type of code being displayed, allowing a filter to be called that translates the code or markup to readable text within the browser rather than rendering it with the Webpage markup.

Example Pre Tag:

<pre name="code" class="html">/* html markup here */</pre>

Adding the SyntaxHighlighter to your WordPress Blog

First, download the SyntaxHighlighter rar file from Google Code. After you unRAR (7zip) the file, finally open the dp.SyntaxHighlighter directory.

Within the directory will be three sub-folders:

  • Scripts: Core code and brush script files.
  • Styles: The core CSS file.
  • Uncompressed: Ignore

Let’s Get Started…

The CSS File

  • Enter the Styles directory, open the SyntaxHighlighter.css file, select all and copy the entire file.
  • Open your themes style.css file, paste the SyntaxHighlighter css data into your themes css file. I put this at the bottom of my css files, below the mobile goodies, sprites, etc.
  • Save the file and upload it to your WordPress theme directory.

The Core

  • Go back and into the Scripts directory.
  • Find the shCore.js file and right click the file and rename it to: SyntaxHighlighter.js
  • Open the file in Notepad or Notepad2 (what I use) or Notepad+
  • Leave the file open….

The Brushes
Brushes, is a term (or name) used to identify the highlighter script for a type of code or script being displayed.

For example, within the Scripts folder is shBrushCSS.js – This file would be called when displaying a CSS file within the ‘pre’ tag.

Most Websites will use only a few Brushes. techNerdia for example uses these brushes: CSS, Javascript, PHP, XML/HTML and SQL. These are the only loaded brushes, the others have been ignored.

  • Open the brush files that you’ll be using on your Website.
  • Select all and copy the contents of one of the brush file.
  • Return to the already opened SyntaxHighlighter.js file, scroll to the very bottom (last line) and paste the Brush code in.
  • Repeat this for each Brush type that you’ll be using.
  • Save the file when done. Uplaod the SyntaxHighlighter.js file to your Website/Server. I uploaded mine to domain.com/js/

Note: The Scripts directory contains a flash file named clipboard.swf. I could not get this feature working, so I’ve excluded it.

Turning on the SyntaxHighlighter

With the CSS data and SyntaxHighlighter.js files uploaded, it’s time to activate the highlighter.

** Do Not Disable Other highlighter Plugins Yet!!!

  • Open your themes footer.php file, scroll to the bottom and find wp_footer().
  • Paste the snip below, above the wp_footer() line and above your Google Analytics code, if it’s in the footer.
  • Adjust the URL to the SyntaxHighlighter.js file, save the file, and upload to your theme or /js directory.
<?php if( is_singular() ){
<script language="javascript" src="http://domain.com/js/SyntaxHighlighter.js"></script>
<script language="javascript">
	dp.SyntaxHighlighter.HighlightAll('code');
</script>
} ?>

Test the SyntaxHighlighter

Easy enough….

  • Go into your WordPress Admin and CLEAR THE CACHE!
  • Create a new post, add the snip below to the body of the post, save the post as a draft, and preview it.
It's Working!

The class=”html” is what tells the script which brush to load. Change it to php, js, css, etc to display different code/markup types.

If something isn’t working, then a step is missing: Check the URL to the SyntaxHighlighter.js file, check that the Brushes have been added to the bottom of the file. Make sure the CSS data has been uploaded or added to your root css file. Ensure the footer call is above the wp_footer() line. Clear the caches again. Try a different brush. Try a different browser.

Removing What Isn’t Used

It’s time to find and replace a few things… with SyntaxHighlighter.js file open:

  • Do a find for: copy to clipboard
  • Remove the copy to clipboard words only.
  • Do a find for: print it will be within a label, like: label:’print’
  • Remove the word print only.

The last removal is optional, it’s the question mark ? that contains the about information. If you remove this, you should give credit some place…. like making a blog post about the SyntaxHighlighter.

  • To remove, do a find for: label:’?’
  • Remove the question mark ? only.
  • Save your work, re-upload the file and retest.

Customizing the Look of the SyntaxHighlighter

The Pre tag wrapper for the code has one customization that can be added to it. It’s a :collapse feature, which closes the code example when the page is loaded, and opening when clicked.

Example:

<pre name="code" class="html:collapse">/* html markup here */</pre>

Wrap the Pre Tag Within a Class

This isn’t mandatory to get the code working, but it does help if for some reason the JavaScript brushes do not load, and it makes the code display.

Add a class called ‘mycode’ around the Pre tag of your code, then define it within your themes CSS file.

Example:

<div class="mycode"><pre name="code" class="html">/* the sample */</pre></div>

mycode Class:

.mycode {
	border-bottom:1px dotted #aaaaaa;
	color:#006400;
	font-size:11px;
	line-height:16px;
	margin: -5px 0 20px 0;
	padding:0;
}

The Main CSS File

If the visual display of the code does not match design, then open the CSS file that contains the SyntaxHighlighter CSS data.

The main wrapper: .dp-highlighter
Adjust the background color, typically this color should be different than your body color of your page, to help the code example stand out.

You may also want to add a line-height, larger than 12px and increase the padding around each line, this helps with readability.

Example:

line-height:22px;
padding:10px 0;

Complete:

.dp-highlighter {
	background:#ffffff;
	background-color:#ffffff;
	font-family:"Consolas", "Courier New", Courier, mono, serif;
	font-size:12px;
	line-height:22px;
	margin:18px 0 18px 0 !important;
	overflow:auto;
	padding:10px 0;
	width:99%;
}

Rounded corners: Add the CSS below to the .dp-highlighter class.

.dp-highlighter { -moz-border-radius: 9px; -webkit-border-radius: 9px; -khtml-border-radius: 9px; border-radius: 9px; }

Color Changes: If you’ve adjusted the background color, you’ll probably want to adjust the other color settings. Do a find for the classes below, and adjust the color or background color setting.

.dp-highlighter ol /* base number colors */
.dp-highlighter .columns div /* odd number colors, I think */
.dp-highlighter .columns /* even numbers */
.dp-highlighter .tools /* toolbar colors */
.dp-highlighter .tools a /* link color in toolbar */

The last bit of the CSS information controls the colors of the code within the example. Adjust as needed.

Cleanup And Disable SyntaxHighlighter Plugins

Update old posts to use the new Pre tag wrapper, then disable old Syntax Highlighter Plugins and code.

It may seem obvious, but make sure you check check your work!!!

Let me know what you thought of this article by leaving me a comment below!

Let me know what you think in the comments below or send me feedback directly.


~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> http://technerdia.com/885_syntaxhighlighter.html/feed 0 Live jQuery Cart – Instant Update of Shopping Cart Totalshttp://technerdia.com/758_live-jquery-cart.html http://technerdia.com/758_live-jquery-cart.html#comments Thu, 09 Feb 2012 20:53:59 +0000 tribalNerd http://technerdia.com/?p=758

~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> jQuery Shopping Cart Example

Why a Live jQuery Cart?

Customers love a simple shopping experience… with that, a short join process that includes the totals up front, produces less junk form submits, thus better form conversion ratios. This is uniquely important when it comes to split testing a live cart. Because the live cart has very low junk submits, a micro change to the form (be it design, location of the form, wording, a second step, etc), can “easily” be identified as positive or negative in the ratios.

 

** Let me know what you think by dropping a quick comment below, or hit me up on Google+ or you can email me feedback directly!

How does the Live jQuery Cart Work?

When the quantity field is updated, the jQuery script is called, which takes the value of quantity and multiplies it by the retail and for sale price values. The retail, today’s price, savings totals and a hidden input price field get instantly updated by using the jQuery replaceWith function.

Breaking down the Live jQuery Cart

The Form

The form includes three price point displays, the retail cost, today’s special and current savings. When the quantity input field is modified, the jQuery is called, adjusting the three totals.



    

        

            
Retail Cost

            $125.00
        

        

            
Today's Special

            $80.00
        

        

    

    
Current Savings: $45.00

The CSS

The CSS contains nothing fancy. The only trick to it is the button, which is displayed through a background call so the transparency works.

/*
  Name: Live jQuery Cart
  URI: http://techNerdia.com/
  Author: tribalNerd
*/
.cart {
	margin:0 auto;
	width:430px;
}
.price {
	margin:15px auto;
	text-align:center;
	width:325px;
}
.retail {
	color:#cc0000;
	float:left;
	font-size:14px;
	font-weight:bold;
	margin:0 0 2px 0;
	text-align:center;
	width:43%;
}
.today {
	color:#7241a8;
	float:right;
	font-size:14px;
	font-weight:bold;
	margin:0 0 2px 0;
	text-align:center;
	width:43%;
}
.retail p, .today p { margin:0 0 2px 0; }
.pRetail, .pToday {
	font-size:32px;
	font-weight:bold;
	line-height:34px;
}
.pRetail {
	text-decoration:line-through;
}
.savings, .save {
	color:#337147;
	font-size:22px;
	font-weight:bold;
	text-align:center;
}
.cart form, .cart label {
	margin:0 auto;
	padding:0;
	width:427px;
}
.cart form p, .cart label { text-align:center; }
.addCart {
	background:url('cartButton.png')no-repeat;
	background-image:url('cartButton.png');
	background-position:0 0;
	background-repeat:no-repeat;
	border:0;
	display:block;
	height:110px;
	margin:0 auto;
	padding:0;
	text-indent: -9999px;
	width:427px;
}

The jQuery Cart

The jquery-cart.js file is a fun one….

  • The script starts off by detecting the key change within the quantity field, it then scrubs the form (to blank) if the quantity field starts with a zero, a letter or a period.
  • After the input value is good, the script checks to see if the quantity value is blank, zero or set to one – for display purposes. If so, the default prices kicks in. Else, the quanity field is 2 or more and the math starts.
  • The math takes the quantity value and multiplies it by the retail or price value (today’s cost). The saved value is the difference between the retail cost and today’s cost.
  • Finally the output happens: When the quantity field updates, the the jQuery executes a replaceWith function. This replaces the 4 html elements above (based on the class names), with the 4 new html lines from the jquery-cart.js file (below the /* output */ line). This is what makes the price values change on the fly.
$('input[name=quantity]').keyup( function() {
	var value = $(this).attr("value");
	while ( value.substring(0, 1) === '0' || value.length > 3 ) { 	/* no leading zero, max 3 chars */
        value = value.substring(1);									/* return to nothing */
    }
	value = value.replace(/[^0-9\.]/g,'');							/* numbers only */
	value = value.replace(/\./g,'');								/* no periods */
	$(this).val(value);
	var real = '125.00'; 	/* retail price */
	var cost = '80.00'; 	/* for sale price */
		if ( value == '' || value == "0" || value == "1" ) { 		/* default */
			var retail = '';
			var saved = '';
			value = '1';
			retail = real;
			saved = real - cost;
		}else{
			var total_cost = '';
			var retail = '';
			var saved = '';
			total_cost = parseInt(value) * cost;
			retail = parseInt(value) * real;
			saved = retail - total_cost;
		}
	var total = '';
	total = parseInt(value) * cost;
/* output */
	$(".pRetail").replaceWith('' + retail + '');
	$(".pRetail").formatCurrency();
	$(".pToday").replaceWith('' + total + '');
	$(".pToday").formatCurrency();
	$(".save").replaceWith('' + saved + '');
	$(".save").formatCurrency();
	$(".input").replaceWith('');
	$(".input").formatCurrency();
} );

Required Changes

Within the jquery-cart.js file, Lines 9 and 10 need to be updated. Line 9 is the retail price of the product. Line 10 is the for sale price.

var real = '125.00'; /* retail price */
var cost = '80.00'; /* for sale price */

The jquery-cart.js also contains 4 replaceWith lines, when the jQuery file is executed the replaceWith commands updates the HTML in the form.

The replaceWith lines from the jquery-cart.js file.

$(".pRetail").replaceWith('' + retail + '');
$(".pToday").replaceWith('' + total + '');
$(".save").replaceWith('' + saved + '');
$(".input").replaceWith('');

The above jQuery lines are: line 28, 30, 32 and 34. Below are related the HTML lines from the form. The lines are: Line 6, Line 10, Line 14 and Line 17. The jQuery lines, update the HTML lines, and it does this by matching the class names.

Matching lines from the HTML Form.

$125.00
$80.00
$45.00

In most cases, the replaceWith and related HTML lines will need to be updated to match your Websites shopping cart forms. Most shopping carts require extra hidden values to be passed in, like the quantity and many other possible values. Static fields, like store names go into the HTML form directly and would not need to be replaced.

The Currency

The rounding of the currency and currency used, is managed by jQuery Format Currency Plugin available at Google Code.

Demo and Download the Live jQuery Cart

 

Have something to say? Something to add? Have a Question?

Let me know in the comments below or if comments are closed you may send me your feedback directly!!!


~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> http://technerdia.com/758_live-jquery-cart.html/feed 0 Adding a Link to the WordPress Dashboard Menu that opens an Internal or External Page. [Updated]http://technerdia.com/557_dashboard-link-in-wordpress.html http://technerdia.com/557_dashboard-link-in-wordpress.html#comments Mon, 23 Jan 2012 09:20:16 +0000 tribalNerd http://technerdia.com/?p=557

~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> Updated: January 23, 2012 – This tip walks you through adding a Statistics link for Google Analytics within the WordPress Admin under the Dashboard tab. Then how to add multiple links to the Dashboard menu and finally how to open an internal page from the Dashboard menu.

Sources:

Adding a Link to the Dashboard of WordPress

The example below is two functions. The second function (dashboardMenu) adds the link within the dashboard, then calls the first function (linkedPage).

What To Do…

  • On Line 8 replace the ENTER-YOUR-GOOGLE-ANALYTICS-URL-HERE with your Google Analytics URL or any URL you wish to open.
  • On Line 10 replace YOUR-DOMAIN with your domain.

/* The Redirect Function */
function linkedPage(){
	if(!current_user_can('manage_options')){
		wp_die( __('You do not have sufficient permissions to access this page.'));
	}
?>
<script type="text/javascript">
	window.open("ENTER-YOUR-GOOGLE-ANALYTICS-URL-HERE"); /* Update This Line */
	function delay(){
		window.location.href = "http://YOUR-DOMAIN.com/wp-admin/index.php"; /* Update This Line */
	}
</script>
<body onLoad="setTimeout('delay()', 4000)">
<? } /* end function */
/* Add Dashboard Link */
function dashboardMenu(){
	if(function_exists('add_submenu_page'))
	add_submenu_page('index.php', __('Statistics'), __('Statistics'), 'manage_options', 'stats', 'linkedPage');
} /* end function */
add_action('admin_menu', 'dashboardMenu');

How Does It Work?

When the Statistics link is clicked in the dashboard, the linkedPage function is called. This sets two Javascripts in action, the first opens Google Analytics in a tab-less browser window. The second redirect waits a few seconds, then returns back to your WordPress Admin homepage.

Adding Multiple Dashboard Links

Duplicate the linkedPage function and rename it, and adjust the urls within the Javascript. Then in the dashboardMenu function, duplicate the add_submenu_page line, adjust the link name and finally replace the linkedPage function with the new function name.


/* Multiple Redirects */
function secondFunctionName(){
	if(!current_user_can('manage_options')){
		wp_die( __('You do not have sufficient permissions to access this page.'));
	}
?>
<script type="text/javascript">
	window.open("OUT-GOING-URL"); /* Update This Line */
	function delay(){
		window.location.href = "http://YOUR-DOMAIN.com/wp-admin/index.php"; /* Update This Line */
	}
</script>
<body onLoad="setTimeout('delay()', 4000)">
<? } /* end function */
/* Add Dashboard Link */
function dashboardMenu(){
	if(function_exists('add_submenu_page'))
	add_submenu_page('index.php', __('Statistics'), __('Statistics'), 'manage_options', 'stats', 'linkedPage');
	add_submenu_page('index.php', __('New Link'), __('New Link'), 'manage_options', 'link', 'secondFunctionName');
} /* end function */
add_action('admin_menu', 'dashboardMenu');

Opening an Internal Page

Instead of redirecting to an outsideURL, you can open a page directly within the admin, then add all the links and goodies you like to that page.

The example below offers two methods for display HTML. The first is to include the html within the function – a much cleaner way of doing it, and the second is to display the html directly within the function.


function linkedPage(){
	if(!current_user_can('manage_options')){
		wp_die( __('You do not have sufficient permissions to access this page.'));
	}
/* Method #1 - Include the HTML */
//include("full/path/to/file.php");
/* */
/* Method #2 - HTML within the Function */ ?>
<ul>
	<li><a href="#" target="_blank">Bird is the Word</a></li>
</ul>
<? }
function dashboardMenu(){
	if(function_exists('add_submenu_page'))
	add_submenu_page('index.php', __('My Page'), __('My Page'), 'manage_options', 'mypage', 'linkedPage');
}
add_action('admin_menu', 'dashboardMenu');

Simple Enough!

This can save you a bit of time and it can be twisted in many various ways. Add links to Feed Stats, Online Tools, Related Sites, Social Networks and whatever else you like.

If you enjoyed this post then please post a comment below and let me know!

I would love to hear from you in the comments below or send me direct feedback.


~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> http://technerdia.com/557_dashboard-link-in-wordpress.html/feed 5 Remove slashes and the http from a URL – PHP Examplehttp://technerdia.com/667_domain-only.html http://technerdia.com/667_domain-only.html#comments Wed, 18 Jan 2012 13:17:41 +0000 tribalNerd http://technerdia.com/?p=667

~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> The PHP example below takes an encoded URL, decodes it, then strips away the slashes and http, leaving only the domain.com to deal with.

The Snip:

preg_replace( "#^[^:/.]*[:/]+#i", "", preg_replace( "{/$}", "", urldecode( $website ) ) );
 

Breaking It Down

It starts by decoding an encoded URL: It turns, http%3A%2F%2Ftechnerdia.com%2F into http://technerdia.com

Why is the URL encoded? I use this snip when pulling URLs from a database. The snip still works if the URL isn’t encoded.

Decode the Encoded URL

$website = "http%3A%2F%2Ftechnerdia.com%2F";
$website = urldecode( $website );
echo $website;
/* Result: http://technerdia.com/ */

Removing Trailing Slash from the URL

$website = "http://technerdia.com/";
$website = preg_replace( "{/$}", "", $website );
echo $website;
/* Result: http://technerdia.com */

Remove the http:// from the URL

$website = "http://technerdia.com";
$website = preg_replace( "#^[^:/.]*[:/]+#i", "", $website );
echo $website;
/* Result: technerdia.com */

That’s It!

Make It All One Line
You can stack it all together and simply echo the line, instead of typing all that out.

$website = "http%3A%2F%2Ftechnerdia.com%2F";
echo preg_replace( "#^[^:/.]*[:/]+#i", "", preg_replace( "{/$}", "", urldecode( $website ) ) );
/* Result: technerdia.com */
 

This little snip of code is a time saver, that’s its job!

When you insert URL’s into a database and also need the domain.com inserted, use this to strip away the garbage rather than typing in the domain.com each time. On the flip side, maybe you only have the URL and need the domain.com, which is typical in APIs or building URLs for sites like Alexa and Site Explorer Tools, and of course many other reasons.

Have a comment, corrections, improvements or feedback?

Let me know in the comments below or send me feedback directly.


~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> http://technerdia.com/667_domain-only.html/feed 1 Using Shortcodes to Display and Manipulate Custom PHP Code within WordPress Posts or Pageshttp://technerdia.com/579_shortcodes.html http://technerdia.com/579_shortcodes.html#comments Wed, 11 Jan 2012 19:27:15 +0000 tribalNerd http://technerdia.com/?p=579

~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> From WordPress, a Shortcode is: a simple set of functions for creating macro codes for use in post content.

Wordpress Shortcode Examples

Shortcodes are the perfect tool to use for pulling in Affiliate API‘s directly into WordPress, by passing in variables within the Shortcode directly, which manipulates the output or display of the API. Because Shortcodes are built in WordPress Functions, caching plugins will work on them. Another words, using Shortcodes to display API’s instead of writing a custom plugin, means you don’t also have to write in extra code for caching!

The functions.php file
Shortcode Functions get added directly into the functions.php file of a theme.

A Basic Shortcode Function

Shortcodes need a function assigned to them to make them, function. Below is a basic example of this taking place.

Place the below within the functions.php file:
function myShortcode() {
    return 'Hello!';
}
add_shortcode( shortcode_name, myShortcode );

In the last line above, the add_shortcode Function contains the name of the short code (shortcode_name) and calls the function above it (myShortcode). The name of this shortcode is: shortcode_name and the function name is: myShortcode

  • Use a shortcode name that relates to the purpose of the function.
  • Always use lowercase letters in your Shortcode names.
Shortcode Call: The Shortcode will return the text: Hello
[shortcode_name]

This is a rather basic example, you can find many ways to use them with a quick Google Search, they are amazingly versatile, so don’t be afraid to play with them.

Passing an Attribute to the Shortcode

Rather than simply returning Hello, the Shortcode can have text passed directly to it. The text can be returned, or used to activate an if or switch statement. The example below checks to see if $atts is passed in, if so it returns the results of param, which is Hello World!

function myShortcode( $atts ) {
if ( $atts) {
    return $atts['param'];
}
}
add_shortcode( shortcode_name, myShortcode );
Passing in an Attribute:
[shortcode_name param="Hello World!"]

Both of the above examples are some what limited, to unlock the full potential of Shortcodes, Attributes need to be passed in.

Attributes within Shortcodes

Attributes are basically Variables ($a) that get passed into the Shortcode Function.

This is done simply by adding in the following to the function:
extract( shortcode_atts( array( 'variable' => 'value', ), $atts ) );

The array() contains a variable(s) that may or may not equal something, in this case the variable equals value. Add more Variables by adding to the Array:

 'variable' => 'value', 'another-var' => 'another-value',
Full example:
extract( shortcode_atts( array( 'variable' => 'value', 'another-var' => 'another-value', ), $atts ) );

Typically using Shortcodes with Attributes means something more complex is happening than displaying a single line of text, being so the output needs to be captured before displaying it.

Output Buffering

An Advanced Shortcode is basically useless without capturing the output of the code. Without it, code can display at wrong times or locations and depending on what the code does within the Shortcode function, it may return header warnings.

To correct this we use a few PHP functions: ob_start, ob_get_contents and ob_end_clean. These functions capture the output of the code into a memory first, then displays (or cleans) the output based on the order it was captured in.

Example Shortcode Function Using Output Buffering

In the example below, we capture the if statements results based on the variable’s value.

function myShortcode( $atts ) {
	extract( shortcode_atts( array( 'variable' => '', ), $atts ) );
	ob_start();
		if ( $variable == '' ) { echo "Do Nothing!"; }
		if ( $variable == '1' ) { echo "Do This Code!"; }
		if ( $variable == '2' ) { echo "Do That Code!"; }
	$output_string = ob_get_contents();
	ob_end_clean();
		return $output_string;
}
add_shortcode( short_code_name, myShortcode);
This Shortcode will return: Do This Code!
[shortcode_name variable="1"]

Advanced Example Shortcode Function

This example captures an XML Feed, loads it into a string, then manipulates the output based on the passed in Attributes. This Shortcode can display various outputs based on the value of type. When type=cars a unique API Url is called, then we foreach through each result, correct the HTML entities and cut the description length off at 255 characters before returning them.

function myShortcode( $atts ) {
	extract( shortcode_atts( array( 'type' => '', 'debug' => '', ), $atts ) );
	ob_start();
/* start code */
if ( !$type ) { $type = "cars"; }
if ( $type == "cars" ) {
	$apiUrl = file_get_contents("http://apiurl.com/");
}
if ( $type == "boats" ) {
	$apiUrl = file_get_contents("http://apiurl.com/");
}
if ( $type ) {
	$xml = simplexml_load_string($apiUrl);
	if( $debug ){echo "<pre>";print_r($xml);echo "</pre>"; exit;}
}
if ( $type == "cars" ) {
	 foreach($xml->cars as $car){
		$title = $car->title;
		$about = $car->description;
			echo '<h2>'. htmlentities($title); .'</h2>';
			echo '<p>'. substr($about,0,255); .'</p>';
	}
}
if ( $type == "boats" ) {
	$name = $xml->boats->boat->name;
	echo $name;
}
/* end code */
	$output_string = ob_get_contents();
	ob_end_clean();
		return $output_string;
}
add_shortcode( short_code_name, myShortcode);
The Shortcodes
[short_code_name type="cars"]
[short_code_name type="boats"]
[short_code_name type="cars" debug="1"]

As you can see, a single Shortcode can contain many “rules” before executing the code. As long as you capture the output, it really makes no difference what you do. You could connect to Mysql, run advanced math, call other functions and classes, include other files, and much more – all within one Shortcode.

This does not mean you should stack everything into a single Shortcode, but it does mean it’s possible!

What one of my Shortcode functions looks like

This is one of my actual Shortcode functions. I pass in several Attributes in, however I only call one or few at a time, each of which manipulate the results of the included api.php file.

The show variable in the shortcode_atts array is set to full (show=full), this means the default value of show to full, thus if nothing is passed in it’s value is full, otherwise its value is whatever is passed in from the Shortcode.

function apiData_func( $atts ) {
		extract( shortcode_atts( array('type' => '', 'show' => 'full', 'letter' => '', 'site' => '', 'start' => '', 'search' => '', 'speed' => '', 'filter' => 'filter', ), $atts ) );
	ob_start();
	  include('api.php');
	 $output_string = ob_get_contents();
	ob_end_clean();
   return $output_string;
 }
add_shortcode( api_data, apiData_func );
The Shortcode
[api_data type="golf" letter="a" start="1" ]

This Shortcode would display golf products, starting with the letter A on page 1, and would ‘show’ the ‘full’ information template.

Enable Shortcodes in Sidebar Widgets

Add the line below (as is) to your themes function.php file to turn on Shortcodes within Widgets. Now the same [ShortCodes] used within Posts and Pages can be used within Sidebar Widgets.

add_filter('widget_text', 'do_shortcode', 11);

What is the 11?

That is the Priority number, this tells WordPress to load do_shortcode after the WordPress content has started to load. In some unique cases you may need the Shortcode to load before WordPress, like when modifying headers, then the Priority number would be 9 (I believe). Other times you may have nested the Shortcodes, and need them to execute in an order. Typically, it stays 11 or gets excluded all together.

Shortcodes are the ultimate WordPress Shortcuts and when it comes to API’s – Shortcodes are a godsend!

Let me know what you thought of this article by leaving me a comment below!

Let me know what you think in the comments below or send me feedback directly.


~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> http://technerdia.com/579_shortcodes.html/feed 1 Find the Parent Post ID and Children ID’s of Multiple Nested Posts or Pages – WordPress Tiphttp://technerdia.com/573_post-ancestors.html http://technerdia.com/573_post-ancestors.html#comments Tue, 03 Jan 2012 20:05:40 +0000 tribalNerd http://technerdia.com/?p=573

~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> Google is filled with countless WordPress users asking How to find the Parent Post ID from a Child Page, when that Child Page is multiple nested levels deep. And like those users, I recently found myself asking this same question.

Unfortunately this is one question that has more answers, solutions, and headaches than even Google can understand. All the solutions I did find did not recursively go through endless children posts, the rest simply didn’t work.

So I kept looking and I’m glad that I did….

Even though this is still a popular topic today, it appears WordPress solved this problem way back in version 2.5, with the function get_post_ancestors.

The get_post_ancestors function creates an array of Post ID’s, starting on the first Child Page. So if you’re 50 nested pages and on the 50th page, this function would display every post id, for every page, up to the parent page.

Note: This function does not display the Parent Post ID IF you are on the Parent Post Page itself – You must be at least one level deep for it to work.

Examples of get_post_ancestors

 /* Example use of get_post_ancestors */
/*Outside Loop: like the sidebar, footer, etc. */
$ancestors = get_post_ancestors( $wp_query->post );
/*Within Loop: Pages template. */
$postid = get_the_ID();
$ancestors = get_post_ancestors( $postid );

The results of get_post_ancestors in now in an Array named, $ancestors. For development purposes you may want to view the results of the array.

 /* Display $ancestors */
echo "<pre>";
print_r($ancestors):
echo "</pre>";
 /* Output of $ancestors */
Array
(
    [0] => 824
    [1] => 822
    [2] => 796
)

In the example above, the Parent Post ID would be: 796 – Or the last value in the array.

You can access the unique value by calling it directly: This would only work if if you are two levels deep from the parent.

echo $ancestors[2];

PHP Function in_array

In the example below, we use the PHP function in_array to look at all the values returned in the Array, rather than calling each value, like above.

 /* http://php.net/manual/en/function.in-array.php */
in_array( "796", $ancestors );

Example Use: In the example below, if ID 796 is found in the $ancestors Array, the if statement would echo: Found In Array

 /* Full example use of get_post_ancestors */
$ancestors = get_post_ancestors( $wp_query->post );
if( in_array( "796", $ancestors ) ){ echo "Found In Array"; }

Practical Use

I use the get_post_ancestors function within the sidebar.php file of a few product related websites. When the parent page or child page of that parent is loaded, a unique sidebar & widget is called based on the ID. The widget contains a unique, yet typical list style menu that contains nested items within the list.

Example Nested List:
  <ul>
	<li><a href="#">Parent Page</a>
   <ul>
	<li><a href="#">Child Page 1</a>
	  <ul>
		<li><a href="#">Sub-Child Page 2</a>
		  <ul>
			<li><a href="#">Sub-Sub-Child Page 3</a></li>
		  </ul></li>
		<li><a href="#">Sub-Child Page 4</a></li>
	  </ul></li>
   </ul></li>
  </ul>

Example Use In Sidebar

This will display the custom sidebar-widget menu on the Parent Page and all Child Pages of that Parent.

 /* get_post_ancestors in the sidebar */
if( function_exists('dynamic_sidebar') ) {
 $ancestors = get_post_ancestors( $wp_query->post ); /* Build Ancestors Array*/?>
<div id="sidebar">
<?php if( is_page(796) || in_array( "796", $ancestors ) ){ dynamic_sidebar(Sidebar1); }?>
</div>

The is_page function: This function checks to see if the Parent Page is being shown. If you only wanted the custom menu to display on the Child pages, remove is_page() from the above if statement.

Custom sidebar.php file using get_post_ancestors

A more complete example of using the get_post_ancestors function within the sidebar.php file.

 /* get_post_ancestors in the sidebar */
<?php if( function_exists('dynamic_sidebar') ) {
 $ancestors = get_post_ancestors( $wp_query->post ); 						/* Build Ancestors Array*/
?>
   <div id="sidebar">
<?php /* sidebars */
   if( is_home() ){
	 dynamic_sidebar(Sidebar1);								/* home menu */
   }else{
	if( is_page(796) || in_array( "796", $ancestors ) ){ dynamic_sidebar(CustomMenu); }	/* widget */
//	if( is_page(###) || in_array( "###", $ancestors ) ){ dynamic_sidebar(Side-Bar-Name); }	/* example widget */
   }
   if( !is_home() ){ dynamic_sidebar(Sidebar2); }						/* non-home mneu */
?>
   </div>
} /* end dynamic_sidebar */
?>

It’s that simple… this method can be used throughout a theme, simply make sure you’re passing the post id into get_post_ancestors, and everything will work perfectly!

If this article helped you then please post a comment below and let me know!

I would love to hear from you in the comments below or if comments are not open send me feedback directly.


~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> http://technerdia.com/573_post-ancestors.html/feed 0 10 Steps to Replacing Feedburner With Your Own Feed URL – with Statisticshttp://technerdia.com/524_removing-feedburner.html http://technerdia.com/524_removing-feedburner.html#comments Mon, 11 Apr 2011 19:49:48 +0000 tribalNerd http://technerdia.com/?p=524

~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> FeedburnerThis article covers removing Feedburner from your WordPress Websites and setting up your own RSS Feeds with Statistics, Advertisements and Scraper Protection.

Two Methods To Removing Feedburner.

  1. Create a temporary Feed that will be used in Feedburner, forcing your readers to update now!
  2. Using a notice within your current Feeds, allowing your readers to naturally move over to your new Feed.

Sites like techNerdia, with a relatively low reader count can force readers to update the Feed URL’s now… It is not hurting me much, if any because of my size. However, for active sites with a large number of readers, an aggressive change like this will make people unhappy, so giving them a notice is a much better option.

Before We Start: Steps 1 ½ (removing plugins), step #3 and step #6 can be skipped by those not wanting to aggressively force readers to update Feed URLs OR if you use the Email Subscriptions feature within Feedburner.

Why am I removing Feedburner?
First, it’s not winning any speed points loading the external Feedburner graphic on my Website. I know it’s really nothing and I could simply not use it. But in the future I would like to show off my new feed count, and hosting it myself is a speed gain.

Secondly, I already give Google enough of my freak’in data….. And Finally, this being the real reason – I added up the time I spent on external services, checking stats or data type information, and it’s disturbingly a high number of HOURS – so my goal overall is to reduce the time spent on external services of all types.

Excuses aside; I’ve found a way to replace Feedburner, help move subscribers over to my new Feed, with statistics, including advertising, while keeping scrapers at bay, all within WordPress. And I’m saving some time by not having to visit another external service.

If you’ve setup your own WordPress Websites and can manage them yourself, then you can do this…

Step 1:

WordPress Plugins

Starting things off is three WordPress Plugins that need to be installed. After this, you may need to shut a few off if you’re taking the aggressive route.

These plugins take care of the dirty work that Feedburner did for you. The other features, such as pinging can be taken care within WordPress and Twitter Posts can easily be done with several plugins or many services that can read your feed.

Installing Plugins

  1. RSS Footer: This plugin has two purposes. The first is to help stop scrapers from taking your Feeds and posting them without credit, and it’s a way to include advertisements.
  2. Feed Statistics: As the name suggests, it’s feed statistics. While it’s not as good as FeedBurner’s pretty stats, it does do the job.
  3. Redirection: Optional: This Plugin is recommended for Multisite Networks but any WP Install can use it. If your sites are setup on the WordPress Multisite Network then you’ll need the Redirection Plugin to handle 301 redirects for each unique site. Otherwise, you can use the .htaccess file in the root of your WordPress site to set up redirects. (Explained Below)

Shutting Off Plugins & Social Networks.

Not everyone needs to do these steps…. If you’re going to naturally move your readers over or if you use Feedburner’s Email Subscriptions feature then skip these steps.

  • Log into Feedburner, click the Publicize Tab and shut off Ping Shot and Socialize if they’re setup.
  • Shut Off Plugins that help socialize posts through your Feedburner URL.
  • Shut Off Social Networks that use your Feedburner URL for posting updates

Step 2:

Setting Up RSS Footer

The RSS Footer Plugin is a key feature to keeping your feeds safe from scrapers or at least making sure you get credit when it happens, and offering some advertising to your readers if you like.

In the example below, the big red box can be text or an advertisement/promo, put in whatever you like. The bold text below the red box is actually more important. The purpose of not linking the Domain Name is to help stop scrapers from ripping out everything within HTML tags, thus leaving the original source to where the article can be found.

Example #1 – HTML that asks readers to Update the Feed URL. This should be used if you’re not forcing your readers to update (ie: a slow change over), perfect for sites with a large active reader base.

NOTICE - PLEASE READ Please update our Feed URL As Soon As Possible - we're removing Feedburner! Thanks ~tribalNerd NEW Feed URL http://technerdia.com/feed


Thanks For Reading %%POSTLINK%% from techNerdia.com

What Example #1 Looks Like:

NOTICE – PLEASE READ Please update our Feed URL As Soon As Possible – we’re removing Feedburner! Thanks ~tribalNerd NEW Feed URL http://technerdia.com/feed

Thanks For Reading %%POSTLINK%% from techNerdia.com

Example #2 – Current HTML I put into my RSS Footer.

Thanks For Reading %%POSTLINK%% from techNerdia.com


~ Visit the New techNerdia.com today ~

What Example #2 Looks Like:

Thanks For Reading %%POSTLINK%% from techNerdia.com

~ Visit the New techNerdia.com today ~

Step 3:

Creating a Temporary RSS Feed

This feed is used to replace your Feed URL in Feedburner, giving the viewer a custom message to update the Feed URL, every single day, until they update. It is aggressive, but it works!

Grab the example below, name it: rss-mySite.xml “One You Modify It” FTP to your WordPress install, create a folder called xml (or whatever), then upload the file. Note: The file extension should be .xml

The example below is really 3 sections. Inside of each section is a title, description, link, and guid link that needs to be modified. The first title section is the name of the feed, the next two title sections would be the updates that are displayed. This script will re-post the same message every day.

* In the example below replace the titles, desc’s and links to match your own information. It’s not a perfect feed, but it does the job and that’s all it needs to do.

<?php echo("<?xml version="1.0" encoding="UTF-8"?\n");?>
<rss version="2.0">
<channel>
<title>techNerdia [UPDATE]</title>
<description>Please Update Your Feed URL</description>
<link>http://technerdia.com/feed</link>
<lastBuildDate><?php echo date('l, j M Y');?> 00:00:01 -1600</lastBuildDate>
<pubDate><?php echo date('l, j M Y');?> 00:00:01 -1600</pubDate>
<item>
<title>TechNerdia [UPDATE] Please Change Your Feed URL</title>
<description>Please Update Your Feed URL to technerdia.com/feed <a href="http://technerdia.com/feed">http://technerdia.com/feed</a> ....then Delete The Feedburner Feed URL that is currently being used. ~ Thanks!</description>
<link>http://technerdia.com/feed</link>
<guid isPermaLink="false">http://technerdia.com/feed</guid>
<pubDate><?php echo date('l, j M Y');?> 00:00:01 -1600</pubDate>
</item>
<item>
<title>Questions or Problems?</title>
<description>If you're having problems or have a question about the feed change or something else, simply <a href="http://technerdia.com/help">drop me an email</a>.</description>
<link>http://technerdia.com/help</link>
<guid isPermaLink="false">http://technerdia.com/help</guid>
<pubDate><?php echo date('l, j M Y');?> 00:00:02 -1600</pubDate>
</item>
</channel>
</rss>

.htaccess

Grab the directive below, and upload a .htaccess file to your /xml/ folder. This will allow the php to parse the xml, making the feed work.

AddType application/x-httpd-php .php .xml
  • Now log into your Feedburner Account, select the Feed you’re going to modify, click Edit Feed at the top (next to the rss icon) – and modify the Feed URL.
  • You may need to Subscribe to your feed in a Reader to view how your readers will see it.
  • The message you put into your rss-mySite.xml should now display OR if you’re doing a natural update your new message should appear.

Step 4:

Setting Up Feed Statistics

Setting and using the Feed Statistics Plugin is rather straight forward. However, it appears I may have found a bug, which could very well relate to WordPress Multisite, either way – it’s easy to correct.

Access the Feed Menu > Feed Link – which is the default page when first opened. The end of the first line will tell you how many feed subscribers you currently have.

The issue I was having was updating the number of days and checking the first box. Every time I changed it to 30 and checked, it reset itself – even when I made the change in the DB, accessing the script reset the options.

To beat this, I made some very simple adjustments in the Plugin itself.

  • FTP to your /wp-content/plugins folder and go into /wordpress-feed-statistics/ – Download the feed-statistics.php file.
  • Search for two things, both are with functions called ‘update_option’

Search for:

update_option("feed_statistics_track_clickthroughs", "0");
update_option("feed_statistics_expiration_days","3");
  • Replace the track_clickthroughs lines in two locations.
  • Replace the expiration_days change line in one location.
  • Save the file and re-upload.

Replace With:

update_option("feed_statistics_track_clickthroughs", "1");
update_option("feed_statistics_expiration_days","30");
Making The Change Live

Step 5:

Changing / Setting Up Feed URL Redirects

If you currently 301 Redirect your Feeds to Feedburner you’ll need to disable the directs and point them to the root Feed URL on your site, that you put into Feedburner originally. Something like: http://technerdia.com/feed

Redirects: You have two choices basically.

  • For standalone WordPress sites I recommend setting up the redirects in your root .htaccess file, this is the fastest and most reliable way to do the redirects. The examples below are the long methods to doing redirects, read this article for RewriteRules for Feedburner that can easily be changed to your own feed URL.
  • For WordPress Multisites you can’t do this without sites conflicting, so I recommend using the Redirection Plugin, which works perfectly on Multisite installs.

Example 1 .htaccess files redirects – Keeping comment, category, and other post feeds while redirecting main Feed URLs into one location.

redirect 301 /wp-commentrss2.php http://your-domain.com/feed
redirect 301 /wp-atom.php http://your-domain.com/feed
redirect 301 /wp-rss2.php http://your-domain.com/feed
redirect 301 /wp-rss.php http://your-domain.com/feed
redirect 301 /feed/atom http://your-domain.com/feed
redirect 301 /feed/rss2 http://your-domain.com/feed
redirect 301 /feed/rss http://your-domain.com/feed
redirect 301 /feed/rdf http://your-domain.com/feed
redirect 301 /rss.php http://your-domain.com/feed
redirect 301 /feeds http://your-domain.com/feed
redirect 301 /rss http://your-domain.com/feed

Example 2 .htaccess files redirects – This redirects all Feed URLs, comment, category, archive, and post feeds into one central location. This is what I use on technerdia.com – If you add /feed to the end of this post, it will redirect you to my root feed: technerdia.com/feed

redirect 301 /wp-commentrss2.php http://your-domain.com/feed
redirect 301 ^/(.*)/feed$ http://your-domain.com/feed
redirect 301 /wp-atom.php http://your-domain.com/feed
redirect 301 /wp-rss2.php http://your-domain.com/feed
redirect 301 /wp-rss.php http://your-domain.com/feed
redirect 301 /feed/atom http://your-domain.com/feed
redirect 301 /feed/rss2 http://your-domain.com/feed
redirect 301 /feed/rss http://your-domain.com/feed
redirect 301 /feed/rdf http://your-domain.com/feed
redirect 301 /htmlfeed http://your-domain.com/feed
redirect 301 /comments http://your-domain.com/feed
redirect 301 /rss.php http://your-domain.com/feed
redirect 301 /feeds http://your-domain.com/feed
redirect 301 /rss http://your-domain.com/feed

Example3: Using the above redirects in the Redirection Plugin.

/wp-commentrss2.php /feed
^/(.*)/feed$ /feed
/wp-atom.php /feed
/wp-rss2.php /feed
/wp-rss.php /feed
/feed/atom /feed
/feed/rss2 /feed
/feed/rss /feed
/feed/rdf /feed
/htmlfeed /feed
/comments /feed
/rss.php /feed
/feeds /feed
/rss /feed

Step 6:

Swapping Out Feed URL’s In Feedburner & Turning Off Services

Not everyone will need to do this…. If you’re just putting an update notice into your current feed and waiting for the change to happen naturally, ignore the step.

  1. For everyone else, you need to change the Feed URL in your Feedburner account AND shut off the extra features, like pinging.
  2. Log into your Feedburner account and click on the Feed in question.
  3. Then, click on the Publicize Tab and shut off Ping Shot and Socialize options.
  4. Then click the “Edit Feed Details” link at the top and change the URL, to the Temporary RSS Feed that we created in Step 3.
  5. Mine is set to: http://technerdia.com/search/xml/rss-tn.xml

Step 7:

Check Your Work!

It’s time to ensure everything is working before we proceed. Visually check your Feedburner URL in the browser to see if it has updated, then check it in a Reader by adding a new record to make sure it displays correctly. The new temporary RSS Feed Notice should appear or your RSS Footer notice to update the Feed URL.

  • Repeat the same steps with your new Feed URL. Make sure the Websites updates appear and that the RSS Footer notice is showing up.
  • Check Feed Statistics by clicking on the Feed Menu link > Top Feeds link option to see if Subscribers are showing up. It will take a few days for it to settle down.

Step 8:

Update Your Websites

Oh the tasks of tasks! It’s not just Templates it’s also Widgets.

FTP to your theme, download the entire theme, open every PHP file in a Text Editor like Notepad 2. Find & Replace (Edit > Replace or CTRL+H) your Feedburner URL with your Sites default/new Feed URL.

Do this for every template, once done upload the templates back.

  • Enter your WordPress Admin > Appearance Menu > Widgets. Open your Widgets Areas and view the Widgets. Scan through each (Normally Text & PHP Widgets) and find/replace the Feedburner URL with your new Feed URL.
  • Refresh Your Cache.

Step 9:

Update the Social Networks & Online Services

Many of us have socialized our Feedburner URLs, pinged them, posted them, done all types of stuff with the URL. So first, update your Social Networks from Step #1 1/2 then hunt down every other Social Network or Service that you may have used your Feedburner URL on and replace it with your new pimpin Feed URL.

This task may extend far past today’s duties depending on what you’ve done with your Feedburner URL.

Step 10:

Down The Road

I can’t think of a reason to ever delete your Feedburner feed, unless it’s fully dead. As the months roll by you should change out the notice to update the Feed URL, maybe add a Video notice in. The final update that I do, will include a self promo landing page within the Feed. If anyone happens to find it, at least I know they’ll get what I feel is important, some marketing, and information on how to update Feed URLs.

That’s It!!!
I tried to be as detailed as possible with the steps I took… This may seem like a lot of work, but really it isn’t bad. I was able to set up and swap out 10 sites Feeds in less than an hour, once you do it once, it’s a snap after that.

Have a comment, corrections, improvements or feedback?

Let me know in the comments below or send me feedback directly.


~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> http://technerdia.com/524_removing-feedburner.html/feed 0 Twitter Tools – Tracking followers that quit following you. [Revised]http://technerdia.com/180_twitter-tracking.html http://technerdia.com/180_twitter-tracking.html#comments Wed, 30 Mar 2011 16:00:36 +0000 tribalNerd http://technerdia.com/?p=180

~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> Everyone has a different reason to manage the followers they have gained on Twitter. Knowing this, I set out to find a range of Twitter Follower Trackers, Follower Managers, and overall Twitter Statistics Tools that would not only help with my own needs, but yours as well.

What I found was 10 of the best and free Twitter Tools (some have feature upgrades) that help you maintain or manage your Twitter Following, some way or another. From finding and getting notified of lost followers, to management tools that help group & maintain your those you follow you and you follow as well, and even statistics with graphs that break down every aspect of your Twitter account.

  • The links below will all open in a new tab/window.

Qwitter – Catching Twitter Quitters

Qwitter sends you a summary email at least once a day informing you of those who have stopped following you on Twitter!
Qwitter - UseQwitter- Catching Twitter Quitters

MyTweeple – Relationship Management

Manage all your Twitter people in one place, easily track who you’re following and who’s following you back.
MyTweeple - Relationship Management

Friend or Follow – Who is Following You Back?

Quickly and very easily show who’s following you back, who’s not following you, and who your friends are on Twitter.
Friend or Follow - Who's Following You Back?

Who Unfollowed Me

Web-based Twitter App allows you to track your unfollowers in real-time without DM or eMail notices.
Who Unfollowed Me

Twitter Counter – Twitter Statistics

Twitter Counter provides statistics of Twitter usage and tracks over 14 million users and counting.
Twitter Counter - Twitter Statistics

Refollow – Twitter Social Circle

Refollow helps you discover, manage, and protect your Twitter social circle.
Refollow - Discover your Twitter social circle

TwerpScan – Twitter Contact Management

List and sort your followers and friends, up to 100 at a time. Follow, unfollow or block contacts right on the spot.
TwerpScan - Twitter contact management

TwitterLeague – Group Your Twitter Followers

Group your users, see who has more followers, who updates the most, who follows the most people, and more…
Group Your Twitter Followers

ChirpStats – Keep Track of Your Followers

To use chirpstats, simply follow @chirpstats on Twitter and we will message you with your first update in a couple of days!
Twitter follower analytics package

Does Follow

Simple as it gets, check if User1 followers User2.
Does Follow - Does user1 follow user2?

Bonus Tool – Tweet Adder

TweetAdder isn’t exactly a follower management tool, it’s more of a follower getter that helps maintain your following for you. The tool acts like a human doing the Twitter work over the Web. From logging into twitter, following and unfollowing users, and tweeting for you… The feature list is rather extensive, and the key factor is, it’s all done from the Web.

While I only recently started using TweetAdder, I use it on all of my Accounts. So far, it appears to add roughly 600-1000 new followers a month, and I’m using conservative settings. If you’re worried about the quality of users, you can load them yourself, use the search, or follow another users followers or lists. And you can apply filters to remove some users.

I’ve used several paid twitter tools, this is the only one I’ve ever needed, I just wish it was around a few years back. Mix it with a few of the totally free tools above, and you’ve got the best twitter weapon combo you can get!

Tweet Adder

* Yes, that’s my TweetAdder affiliate link, yes if you purchase through that link I may earn a commission. And if you do, hit me up, I’ll gladly assist if you have any questions!



Enjoy this article? Hate it? Find an error?

Let me know in the comments below or if comments are not open drop me feedback directly!!!


~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> http://technerdia.com/180_twitter-tracking.html/feed 0 WP Function that protects your wp-login.php with PHP Auth [UPDATED]http://technerdia.com/313_wp-login-protection.html http://technerdia.com/313_wp-login-protection.html#comments Mon, 21 Mar 2011 14:15:29 +0000 tribalNerd http://technerdia.com/?p=313

~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> Protect Your WordPress Login PageThe Function below adds a simple layer of security to your WordPress Websites. When anyone visits the wp-login.php page an authentication window will pop prompting the visitor to enter a Username and Password before they can access the wp-login.php file.

This is a simple protection solution for any WordPress site with Registrations turned off and for sites with very few or only one person that manages them.

Place the function below into your functions.php file for each WordPress Theme/site that you want to protect. Swap out the YOUR-USERNAME and YOUR-PASSWORD with your user/pass info, and it’s ready to go!

 if ( $_SERVER['PHP_SELF'] == "/wp-login.php" ) { add_action( 'init', 'login_init' ); /* Do Action */ }
function login_init() {
 $user = "YOUR-USERNAME";
 $pass = "YOUR-PASSWORD";
  get_option('get_header');
if( $_SERVER['PHP_AUTH_USER'] != $user && $_SERVER['PHP_AUTH_PW'] != $pass ) {
    header("WWW-Authenticate: Basic realm=""");
    header("HTTP/1.0 401 Unauthorized");
exit;
  }
}

Version 2

If the above example works, but a correct username & password doesn’t seem to be accepted, the issue might be that PHP can not access the PHP_AUTH_USER and PHP_AUTH_PW functions.

To correct this you’ll need use a RewriteRule.

The RewriteRule

Use ONE of the following RewriteRules in your Websites root .htaccess file. I do not fully understand this rule, but it appears that:

The PHP_AUTH_USER and PHP_AUTH_PW functions and values of them, when entered into the auth box, is loaded into a variable called HTTP_AUTHORIZATION. The PHP afterward then gets the PHP_AUTH_USER and PHP_AUTH_PW values by accessing the HTTP_AUTHORIZATION variable.

** Test your Website after adding the rewrite rule. Posts, Pages and Images will 404 if you have the incorrect one.

Worked On WordPress Multisite – Put the Rule directly below RewriteEngine On line, within the .htaccess file of your Website.

RewriteRule .? - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

Other Possible RewriteRules: The first RewriteRule below is the most common use rule.

RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L]
RewriteEngine On
RewriteRule .* - [env=HTTP_AUTHORIZATION:%{HTTP:Authorization},last]
RewriteEngine On
RewriteRule .* - [env=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

The Code
Place the function below into your functions.php file for each WordPress Theme/site that you want to protect. Swap out the YOUR-USERNAME and YOUR-PASSWORD with your user/pass info.

if ( $_SERVER['PHP_SELF'] == "/wp-login.php" ) {
    add_action( 'init', 'login_init' );
}
function login_init() {
    $user = "YOUR-USERNAME";
    $pass = "YOUR-PASSWORD";
    get_option('get_header');
    list( $_SERVER['PHP_AUTH_USER'], $_SERVER['PHP_AUTH_PW'] ) = explode( ':', base64_decode( substr( $_SERVER['HTTP_AUTHORIZATION'], 6 ) ) );
    if ( $user == $_SERVER['PHP_AUTH_USER'] && $pass == $_SERVER['PHP_AUTH_PW'] ) {
        header('WWW-Authenticate: Basic realm=""');
        header("HTTP/1.0 401 Unauthorized");
        echo '';
        exit;
    }
 }
  • You can use the same username and password for each site, however I recommend each site has at least a unique password.
  • Do Not use the same username and password that you use to access the WordPress Admin.
  • Don’t forget to sometimes change your username and passwords up.
  • Use Password Management Software like KeePass to manage your passwords.
  • Remember, this is simply an extra layer of security, it for sure is NOT a solid solution for protection – you should still select a very complex master username and password to access the Admin along with other WordPress Security Plugins.

If this article helped you then please post a comment below and let me know!

I would love to hear from you in the comments below or if comments are not open send me feedback directly.


~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> http://technerdia.com/313_wp-login-protection.html/feed 0 The Best Password Manager for Windows – Mac – Linux / Ubuntu – Smart Phones and more…http://technerdia.com/284_password-manager.html http://technerdia.com/284_password-manager.html#comments Wed, 16 Mar 2011 22:37:52 +0000 tribalNerd http://technerdia.com/?p=284

~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> When it comes to kick butt little tools, KeePass wins hands down!

This tool has changed how I use my computer, my browsers and even how I plan for vacations.

KeePassWhat is KeePass? Simply, it’s a very secure password manager, that can group your passwords together for easy management. And it works on just about everything, Windows of all flavors, Smart Devices like the iPhone, Droids, BlackBerry’s, and so on… Linux/Unbuntu, Mac OS X, I’m probably missing a few. It’s light weight, simple to use, has a movable database… truly, it rocks.

Other than Google, every Password I have is no longer stored in my browser. I keep everything, from the web, ftp, shell, database and client secure details in my KeePass.

  • I only have one password to remember, and that’s to KeePass.
  • I use KeePass to generate long random passwords for me.
  • No site, service or feature has the same password.

Downloading Keepass: http://keepass.info/

The options are the Classic Edition and Professional Edition. The Pro Edition requires MS .NET Framework…. I downloaded the Classic Edition. Choose either, or go with the Classic if you’re not sure which one to choose.

Installing KeePass

KeePass is portable, it doesn’t make registry changes and runs without special libraries. You can place it on a USB drive and even run it on a public machine all without installing anything.

Setting up KeePass

Once you run KeePass it will ask you to create a database and Composite Master Key, which I recommend doing for Security reasons. You have two things to remember here, your Master Password (so select a strong one) and the location to where you save the Database.kdb and pwsafe.key files.

  • Be sure to backup your Database.kdb and pwsafe.key files once you’ve populated them with account details.
  • Your pwsafe.key file may be hidden on your Computer depending on your OS and setup. You may need to unhide important files before you can copy the key file for a backup.

Running KeePass

Once you start KeePass, enter your Master Password and select your Key. The software can be a bit confusing at first, but a couple features cover most of your needs.

First is Groups, groups simply group your accounts/passwords together. I have groups for my clients (with sub-groups inside of it), affiliate programs, social networks, tools, forums, etc.

KeePass Groups Example

  • To create a group: Click the Edit link at the top, then select Add Group

KeePass Add Entry Example The next feature is Adding an Entry. On the main toolbar, it’s the 4th icon. If you mouse over it, it says Add Entry. Clicking Add Entry brings up a window to enter the details. Everything here is self explanatory other than maybe the Password Generator.

  • To add an entry: Click the 4th icon in the main menu (Add Entry) or access the Edit link at the top, then select Add Entry.

Every new entry gets a fresh new password, click the icon to the right of the Password box to expose the password, for copying or pasting in a new password.

KeePass Password Manager

If you want to generate a new password, click the Keys Icon to the right of the Repeat Password box. At the bottom of the window, click the Generate button to create a new password. It’s instantly copied over to the entries password field.

Maintaining Entries

Each entry can be dragged into groups. So if the entry is created in the wrong spot, simply select and drag it to the proper location.

To View or Edit an Entry, right click on the Entry and select Edit/View Entry. Use this same menu to delete or duplicate an entry.

Creating Multiple Databases For Others To Access

Does your Computer get used by your spouse, kids or staff? Then no worries… In the main menu, click the New Icon (first icon). Set a new Master Key then your Password. Now everyone can have a unique way to access PassKeep to store passwords.

My spouse uses her own Master Key File while my kids just have a Password enter with no Key File to select. It’s hard enough to get children to use this software, so cut out every step you can that may push them away from using it, every time!

  • Backup your database and key file before doing this.

KeePass Settings

To access the Settings open the Tools Menu at the top, then click on Options. Setting up the software is really more about how you want to use it…

  • Security: I have two fields unchecked, the 3rd (Lock wordpress) and the last (expire entries) – the others are all checked.
  • Interface (GUI): The two key settings here for me are the Minimize and [x] close selections. I have both selected. Instead of the software closing, it goes to my system tray, when I open it – I have to enter my Master Password, just like I would if the software was fully closed.
  • I didn’t modify any other settings past these…. I do suggest you read through the other tabs & features to ensure the settings are set how you like.

Vacation Time

Vacation in MexicoI always take a note pad and pen with me when I travel. Every time before traveling, I would write down the most important login details, passwords, and even url’s. No worries, I used my own form of encryption to mask things.

Today though… I just grab a copy of KeePass, my Database and Key file and put them on a flash drive and I burn a CD to toss in with my suitcase as a backup. I also put the information in a zip file on my server, within a password protected directory.

No longer do I worry about losing my note pad, backup paper in my wallet or what actually happened the most, I forgot to write down a password to something important…. I’m very happy to say, those worries are now gone.


KeePass

It’s here to stay… It’s used daily, it’s used by family members, it’s even used on vacations. You should be using KeePass as well.

Proper security starts and ends with you!

Enjoy this article? Hate it? Find an error?

Let me know in the comments below or if comments are not open drop me feedback directly!!!


~ Thank you for subscribing to techNerdia.com - Please Share This Post With Others ~

]]> http://technerdia.com/284_password-manager.html/feed 2