// Change howdy text in WordPress 3.3
add_action( 'admin_bar_menu', 'wp_admin_bar_my_custom_account_menu', 11 );

function wp_admin_bar_my_custom_account_menu( $wp_admin_bar ) {
$user_id = get_current_user_id();
$current_user = wp_get_current_user();
$profile_url = get_edit_profile_url( $user_id );

if ( 0 != $user_id ) {
/* Add the "My Account" menu */
$avatar = get_avatar( $user_id, 28 );
$howdy = sprintf( __('Welcome Back, %1$s'), $current_user->display_name );
$class = empty( $avatar ) ? '' : 'with-avatar';

$wp_admin_bar->add_menu( array(
'id' => 'my-account',
'parent' => 'top-secondary',
'title' => $howdy . $avatar,
'href' => $profile_url,
'meta' => array(
'class' => $class,
),
) );

}
}

Code source

]]> http://webdesignandsuch.com/change-howdy-text-in-wordpress-3-3/feed/ 0 http://webdesignandsuch.com/how-to-register-multiple-custom-menus-in-wordpress/ http://webdesignandsuch.com/how-to-register-multiple-custom-menus-in-wordpress/#comments Thu, 12 Apr 2012 14:14:11 +0000 mike ilz http://webdesignandsuch.com/?p=3240 WordPress custom menus are one of the best features released within the last few years by the WordPress team. The easy drag and drop editor makes it a breeze to add pages, categories, or even external links without the use of any plugins. But what if you need to add multiple menus (perhaps separate header and footer navigation menus)? Here’s how you add multiple custom menus in WordPress.

Add the following to your functions.php file. The 2 menus we are creating are the “Primary”, and “Secondary” menus.

//Register Navigations
add_action( 'init', 'my_custom_menus' );
function my_custom_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( 'Primary Menu' ),
            'secondary-menu' => __( 'Secondary Menu' )
        )
    );
}

To add them to your site you need to add the following to your WordPress template files (most likely your header.php and footer.php files). I also added the code which allows you to change the CSS class for the nav bars.

<?php wp_nav_menu (array('theme_location' => 'primary-menu','menu_class' => 'nav'));?>
<?php wp_nav_menu (array('theme_location' => 'secondary-menu','menu_class' => 'nav'));?>

]]> http://webdesignandsuch.com/how-to-register-multiple-custom-menus-in-wordpress/feed/ 0 http://webdesignandsuch.com/post-filler-text-if-the_content-empty-wordpres/ http://webdesignandsuch.com/post-filler-text-if-the_content-empty-wordpres/#comments Tue, 21 Feb 2012 13:11:30 +0000 mike ilz http://webdesignandsuch.com/?p=3373 Coding a WordPress theme the other day I realized it would be nice if blank pages had filler content until somebody posted content to the page. This helps to visualize the site and pages better. So if the_content is empty, add filler content..when it is not empty replace the filler content with the real content. Here is the solution:

<?php
$cc = get_the_content();
if($cc != '') { ?>
<?php the_content(); ?>
<?php } else { ?>
<p>My filler content goes here.</p>
<?php } ?>

Source: http://wordpress.org/support/topic/if-content-exists

If you’re looking into developing a mobile website for your business or for your client make sure to checkout my mobile website and theme pack “emdot”, available exclusively on ThemeForest. For only $9 you get a fully functioning mobile site with 12 different themes, a validating contact form, a portfolio with mobile touch, an “add to home bubble” for iPhones and iPads, 50+ icons for the navigation, 20 social media icons, and a bunch more. Simply pop in your content and you’re ready to go. Well almost ready to go, the last thing you’re going to need is to redirect people to your new mobile website.

Redirecting people to your mobile website is easy enough by using a .htaccess file. Basically you say “if people visiting my website are on a mobile device send them to http://m.example.com, and if they aren’t on a mobile device send them to http://example.com”. This of course assumes that you setup a subdomain located at “m.example.com”.

After setting this up for a client I realized one problem with this. When setting up your mobile website you should have a link in the footer allowing the user to visit your full website (you most likely have some content on your full website that you don’t have on your mobile website). Your link would look something like this:

<a href="http://example.com">Visit full site</a>

Easy enough, except for one thing.. we redirected the users from the main site to the mobile site. So if they click the “visit full site” link they will be redirected back to the mobile site again.

