• If you update and forget to re-activate (somewhat hard to do since it reminds the shit out of you on every page of the admin), it could cause problems.
• We are forced to see Michael’s large promotional/donation blocks up in our faces above where we can reactivate. I’m all for plugin authors making as much money as they can, but this seemed to me a bit too far.
• I really like the plugin and use it on all my sites and wish it was closer to my version of perfect.

But Michael recently stopped by to explain his side, which is interesting, so I thought I’d update the record, as it were.

Michael Torbert:

… a site complained that a new feature damaged their site’s search engine results placement. They finally admitted that they were incorrect in this assumption, and that the cause was something else unrelated to the plugin, but their original assessment was that a new feature hurt them.

From then on, any update which introduces new options (not just behind the scenes changes) require the user to reactivate the plugin from the settings page, to make sure that they can review the options.

I can understand this line of thinking. Forcing the user to visit the options page may be the closest thing to getting them to think about the plugins options as is possible.

Michael is also aware of the potentially negative experience:

I’m aware of how it looks, and I understand that it’s annoying for some users. I spent a lot of time thinking about it and consulted with a number of other people in the community when contemplating the decision about what to do.
Unfortunately, in this case there was no way to make everyone happy, so I sided with ensuring that nobody could ever say (even if incorrectly as was the case) that new features introduced caused harmful effects to their sites SEO.

Perhaps a better way?

Let’s say that the moment you decided to upgrade the plugin to a version with new features, the google bot decided to stroll by your site. The plugin is momentarily deactivated, so the google bot sees lots of differences. The canonical tag is gone, the meta tags are gone, the page title is different. Surely that isn’t good for SEO.

Perhaps this plugin could save the currently running version number in the wp_options table. Then when an upgrade is performed, it could update this but also save the previous version number. Then instead of deactivating itself, it could display a message (rather boldly, like the current message) which explains what is new with the plugin and things you should watch for.

This post was generated by an RSS Feed from Digging Into WordPressYou may also like to read:

• How to show an urgent message in the WordPress admin area
• What to do when Auto-Update Fails
• Postage Sydney
• WordPress plugin: Protect your blog from malicious URL Requests
• 15 Anti-Spam Plugins for WordPress

Why All-In-One SEO Deactivates is a post from: Build Me A Fab Website

<?php
$query = "SELECT * from $wpdb->
comments WHERE comment_approved= '1'
ORDER BY comment_date DESC LIMIT 0 ,5";
$comments = $wpdb->get_results($query);

if ($comments) {
    echo '<ul>';
    foreach ($comments as $comment) {
        $url = '<a href="'. get_permalink($comment->
        comment_post_ID).'#comment-'.$comment->
        comment_ID .'" title="'.$comment->
        comment_author .' | '.get_the_title
        ($comment->comment_post_ID)
        .'">';
        echo '<li>';
        echo '<div class="img">';
        echo $url;
        echo get_avatar( $comment->
        comment_author_email, $img_w);
        echo '</a></div>';

        echo '<div class="txt">Par: ';
        echo $url;
        echo $comment->comment_author;
        echo '</a></div>';
        echo '</li>';
    }
    echo '</ul>';
}
?>

Display most recent comments with Gravatar

This post was generated by an RSS Feed from WP RecipesYou may also like to read:

• WordPress hack: Get popular posts by comments count
• WordPress hack: Remove admin name in comments class
• 10 More WordPress Hacks for Easy Life
• WordPress How to : Style comments of every roles
• WordPress hack: Insert comments programatically

Display most recent comments with Gravatar is a post from: Build Me A Fab Website

The first thing to do is to get your logo ready. Size might be 30*31px and the logo must be uploaded the images directory of your theme dir.
For exemple, if you’re using the rockstar theme from WooThemes, your logo must be uploaded to wp-content/themes/rockstar/images.

Once done, open you functions.php file and paste the following code in it:

add_action('admin_head', 'my_custom_logo');

function my_custom_logo() {
   echo '
      <style type="text/css">
         #header-logo {
          background-image:
          url('.get_bloginfo('template_directory').'
          /images/custom-logo.gif)
          !important; }
      </style>
   ';
}

Thanks to Smashing Magazine for this great hack!

How to define your own dashboard logo

This post was generated by an RSS Feed from WP RecipesYou may also like to read:

• How to detect mobile visitors on your WordPress blog
• Specify Unique CSS File Per Post
• Custom Page Titles from Scratch
• WordPress tip: Send article to a friend by email
• Postage Sydney

How to Define Your Own Dashboard Logo is a post from: Build Me A Fab Website

To achieve this recipe, you first have to get the code from detectmobilebrowsers.mobi and upload it to your theme directory.

Once done, simply open your header.php file and place the following at the top of the file. Don’t forget to edit line 5 according to the page where you’d like to redirect mobile users.

include('mobile_device_detect.php');
$mobile = mobile_device_detect();

if ($mobile==true) {
  header( 'Location: http://your-website.com/?theme=Your_Mobile_Theme' ) ;
}

Thanks to Jeff Starr for this very cool idea!

How to detect mobile visitors on your WordPress blog

This post was generated by an RSS Feed from WP RecipesYou may also like to read:

• Redirect Mobile Users to a Mobile WordPress Theme
• WordPress plugin: Protect your blog from malicious URL Requests
• WordPress tip : Fetch and display RSS feeds
• Insert Google Analytics without editing your theme
• WordPress tip : Better page navigation

How to detect mobile visitors on your WordPress blog is a post from: Build Me A Fab Website

Just insert the following code into your functions.php file, and you’re done. Don’t forget to paste your Google Analytics code on line 5.

<?phpadd_action('wp_footer', 'ga');

function ga() { ?>    // Paste your Google Analytics code here<?php } ?>

Have you checked out the new Headway theme for WordPress? It is pretty cool. You can read a review here.

Insert Google Analytics without editing your theme

This post was generated by an RSS Feed from WP Recipes

You may also like to read:

• WordPress tip : Fetch and display RSS feeds
• How to detect mobile visitors on your WordPress blog
• WordPress tip : change excerpt length depending of the category
• How do I add Google Analytics to my Facebook Fan Page?
• WordPress hack : How to display ads on old posts only

Insert Google Analytics without editing your theme is a post from: Build Me A Fab Website

This recipe is extremely easy to implement : open you index.php file and replace your current navigation by the following:

<?php if ($paged > 1) { ?>

	<div class="navigation">
	  <div class="alignleft">
           <?php next_posts_link
           ('&laquo; Older Entries') ?>
           </div>
           <div class="alignright">
           <?php previous_posts_link
           ('Newer Entries &raquo;') ?>
           </div>
	</div>

<?php } else { ?>

	<div class="navigation">
	  <div class="alignleft">
          <?php next_posts_link('&laquo; Older Entries') ?>
          </div><div class="alignright">
          <a href=
          "http://perishablepress.com/press/archives/">
          Site Archives &raquo;</a>
          </div>
	</div>

<?php } ?>

Thanks to Jeff Starr and Chris Coyier for this useful idea! Have you read their book? If no, I definitely recommend it (read review here)

WordPress tip : Better page navigation

This post was generated by an RSS Feed from WP RecipesYou may also like to read:

• Optimizing WordPress Post Navigation
• WordPress tip : Fetch and display RSS feeds
• WordPress tip: Insert custom content after each post
• How to detect mobile visitors on your WordPress blog
• Next/Previous Post Navigation Outside of the WordPress Loop

WordPress tip : Better page navigation is a post from: Build Me A Fab Website

• All visitors will see the current theme
• Only the designer will see the new theme
• All site plugins will work with the new theme
• Smooth transition between old and new theme at launch

These are the main concerns, but there are a few other details that need addressed to ensure smooth theme development on a live site. Let’s take a look at how to achieve these goals and effectively develop themes behind the scenes..

You need a plugin

The easiest way to develop a new theme behind the scenes is to install a good theme-switcher plugin. There are plenty available:

• Theme Switcher
• Theme Switcher Reloaded
• Alternative Theme Switcher
• Theme Preview
• Theme Test Drive
• NK Theme Switch

Any of these plugins will work fine for the purposes of working with multiple themes on your site. If you also plan on enabling your visitors to switch themes, I would have to recommend the newer NK Theme Switch plugin. NK Theme Switch does everything the other plugins can do, but with the added bonus that it redirects users back to the page from which they came after switching themes. The other two plugins switch themes, but the user is always redirected back to the home page after the theme switch.

Note that, for the different theme-switcher plugins, the URLs used when switching themes include different query-string parameters that are similar but not interchangeable. Once you implement a theme switcher, replacing it with a different plugin is going to be difficult.

In any case, once you have your theme-switcher plugin of choice activated, you’re going to need to know how to actually switch the themes..

Switching themes

Different plugins involve different methods of switching to a different theme. If you are using NK Theme Switch, you can select and activate your alternate (development) theme from within the WordPress Admin. This is the easiest way to do it. If you are using one of the other theme-switching plugins, activating the alternate theme for your browser is as easy as entering a specific URL into the address bar. These theme-switching URLs look similar for either of the first two plugins:

http://domain.tld/index.php?wptheme=ThemeName

For example, here is the URL used to switch to one of my favorite themes at Perishable Press:

http://perishablepress.com/press/index.php?wptheme=Perishable

The syntax here is straightforward — the only thing that needs to be changed is the theme name, which in this case is “Perishable”. When developing a new theme for Perishable Press, I simply jot down the theme-switch URL for both the new theme and the active default theme. This makes jumping back and forth very easy. Of course, the general format of these URLs will vary depending on the particular theme-switching plugin that you use.

Another option for switching between current and alternate themes is to actually include the theme-switching links and/or dropdown menu right there on the theme pages themselves. For example, including the theme-switch dropdown menu in the footer of all your themes is a great way to speed up and simplify the development process. But be advised, unless you explicitly exclude your new theme from the theme-switch menu, it will be available for all of your visitors to see and activate. The other method of just using the URL directly is a good way to ensure privacy.

Now that you are setup and easily switching between themes, there are a few other points to consider..

Your new theme is just another theme

This may sound strange, but there is nothing special about your new theme — it’s treated by WordPress as any other theme in your “themes” directory. All of the requirements of the default theme apply:

• Your new theme needs a properly configured style.css file
• Your new theme needs a working index.php file

Assuming your new theme meets these basic requirements, WordPress will recognize your theme as such and display it when activated (either through the Admin or via theme-switch plugin). Incidentally, the name of your theme is specified via the style.css file. The “Theme Name” that is listed here will be the same one used in your theme-switching URLs.

Once you get the basics of your new theme established, use your theme-switching plugin to activate it locally in your browser. Form there, you can rock the design however you want, exactly as you would do when starting from a fresh installation of WordPress. While you are working on your new theme, your visitors will still be seeing your default active theme, which is whatever you specify in the WordPress Admin. This is why the theme-switch development method works so well.

Pages, plugins, and custom functions

Here are a few more little things that will help you when developing your themes behind the scenes..

Plugins affect all themes

Even when your theme is not set as the current default, it will still be affected by all of the plugins installed on your site. This is one of the benefits of using plugins over custom functions..

Custom functions only affect the theme being used

In contrast to plugins, custom functions (i.e., functions placed in your theme’s functions.php file) only affect the current theme being viewed. If you seem to missing some functionality in your “behind-the-scenes” theme, make sure that you have properly transferred any required custom functions.

Page templates will confuse you

This happens to everyone: you are working behind the scenes on a new theme and you can’t seem to get a custom page template to appear in the WordPress Admin. This is because the page editor only shows the templates available to the current default active theme (i.e., the one that everyone sees). To work around this, you can either upload a copy of the custom page template to the active theme, or temporarily switch the default active theme to your behind-the-scenes theme. Personally, I use the former method and just delete the page template if it’s not needed in the default theme.

And last but not least..

Prepare for launch!

Once you have your new theme pimped out and ready to go, simply change your default active theme in the WordPress Admin to launch it for the world see. That’s all there is to it! :)