The solution is to set a cookie which allows you to visit the full site without being redirected. Setting the cookie allows you to go from the mobile site to the full site, and visit any page on the full site once you’re there without being redirected back to the mobile site.

Step 1.

Setup your mobile site at http://m.example.com

Step 2.

Add the following link to your mobile site:

<a href="http://www.example.com?m=0">Full Website</a>

*If you’re using jQuery mobile (such as the emdot theme), you may need to add rel=”external” to your link, like this:

<a rel="external" href="http://www.example.com?m=0">Full Website</a>

Step 3.

Create a .htaccess file (which is just a regular file such as a .txt files renamed .htaccess). Add the following code and replace the 2 domain names. Upload the file to the root of your website. If you already have a .htaccess file simply add this code to the existing file.

*Notes: Make sure you don’t overwrite your existing .htaccess file by accident. This only works on Apache servers.

RewriteEngine on
RewriteBase /

# Check if this is the noredirect query string
RewriteCond %{QUERY_STRING} (^|&)m=0(&|$)
# Set a cookie, and skip the next rule
RewriteRule ^ - [CO=mredir:0:www.example.com]

RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile}       !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT}  "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]

# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST}          !^m\.
# Can not read and write cookie in same request, must duplicate condition
RewriteCond %{QUERY_STRING} !(^|&)m=0(&|$) 

# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP_COOKIE}        !^.*mredir=0.*$ [NC]

# Now redirect to the mobile site
RewriteRule ^ http://m.example.com [R,L]

Credit. I tried a few different scripts to find a solution that worked for me, and the above script was the winner. The original script came from this thread on Stack Overflow.

The dashboard experience has been improved for iPads and other tablets, which will help people on the move. Other features of the dashboard include a responsive design of some elements, HTML5 doctype, a new dashboard welcome feature and new help tabs. A new drag-and-drop feature has made uploading different types of content a breeze.

This latest release is exciting for developers worldwide, and reminds me how happy I am to be part of the WordPress community.

<script src='http://mydomain.com/wp-content/themes/mytheme/js/slider.js'></script>

Luckily there is a quicker way to link directly to these files. The following PHP snippet links directly to the root of your theme:

<?php bloginfo('template_directory'); ?>

So to link to the same example file as above you would do this:

<script src='<?php bloginfo('template_directory'); ?>/js/slider.js'></script>

This is obviously easier, less code, and if you move your WordPress install or change the theme name the link will still be correct.

One great way to use fancyBox is to open Google Maps over your webpage. If you need to have a map but don’t have enough room on the page to embed the map you can integrate fancyBox with Google Maps and open the enlarged map when you click on a link. Checkout the demo and download. Since this latest release of fancyBox is responsive the frame around the map resizes based on the size of the browser window!

Note: The new version of fancyBox has different licensing, be sure to visit the website for full details to make sure you are using it correctly, and for all the customization details.

http://fancyapps.com/fancybox/

Old FancyBox video / browser large.

Old FancyBox video / browser small (and cutoff).

New FancyBox video / browser large.

New FancyBox video / browser small (and auto resized!).

Note: The new version of fancyBox has different licensing, be sure to visit the website for full details to make sure you are using it correctly, and for all the customization details.

http://fancyapps.com/fancybox/

The website for fancyBox tells you how to add all the files to make everything work, but doesn’t have a simple, packaged together download. Since I use fanyBox on a fairly regular basis I need to have a simple package ready to go. I’ve created this, and am offering it to everyone to use.

Note: The new version of fancyBox has different licensing, be sure to visit the website for full details to make sure you are using it correctly, and for all the customization details.

http://fancyapps.com/fancybox/

The idea of creating responsive websites for real world business websites raises a few questions. The main question many designers and developers had (including myself) was “What about image galleries and sliders?”. Most websites have moved away from Flash in the last few years, many Flash animations being replaced by jQuery sliders. So how do you deal with a slider when developing a responsive website? Until now that left most people scratching their heads, but recently there have been some great responsive image sliders, galleries and plugins released.. so let me introduce my roundup of the 10 best responsive image sliders and galleries you can use on your website today(in no special order).. enjoy!

1. FlexSlider

2. Blueberry

3. Responsive Image Gallery

4. Responsive jQuery Slideshow

5. UnoSlider

6. Elastislide

7. Photoswipe

8. Responsive jQuery Carousel

9. Seamless Responsive Photo Grid

10. responsive thumbnail image gallery plugin