This post was generated by an RSS Feed from Digging Into WordPressYou may also like to read:

• Redirect Mobile Users to a Mobile WordPress Theme
• Specify Unique CSS File Per Post
• Admin Bar Tricks
• Next/Previous Post Navigation Outside of the WordPress Loop
• WordPress Theme – Businezz!

How to Develop WordPress Themes Behind the Scenes is a post from: Build Me A Fab Website

To apply this recipe to your blog, simply paste the following function into your functions.php file, and that’s all. Hard to do something simpler!

function direct_email($text="Send by email"){
        global $post;
        $title = htmlspecialchars($post->post_title);
        $subject = 'Sur '.htmlspecialchars(get_bloginfo('name')).'
        : '.$title;
        $body = 'I recommend this page : '.$title.'.
        You can read it on : '.get_permalink($post->ID);
        $link = '<a rel="nofollow" href="mailto:?subject='
        .rawurlencode($subject).
        '&amp;body='.rawurlencode($body).'" title="'
        .$text.' : '.$title.'">'
        .$text.'</a>';
        return $link;
}

Then add this to where ever you want on your template, for example in single.php:

<?php echo direct_email('Send this article to a friend') ?>

Thanks to : WebInventif.fr for the awesome trick!

WordPress tip: Send article to a friend by email

This post was generated by an RSS Feed from WP RecipesYou may also like to read:

• WordPress Tip: Remove nofollow Attributes from Post Content
• 10 More WordPress Hacks for Easy Life
• WordPress tip : Fetch and display RSS feeds
• 22 Latest Exceptional WordPress Hacks
• How to modify lists like ‘Categories’ and ‘Blogroll’ in WordPress?

WordPress tip: Send article to a friend by email is a post from: Build Me A Fab Website

1. CSS Tooltips

Through this code, you can have your own tooltips using just CSS. This is the CSS code :-

a:hover
{background:#ffffff; text-decoration:none;}
/*BG color is a must for IE6*/
a.tooltip span
{display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span
{display:inline; position:absolute; background:#ffffff;
border:1px solid #cccccc; color:#6c6c6c;}

Now, use the tooltips like this :-

Easy <a class="tooltip" href="#">Tooltip<span>
This is the crazy little Easy Tooltip Text.</span></a>.

2. Eric Meyer’s Reset Code

HTML tags on different browsers have their own formatting and styling. To reset all that and bring everything to ground zero before starting to code, just add these lines at the beginning of your CSS file.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3. Handy CSS Debugger

This code will add different color borders around your assets depending on its level. At each level in the hierarchy the color changes so you can see when “depth” changes. You can comment it out if you don’t need it.

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

4. Centering a DIV of Unknown Width

You can easily center a DIV by using margin:auto; property when you have mentioned its width in your CSS. But in case you wanted to center a DIV with unknown width, here is the code to do so :-

.content {
	margin: 0 auto 8px;
	display: table;
	}

.content div {
	display: table-cell;
	}

<!--[if IE]>
.content {
	display: block;
	text-align: center;
	}
.content div {
	display: inline;
	zoom: 1;
}
<![endif]-->

5. Adding AJAX style Loading Icon to Large Images

Instead of using any kind of JavaScript to add a loading icon before your large image is loaded, you can use this simple CSS technique. Just use the following class in the same DIV where you are calling the large image. Make sure the path to the small loading.gif is correct.

.loading { background: url(loading.gif) no-repeat center center; }

6. CSS Image Preloader

In case you need to preload images before the loading of your page completes, use the following technique. Just add the images’ paths to the DIV class, and call the DIV in your HTML. The DIV will not be visible but the images will preload nicely.

div.loader{
background:url(images/hover.gif) no-repeat;
background:url(images/hover2.gif) no-repeat;
background:url(images/hover3.gif) no-repeat;
margin-left:-10000px;
}

7. CSS Opacity Hack

You can set opacity of any asset by using the following codes (to achieve transparency) :-

selector {
filter: alpha(opacity=60); /* MSIE/PC */
-moz-opacity: 0.6; /* Mozilla 1.6 and older */
opacity: 0.6;
}

8. Min-Height for IE and all other browsers

Since min-height doesn’t work in IE, this code makes up for IE’s shortcomings. The first part of the code is the correct code that works in Firefox and Safari. The second part of the code is for IE. Internet Explorer will ignore min-height and is just given a height of 8em. The IE bug automatically expands the container to fit the extra text.

/* for browsers that don't suck */
.container {
  min-height:8em;
  height:auto !important;
}

/* for Internet Explorer - which of course sucks */
/*\*/
* html .container {
  height: 8em;
}
/**/

9. Styling Links by File Type

You can easily style specific URLs by using icons. This works only with CSS3 compatible browsers and degrades nicely with non-compatible browsers. Make sure to change the icon image paths.

/* external links */
a[href^="http://"]
{
padding-right: 13px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]
{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]
{
padding-right: 18px;
background: url(acrobat.png) no-repeat center right;
}

10. Remove Textarea Scrollbar in IE

IE has this nasty habit of showing a scrollbar in the textarea even when the content is inside the textarea. To avoid this, use the following code :-

textarea{
	overflow:auto;
}

This post was generated by an RSS Feed from Blog Oh BlogYou may also like to read:

• Randomized Grid of Posts
• Don’t Lose Your :focus
• Here’s Something Interesting About CSS Borders
• The Right Way to Add Custom List Markers to Unordered Lists
• How to Build a Top Sliding Login Panel

10 CSS Snippets to Save Precious Time is a post from: Build Me A Fab Website

Many times, I get requests from my clients who want to implement a Sliding Login Panel at the top of their WordPress blogs. With jQuery and the WordPress default login code, its very easy to build. Here is what it will look like :-

DEMO SLIDING LOGIN PANEL

The above demo is only HTML code and will not work with your WordPress blogs. In order to implement it into your WordPress themes, here is what you have to do :-

Javascript

In your wordpress theme (where you want to implement the sliding login panel), open up the header.php file. Paste the following code just before the head ending tag (< /head>) :-

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#slide-panel").slideToggle("slow");
});
});
</script>

The above script will call jQuery using Google API and also initiate the sliding effect into your login panel.

HTML

In the same header.php file, right after the body tag (< body>) starts, paste the following code :-

<div id="slide-panel"><!--SLIDE PANEL STARTS-->
<?php if ( ! is_user_logged_in() ){ ?>
<h2>Login</h2>
<div class="loginform">
<div class="formdetails">
<form action="<?php echo get_option('home');
?>/wp-login.php" method="post">
<label for="log">Username : </label><input
type="text" name="log" id="log" value="<
?php echo wp_specialchars(stripslashes($user_login), 1)
?>" size="20" />&nbsp;&nbsp;&nbsp;&nbsp;
<label for="pwd">Password : </label><input
type="password" name="pwd" id="pwd" size="20" />
<input type="submit" name="submit" value="Login" class="button" />
<label for="rememberme"><input name="rememberme"
id="rememberme" type="checkbox" checked="checked"
value="forever" /> Remember me</label><input
type="hidden" name="redirect_to" value="<
?php echo $_SERVER['REQUEST_URI']; ?>" />
</form>
</div>
<div class="loginregister">
<a href="<?php echo get_option('home');
?>/wp-register.php">Register</a> |
<a href="<?php echo get_option('home');
?>/wp-login.php?action=lostpassword">Recover password</a>
</div>
</div><!--loginform ends-->
<?php } else { ?>
<div class="loginform">
<h2>Control Panel</h2><ul>
<li><a href="<?php echo get_option('home');
?>/wp-admin/">Dashboard</a></li> |
<li><a href="<?php echo get_option('home');
?>/wp-admin/post-new.php">Write new Post</a></li> |
<li><a href="<?php echo get_option('home');
?>/wp-admin/page-new.php">Write new Page</a></li> |
<li><a href="<?php echo wp_logout_url( get_bloginfo('url') );
?>" title="Logout">Logout</a></li></ul>
</div><!--loginform ends-->
<?php }?>
</div><!--SLIDE PANEL ENDS-->
<div class="slide"><a href="#" class="btn-slide"><
?php if ( ! is_user_logged_in() ){ ?>Login<?php } else
{ ?>Logout<?php }?></a></div><!--LOGIN BUTTON TEXT-->

The above code will integrate the sliding panel on top of your wordpress theme.

CSS

Now, all we are left with is styling the panel. Open up your style.css file and paste the following at the end of the file :-

* {margin:0; padding:0; outline:0;}
#slide-panel{ background-color:#000;border-bottom-style:solid;
border-bottom-width:2px;display:none;height:100px;margin:auto;}
.slide {width:950px; margin:auto;}
.btn-slide:link, .btn-slide:visited{color:#fff; float:right;
display:block;font-size:14px; text-transform:uppercase;
font-weight:bold;height:26px; padding:3px 0 3px 0;
line-height:22px;text-align:center;text-decoration:none;
width:100px; background-color:#000; font-family:Arial;}
.loginform {width:950px; margin:auto; color:#999;
font-family:Arial, Helvetica, sans-serif;}
.formdetails {color:#FFF; font-size:12px;padding:5px;}
.formdetails input{border:none; padding:2px 5px 2px 5px;
background-color:#EFEFEF;}
.loginregister {color:#999; padding:5px;}
.loginregister a:link, .loginregister a:visited {color:#FFF;
font-size:11px; text-decoration:underline;}
.loginform h2 {padding:10px 10px 10px 0; font-size:18px;
font-weight:normal; text-transform:uppercase;}
.loginform ul li {display:inline;}
.loginform ul li a:link, .loginform ul li a:visited {color:#FFF;
font-size:12px; text-decoration:underline;}

Now, try running your theme. Voila! You have a fully functional Sliding Login Panel of your own! Let me know if you have any issues.

This post was generated by an RSS Feed from Blog Oh BlogYou may also like to read:

• Randomized Grid of Posts
• how to add post thumbnail on home page in wordpress
• Display most recent comments with Gravatar
• Specify Unique CSS File Per Post
• how to easily add google ad through text widget in wordpress

How to Build a Top Sliding Login Panel is a post from: Build Me A Fab Website