Do you want to White Label WordPress without a plugin?

If you’re in the business of building WordPress websites you might want to white label WordPress before delivering it to your client. In this WordPress tutorial I’m going to cover 7 WordPress functions that you can use to brand/white label WordPress in order to provide a more polished look to your theme.

All seven functions detailed below can be placed into your functions.php file. These have been developed and tested with WordPress version 3.5.1.

Note: Before you begin, we recommend that you make a backup of your theme’s functions.php file before making edits to the file.

1. How to Change the WordPress Login Logo

Create a logo sized 274px wide by 63px tall, name it logo-login.png then upload it into your theme’s images folder. Next you simply copy the code below and paste it into your theme’s functions.php file to change the WordPress login logo.

// Login Screen: Change the login logo to your own logo
function b3m_custom_login_logo() {
	echo '<style type="text/css">
    h1 a { background-image:url('.get_stylesheet_directory_uri().'/images/logo-login.png) !important; }
    </style>';
}
add_action('login_head', 'b3m_custom_login_logo');

2. How to Change WordPress Logo URL

Once you change the WordPress login logo you’ll also want to change the URL that you go to should you click on the logo. By default, the logo will send you to wordpress.org. In the code snippet below, you’ll now be sent to the homepage of your website. Learn more about get_bloginfo() at Codex.

// Login Screen: Use your own external URL for login logo link
function b3m_url_login(){
	return get_bloginfo( 'wpurl' );
}
add_filter('login_headerurl', 'b3m_url_login');

2a. How to Change WordPress Logo Hover Text

Added: March 29, 2013. A reader asked for a way to edit the text “Powered by WordPress” when you hover over the login logo. I did a little digging around and found a way to do that too. Copy the code below into your theme’s functions.php file to make it happen.

// Login Screen: Change login logo hover text
function b3m_login_logo_url_title() {
    return 'REPLACE THIS WITH YOUR TEXT';
}
add_filter( 'login_headertitle', 'b3m_login_logo_url_title' );

3. How to Cure the Forgetfulness of WordPress

Raise your hand if you get annoyed that WordPress will not keep the check mark in the ‘remember me’ check box. The code snippet below will keep it checked.

// Login Screen: Set 'remember me' to be checked by default
function b3m_login_checked_remember_me() {
	add_filter( 'login_footer', 'b3m_rememberme_checked' );
}
add_action( 'init', 'b3m_login_checked_remember_me' );

function b3m_rememberme_checked() {
	echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

4. Keeping WordPress Login Credentials Vague

By default when you login incorrectly, WordPress tells you which piece of information is incorrect. Now a hacker knows 50% of the information needed to get into your WordPress account. Stop that from happening by pasting the code below into your theme’s functions.php file.

// Login Screen: Don't inform user which piece of credential was incorrect
function b3m_failed_login () {
    return 'The login information you have entered is incorrect. Please try again.';
}
add_filter ( 'login_errors', 'b3m_failed_login' );

OK. I realize that function #5 wasn’t really a function for white labeling WordPress, but I thought it to be a relevant function that should be included when branding a WordPress website for clients.

5. How to Display Custom Logo in WordPress Dashboard

So much of WordPress is customizable including the little house icon on the main dashboard screen. To include a custom logo to the admin dashboard, simple copy the code snippet below and paste it into your theme’s functions.php file.

// Custom admin dashboard header logo
function b3m_custom_admin_logo() {
    echo '<style type="text/css">#icon-index { background-image: url('.get_stylesheet_directory_uri().'/images/logo-dashboard.png) !important; background-position: 0 0;}</style>';
}
add_action('admin_head', 'b3m_custom_admin_logo');

6. Modify the Admin Footer

The text that reads ‘Thank you for creating with WordPress’ can also be customized. Again, simply grab the code below and paste it into your theme’s functions.php file.

// Modify the admin footer
function b3m_modify_footer_admin ()
{
    echo '<span id="footer-thankyou">Theme Development by <a href="http://www.wpsyntax.com" target="_blank">WPSyntax</a></span>';
}
add_filter('admin_footer_text', 'b3m_modify_footer_admin');

7. Custom Widget in Admin Dashboard

Once you deliver your finished product it’s nice when the user can log into WordPress and see both your contact information as well as a README file for your custom theme. The code below displays my contact information as well as a link to the Genesis README file that I update with all of my customizations. Things like shortcodes and custom styles for alert boxes are found in the README file so that users can utilize the theme’s functionality. I shouldn’t have to say it again, but… grab the code below and paste it into your theme’s functions.php file after editing it for your implementation.

// Add a widget in WordPress Dashboard
function b3m_dashboard_widget_function() {
	// Entering the text between the quotes
	echo "<ul>
	<li><strong>Author:</strong> Rick R. Duncan</li>
	<li><strong>Website:</strong> <a href='http://www.wpsyntax.com'>WPSyntax.com</a></li>
	<li><strong>Contact:</strong> <a href='mailto:rick@wpsytax.com'>rick@wpsyntax.com</a></li>
	<li><strong>Theme Instructions:</strong> <a href='http://www.wpsyntax.com/wp-admin/admin.php?page=genesis-readme'>README</a></li>
	</ul>";
}
function b3m_add_dashboard_widgets() {
	wp_add_dashboard_widget('wp_dashboard_widget', 'Theme Details', 'b3m_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'b3m_add_dashboard_widgets' );

BONUS – Did You Know?

Did you know that you don’t have to type in /wp-login to get to the WordPress login screen? If you type in your website URL followed by /login you’ll be redirected to wp-login.php. I’ll admit it; I didn’t know.

If for some reason it doesn’t work on WordPress versions prior to 3.5.1 then try placing the following code into your .htaccess file.

RewriteRule ^login$ http://www.wpsyntax.com/wp-login.php [NC,L]

What did I miss? How do you white label WordPress without using a plugin? Please share in the comments below.

The post 7 Functions to White Label WordPress appeared first on WPSyntax.

Unfortunately, the full width footer in Metro isn’t widgetized nor easily customized unless you’re ready to get your hands dirty and start editing your functions.php file. Hey don’t sweat it, I’m here to walk you through the steps necessary to customize the footer in the Metro theme.

Code Responsibly

As I always recommend, please make a backup of your theme’s functions.php file before making any edits. OK, lets go…

Open Up Functions.php File

Inside of the Metro child theme folder, open the file functions.php and locate the snippet of code shown below.

// Reposition the footer
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
add_action( 'genesis_after', 'genesis_footer_markup_open', 11 );
add_action( 'genesis_after', 'genesis_do_footer', 12 );
add_action( 'genesis_after', 'genesis_footer_markup_close', 13 );

Take note of line 6 in the code above. We’re going to make an edit to that specific line of code.

Step #1

Change line #6 to read:

add_action( 'genesis_after', 'custom_genesis_do_footer', 12 );

Take note that we changed line #6 from genesis_do_footer to custom_genesis_do_footer.

Step #2

Add the code below underneath all of the code we mentioned above.

function custom_genesis_do_footer() {
	echo '<div class="gototop">';
	echo '<p><a href="#wrap" rel="nofollow">Return to top of page</a></p>';
	echo '</div>';
	echo '<div class="creds">';
	echo '<p>Copyright &copy B3Marketing, LLC</p>';
	echo '</div>';
}

Your final code should like like this:

// Reposition the footer
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
add_action( 'genesis_after', 'genesis_footer_markup_open', 11 );
add_action( 'genesis_after', 'custom_genesis_do_footer', 12 );
add_action( 'genesis_after', 'genesis_footer_markup_close', 13 );

// Customize the content of your footer
function custom_genesis_do_footer() {
	echo '<div class="gototop">';
	echo '<p><a href="#wrap" rel="nofollow">Return to top of page</a></p>';
	echo '</div>';
	echo '<div class="creds"><p>';
    	echo 'Copyright &copy; ';
    	echo date('Y');
    	echo ' B3Marketing, LLC';
    	echo '</p></div>';
}

Step #3

Now simply customize the contents of the footer text for your specific implementation and you’re all done.

Homework Assignment

You could take it a step further and make the content placeholders widgetized so that you don’t have to edit your functions.php file directly. Maybe I’ll build upon this code in my next Genesis Framework tutorial…

OK, I couldn’t resist…

How to Widgetize the Metro Theme Footer

Building upon everything from above, I realized that most people would rather not edit their functions.php file directly when it comes time to editing the footer text in the Metro theme. I’ll be brief in my instructions, but wanted to share the code that will make the left and right sides of the Metro theme footer widgetized.

Take note: The function custom_genesis_do_footer() has been edited to include two widget areas. Then you need to register the two new widget areas named footer-left and footer-right. All of this code goes into the functions.php file inside of the Metro child theme folder.

File Download: I’ve created a download file of the code needed to make the Metro footer widgetized. Feel free to download it here.

// Customize the content of your footer
function custom_genesis_do_footer() {
	echo '<div class="gototop"><p>';
	dynamic_sidebar( 'footer-left' );
	echo '</p></div>';
	echo '<div class="creds"><p>';
	dynamic_sidebar( 'footer-right' );
    echo '</p></div>';
}

// Register left side footer area
genesis_register_sidebar( array(
	'id'				=> 'footer-left',
	'name'			=> __( 'Footer Left', 'CHILD_THEME_NAME' ),
	'description'	=> __( 'This is the left side of the footer.', 'CHILD_THEME_NAME' ),
) );

// Register right side footer area
genesis_register_sidebar( array(
	'id'				=> 'footer-right',
	'name'			=> __( 'Footer Right', 'CHILD_THEME_NAME' ),
	'description'	=> __( 'This is the right side of the footer.', 'CHILD_THEME_NAME' ),
) );

The post How to Customize the Metro Theme Footer appeared first on WPSyntax.

I learned this valuable lesson a while back when working on a WordPress recipe website that had over 1,500 recipes. Trying to find a particular recipe using the built-in search functionality of WordPress was fruitless.

Once I experienced how poorly search was being done with WordPress core I turned to the WordPress Plugin Directory to see if anyone had built a better search for WordPress.

Relevanssi – A Better Search

Several search plugins were downloaded and tested. After performing numerous search tests, we decided on a plugin named Relevanssi. The Relevanssi plugin performed exceptionally well for that project and other websites where we needed better search results than WordPress core could handle.

As much as we love Relevanssi here at WPSyntax, there are some website owners that want to use Google’s Custom Search Engine with WordPress. Since I’m always trying new things with WordPress and WPSyntax.com, I decided to make the switch from Relevanssi to Google CSE and see what happens. The results have been great so I thought I would share how I built it with the WordPress/Genesis community.

Enough background info, on to the tutorial!

Step 1: Sign Up for Google CSE

Head on over to http://www.google.com/cse/ and get signed up for Google CSE. We’re not going to cover the details here since it’s a pretty straight forward process.

Once you get signed up for Google CSE and have created your custom search engine, look at the left navigation bar and click the link labeled get code. Click that link and ONLY grab the value of the variable cx.

Save it as we’ll need it once we get to step #3.

Take note: You can monetize your search results page by connecting your Google AdSense account to your Google CSE account. It’s what we did here on WPSyntax.com and can be seen on our search results page.

Step 2: Functions.php

The first thing we’ll need to do is filter the Genesis search form. Our customizations of the search form include changing the action of the form and the name of the text box.

Copy the code below and paste it into your theme’s functions.php file.

add_filter( 'genesis_search_form', 'wps_search_form', 10, 4);
function wps_search_form( $form, $search_text, $button_text, $label ) {
	$onfocus = " onfocus=\"if (this.value == '$search_text') {this.value = '';}\"";
	$onblur = " onblur=\"if (this.value == '') {this.value = '$search_text';}\"";
	$form = '<form method="get" class="searchform search-form" action="' . home_url() . '/search" >' . $label . '
	<input type="text" value="' . esc_attr( $search_text ) . '" name="q" class="s search-input"' . $onfocus . $onblur . ' />
	<input type="submit" class="searchsubmit search-submit" value="' . esc_attr( $button_text ) . '" />
	</form>';
	return $form;
}

Make sure the code above is pasted below the line:

require_once( get_template_directory() . '/lib/init.php' );

If you don’t want the text inside of the Genesis search box to read “search this website” be sure to read my tutorial titled “How to Customize the Genesis Search Box” to see how easy it is.

The second update we need to make to the functions.php file is adding the code below in order to make our page template widgetized. We added this so that we can easily add a search widget to the top of our SERP page.

genesis_register_sidebar( array(
	'id'		=> 'google-page',
	'name'		=> __( 'Google SERP Page', 'CHILD_THEME_NAME' ),
	'description'	=> __( 'This is the widget area of the Google SERP Page Template.', 'CHILD_THEME_NAME' ),
) );

Step 3: Create New Page Template

Step 3 involves creating a new page template and adding it into your current Genesis child theme folder.

Fire up your favorite text editor and create a Php file named page-google.php.

Next, take the content below and paste it onto your new file named page-google.php.

Take note: Make sure you replace line 19 (var cx=”lots-of-numbers”) with the value you got from Google CSE in step #1.

<?php
/*
 * Template Name: Google Search
 * 
 * Google SERP template for Genesis Child Themes.
 * 
 * @author     Rick R. Duncan
 * @link       http://www.wpsyntax.com
 * @license    http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
 *
 */


// Insert Google code into <head> section of webpage
add_action('genesis_meta', 'wps_google_cse_meta', 15);
function wps_google_cse_meta() { ?>
<script type='text/javascript'>
  (function() {
    var cx = '007935457329138067308:1d39zwetca0';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
  })();
</script>
<?php }

// Add custom body class to the head
add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
   $classes[] = 'google-search-page';
   return $classes;
}

add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); // Force Full-Width Layout
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); // Removes breadcrumbs
remove_action( 'genesis_post_title','genesis_do_post_title' ); // Removes post title
remove_action( 'genesis_post_content', 'genesis_do_post_content' ); // Removes content

// Build your custom page and add content
add_action( 'genesis_post_content', 'wps_do_content' );
function wps_do_content() { ?>

<div id="google-serps">
	<?php genesis_do_breadcrumbs(); ?>
	<?php the_title( '<h1>', '</h1>' ); ?>
	<?php 
	// Obtain querystring value if present and display on-screen
	$q = $_GET["q"];
	echo '<strong>You Searched For:</strong> <em>'.$q.'</em>';
	?>
	<?php
	if ( is_active_sidebar( 'google-page' ) ) {
		dynamic_sidebar( 'google-page' );	
	}
	?>
	<?php the_content();?>
	<gcse:searchresults-only linkTarget='_self'></gcse:searchresults-only> 
</div>
<?php }

genesis();

Save the file and FTP/upload it into your current Genesis child theme folder.

Step 4: Create a New Page

Create a new page. Pages -> Add New.

Name your page Search Results and set the permalink to search.

Look to the right inside the Page Attributes box and change the page template to Google Search. Look at image below for details.

Publish your page.

Step 5: Search Widget

As you can see on our search result page, we have included a search box right above the search results.

To make that happen go to Appearance -> Widgets.

Drag the search widget into the Google SERP Page widget box. See image below.

At this point, all searches being done on your website should now go to your new “search” page using Google to power the results.

Bonus – Monitoring the searches on your website is a tactic that digital marketers should be using to assist their content strategy. Google Analytics makes it really easy to monitor your on-site search activity by giving you the ability to create a custom dashboard for site searches.

Let me know in the comments below if you would like to see a tutorial on how that’s done.

The post Add Google CSE to WordPress & Genesis Child Theme appeared first on WPSyntax.

Embed Video Using a URL

The easiest and fastest way to embed a YouTube video into WordPress is to simply paste the video’s URL into your page on a line by itself. Go visit YouTube and find your video. Look in your browser’s address bar and copy the URL into your clipboard. Ctrl+C for Windows users and Command+C for Mac users. An example URL is shown in the image below:

Now that you have the URL in your clipboard, go back to your WordPress editor and on a new line, paste the URL into your page. This can be done in “Visual Mode” or “Text Mode.” To paste; Ctrl+V on Windows or Command+V on a Mac. Make sure that the URL you pasted does not turn into a hyperlink. If the URL is an active hyperlink, the video will not be displayed.

Bam! You’re done. You should now see the video in your page. No plugin, no coding. Easy huh?

Need to customize the size? We’ve got you covered. Scroll below the video to see how it’s done.

Embed Video Using an IFrame

To embed the video in order to control the height, width and other settings, start as we did in the example above where you go to the video on YouTube using your web browser and follow the 4 steps below.

1. Click on Share
2. Click on Embed
3. Select the video size
4. Copy the IFrame code highlighted in blue in the box

Now go back to WordPress and paste the code into a new line in your page. Bam! You’re done.

Further Customizations?

What we outlined above should be enough for 95% of the users that need to add a YouTube video to WordPress. To learn what else can be customized, check out the YouTube Developers page.

The post How To Add a YouTube Video to WordPress appeared first on WPSyntax.

Requirements

• StudioPress child theme & Genesis Framework
• Access to functions.php file
• Ability to FTP to your website should you make a mistake and need to roll-back your changes

WP Snippets

/** Remove page titles site wide (posts & pages) */
remove_action('genesis_post_title', 'genesis_do_post_title');


/** Remove page title for a specific page */
/** Change '28' to your page id */
add_action( 'get_header', 'child_remove_page_titles' );
function child_remove_page_titles() {
    if ( is_page( 28 ) ) {
        remove_action( 'genesis_post_title', 'genesis_do_post_title' );
    }
}


/** Remove page title for multiple pages */
/** Change '3645' and '4953' to match your needs */
add_action('get_header', 'child_remove_page_titles');
function child_remove_page_titles() {
    $pages = array( 3645,4953 );
    if ( is_page($pages) ) {
        remove_action( 'genesis_post_title', 'genesis_do_post_title' );
    }
}


/** Remove page titles from all single posts & pages */
add_action( 'get_header', 'child_remove_titles' );
function child_remove_titles() {
    if ( is_singular() ){
        remove_action( 'genesis_post_title', 'genesis_do_post_title' );
    }
}

/** Remove page titles from specific posts */
add_action('get_header', 'child_remove_post_titles');
function child_remove_post_titles() {
    $pages = array( 4953,4648 );
    if ( is_single( $pages ) ) {
        remove_action( 'genesis_post_title', 'genesis_do_post_title' );
    }
}

Instructions

Copy the specific snippet of code above that fits your needs and paste it into your child theme’s functions.php file anywhere below:

require_once( get_template_directory() . '/lib/init.php' );

The post How to Remove the Genesis Page Title appeared first on WPSyntax.

The code below will add a comment policy statement directly below the text Speak Your Mind, the default text used above the comment form for StudioPress themes. Many people don’t like the label Speak Your Mind and a previous WordPress tutorial titled How to Modify Speak Your Mind shows how easy it is to change the label to something you prefer.

To add a Genesis comment policy box to your theme, copy the code below and place it within your theme’s functions.php file. In order for the code below to work properly, the code should be placed in your child theme’s functions.php file after this code:

require_once( get_template_directory() . '/lib/init.php' );

/** Modify comment form */
add_filter('genesis_comment_form_args', 'minimum_comment_form_args');
function minimum_comment_form_args($args) {
	$args['title_reply'] = 'Leave a Comment';
	$args['comment_notes_before'] = '<p class="comment-policy">' . __( 'Please, only use your <strong>real name</strong>, not your business name or keywords. We moderate all comments before they appear on our website and will delete and <em>mark as spam</em> anyone not using their real name.' ) . ( $req ? $required_text : '' ) . '</p>';
	return $args;
}

The image below demonstrates how the code will place a comment policy within your page.

Take note that the comment policy statement is right below the H3 title in this case “Leave a Comment.’ If you prefer to have the comment policy display under the form, just above the submit button, change Line 5 in the code above to what you see below.

Take note that you are simply changing comment_notes_before to comment_notes_after. Everything else remains the same. The image below details how it looks on screen when changing the location to below the form directly above the submit button.

 $args['comment_notes_after'] 

So there you have it. A cut & paste wp snippet to easily add a Genesis Comment Box to your StudioPress child theme.

The post How To Add A Genesis Comment Policy Box to a StudioPress Child Theme appeared first on WPSyntax.

• How can I add an image to my widget title?
• How can I make my widget title two different colors?
• How can I to add link in a widget title?
• Can I make text widget header a link?
• Is there a way to make a widget title clickable?

To answer the questions above, we’ll demonstrate 4 ways to customize your WordPress widget title that range from simple CSS to an advanced method that involves overriding the text widget class in order to make your widget title clickable.

Background Info

By default, WordPress does not allow you to enter HTML into your widget titles. Let me back up to be a little more clear. You can enter HTML into your widget titles, but by default, WordPress will strip out all of your HTML code when you go to save your widget settings.

Take a look at the image below to see four variations of the widget title to give you an idea as to what customizations are possible using the four methods we’re about to cover.

Custom WordPress Widget Title – Method 1

The first customization (shown above) is the easiest of all four methods. By simply using CSS, you can make numerous design tweaks to your widget title.

CSS Code

The CSS code below is what was used on an older website of mine running WordPress and the Genesis Framework. Your specific class name and/or selector might be different.

.widget-area .widget_recent_entries h4 {
    background: url("images/bg-posts.png") no-repeat scroll left 6px transparent;
    padding-left: 40px;
}
.widget-area h4 {
    border-bottom: 4px double #ccc;
    border-top: 4px double #ccc;
    font-size: 24px;
}

Unfortunately, this particular method will not allow you to make a widget title a hyperlink or clickable. You need to skip down to method 4 if you want to learn how to make your widget title clickable.

Custom WordPress Widget Title – Method 2

The technique shown above comes from Brian Gardner’s website. When I asked how he accomplished the customization, he simply said “@rickrduncan It’s simple — just re-registered the primary sidebar adding the span class like so — http://b.rian.cc/RCHQU6.”

For users of the Genesis Framework, simply copy the code below and paste it into your theme’s functions.php file.

Php Code

Place this code into your theme’s functions.php file.

/** Register widget areas */
/** Source: www.wpsyntax.com */
genesis_register_sidebar(array(
	'name'			=> 'Primary Sidebar',
	'id'				=> 'sidebar',
	'description'	=> 'This is the primary sidebar if you are using a two or three column site layout option.',
	'before_title'	=> '<h4 class="widgettitle"><span class="sidebar-title">','after_title'=>'</span></h4>'
));

HTML Code

This is the HTML code generated by WordPress. As you can see in the code below, the Php code that you entered into functions.php will add a <SPAN> tag with the class name “sidebar-title” inside your H4 title tag.

<h4 class="widgettitle">
<span class="sidebar-title">Recent Posts</span>
</h4>

CSS Code

This is the CSS code that will likely need to be customized for your specific implementation.

.widgettitle {
    background: url("images/lines.png") repeat scroll 0 0 transparent;
    text-align: center;
}
.sidebar-title {
    padding: 0 0.5rem;
}

This customization is really easy and quick to implement. Take note however that it encompasses everything (every word in the H4 tag) into the “SPAN” tag.

Some people have asked how to put only the first word into a <SPAN> tag. Well, that’s easy too and it’s our third tutorial on how to customize the WordPress widget title.

Custom WordPress Widget Title – Method 3

As seen in the image above, our third method demonstrates how to wrap the first word of a WordPress widget title into a <SPAN> tag.

To accomplish this customization, you need to add a filter and a custom function into your theme’s functions.php file. This can be used for all users of WordPress and those using the Genesis Framework.

Php Code

Place this code into your theme’s functions.php file.

/** Wrap first word of widget title into a span tag */
/** Source: www.wpsyntax.com */
function child_span_widgets( $old_title ) {
	$title = explode( " ", $old_title, 2 );
	$titleNew = "<span>$title[0]</span> $title[1]";
	return $titleNew;
}
add_filter ( 'widget_title', 'child_span_widgets' );

HTML Code

The HTML code shown below is what’s generated by WordPress.

<h4 class="widgettitle">
<span>Recent</span>
Posts
</h4>

CSS Code

The CSS below that makes the first word Orange and underlines both the entire title and the orange portion.

.widgettitle {
    border-bottom: 1px solid #DDDDDD;
}

.widgettitle span {
    border-bottom: 1px solid #F0591A;
    color: #F0591A;
    display: block;
    float: left;
    margin: 0 5px 0 0;
}

Now go to your widget of choice and simply enter two or more words and the first word will be wrapped in a <SPAN> tag using your style defined in the CSS.

This method gives you a little more control over the styling of your widget title by allowing you to customize the first word. But what about if you want to put any HTML you wanted into the widget title? Keep reading as method #3 does just that!

Custom WordPress Widget Title – Method 3

This is by far the most difficult yet robust method in order to customize your WordPress widget title. Using this technique, you can enter HTML directly into the title of your widget. You can make your text widget header a link which will of course make it clickable.

The image below shows a snippet of HTML code entered directly into the widget title text-box.

WordPress core is using the Php function strip_tags() when saving the widget title into the database. This causes your HTML or any Php code to be stripped away from the widget title.

Since I haven’t been able to locate a filter to use in the functions.php file that would allow us to save HTML into the widget title, the method we’ll use involves overriding the standard text widget plugin. This method is going to be upgrade safe and called from our theme’s functions.php file. We’re only covering the “text widget” for our example but these steps can be duplicated for any other widget you want to override.

Step 1

Fire up your favorite text editor and create a new file named custom_widgets.php.

Inside your WordPress folder, locate and open the file wp-includes/default-widgets.php. Look for the entire class declaration code, starting with:

 class WP_Widget_Text extends WP_Widget { 

and copy the entire class code into the file you created that we named custom_widgets.php.

Next, rename the class, by changing the class declaration to:

 class WP_Widget_Text_Custom extends WP_Widget_Text { 

Step 2

Instruct WordPress to use our custom widget code for text widgets instead of the standard version supplied by WordPress. Copy the code below and paste it into your theme’s functions.php file.

if ( include( 'custom_widgets.php' ) ){
     add_action( "widgets_init", "load_custom_widgets" );
}
function load_custom_widgets() {
    unregister_widget( "WP_Widget_Text" );
    register_widget( "WP_Widget_Text_Custom" );
}

NOTE: The code you copied above needs to be placed into your theme’s functions.php file anywhere after:

require_once( get_template_directory() . '/lib/init.php' );

At this point, if everything is saved as-is nothing new is happening and hopefully nothing is broken. Since we haven’t done anything except to override the standard plugin text widget, everything should still be working without errors and without saving HTML.

Step 3

Now the magic happens! Since we now have our own version of the text widget plugin working we’ll make some tweaks to it in order to allow HTML code be entered and saved into the widget title.

Inside of custom_widgets.php locate the function update( $new_instance, $old_instance ) and find the line of code:

 $instance['title'] = strip_tags($new_instance['title']); 

Replace it with:

if (current_user_can('unfiltered_html')){
     $instance['title'] = $new_instance['title'];
}
else {
     strip_tags($new_instance['title']);
}

The code above first runs a security check to make sure the user is allowed to enter HTML (learn more at codex) and if true will save the content with the HTML intact. Otherwise the data is saved but the HTML is stripped out.

Now locate function form( $instance ) and find the line of code:

 $title = strip_tags($instance['title']); 

and replace it with:

 $title = $instance['title']; 

To make it easier on you, I’ve created a zip file of custom_widgets.php that you can download here.

In closing: While this method is upgrade safe there is always the possibility that a security patch can come out that impacts the file default-widget.php. If this happens, you might be required you to update your custom implementation to take advantage of the security changes. You can keep up with the WordPress changelogs here.

The post How To: Customize WordPress Widget Title appeared first on WPSyntax.

Today’s WordPress tutorial will demonstrate the steps necessary to create a new OR convert an existing standard WordPress website into a network of sites by using the multi-site feature. By the end of this tutorial you will have created a WordPress multi-site network that will allow you to run a collection of websites that all share the same WordPress installation.

The reasons to build a WordPress test site can vary. Several reasons include:

1. WordPress design agencies might want to build a client’s website on a public accessible server
2. WordPress theme builders might want to showcase their premium WordPress themes on a sub-domain using sub-directories
3. WordPress plugin builders might be testing a new piece of functionality on their latest version
4. the reasons go on…

For this particular WordPress tutorial we’ll be providing information on how to build a WordPress test site on a sub-domain using sub-directories. Our wp tutorial will cover the steps necessary to build your test website using URLs as demonstrated below.

• http://demo.wpsyntax.com
• http://demo.wpsyntax.com/minimum
• http://demo.wpsyntax.com/theme2
• http://demo.wpsyntax.com/theme3

OK, lets get started!

Minimum Requirements

WordPress 3.0 or higher is required.

If you are converting an existing WordPress install then please disable all plugins and backup your database and files.

Step 1: Modify WP-Config.php

FTP to your website (for us it’s demo.wpsyntax.com) and make a backup copy of wp-config.php in case something goes wrong. We usually make a copy and name the backups wp-config.php.bkup. Feel free to do the same or use your own naming convention.

Next, download wp-config.php found in the root of your WordPress install. Open the file in your favorite source code editor and look for the line /* That’s all, stop editing! Happy blogging. */ and add an empty line just before it. Place this code into your file:

define('WP_ALLOW_MULTISITE', true);

Your file should look like the image below.

The line of code you added into wp-config.php instructs WordPress to enable the Network Administration panel and prep the network install process.

Now, save the file and upload it back to your website.

Step 2: Enable & Configure WordPress Networks

Go to the Admin dashboard and click on Tools -> Network Setup

The next screen you see needs to be filled in carefully. As I mentioned at the beginning of this tutorial, we’re going to be creating a WordPress test site on a sub-domain using sub-directories.

Take a look at the image below to see that I selected “Sub-directories” and entered values for the “Network Title” and “Admin E-mail Address.”

Once you have everything filled out, click on the “install” button.

Step 3: Enabling the Network

At this point WordPress works some magic under the covers and then presents you with a screen containing instructions informing you that the next steps involve editing your .htaccess file and your wp-config.php file once again. As suggested by WordPress, it’s always best to make a backup of your files before making the edits. The image below details the next steps to enabling the network on WordPress.

To be clear, the code you add to your wp-config.php file will be placed immediately following the one line of code you entered in step 1 of this process.

Once you made your changes to .htaccess and wp-config.php you will need to save the files and upload them back to your web server. you will need to log into WordPress once again. At this point you should now see that you have successfully created a WordPress test site that’s perfect for theme developers showcasing their themes or for developers to build test sites for clients.

If you did everything right, your dashboard should now include “My Sites” in the two areas seen below in the image below.

The post How To Build a WordPress Test Site appeared first on WPSyntax.

Most premium WordPress theme builders that offer responsive themes are lacking user-friendly navigation. Most premium WordPress theme builders simply stack the menu when their themes are viewed on smartphones.

I’m not a fan of that stacking the menu upon page load because it takes up valuable space on the screen. Forcing a user to scroll to read your article is a poor user experience.

A classic case of the header and navigation taking up too much screen space can be seen on the Agency theme from StudioPress. Note: I’m a huge fan of StudioPress, but not everyone is pixel-perfect. Including me!

The Agency theme is responsive and a great skin, but I’m not a fan of the menu system. I feel that it can be improved upon.

Responsive Menu Choices

I’m seeing two trends in creating menus using responsive web designs.

Select Boxes — Many premium theme builders are changing their menu to be a select box once the screen-width decreases to a specific width. That solution is better than simply stacking your menu, but I’m not a fan.

The two images below demonstrate a responsive menu using the select box. The first image illustrates how the navigation looks when you’re not interacting with the menu. It’s unobtrusive, yet is not (in my opinion) what I think users are expecting to see when navigating a website.

The second image illustrates what happens once the user engages with the responsive menu. I don’t think this provides an optimal navigating experience.

When browsing the internet on your desktop computer, how many times have you seen the navigation of a website built using a select box?  Probably zero. On a desktop computer, users are familiar with either seeing a text-based menu system or an image-based menu system. I think that once a user is on a tablet or smart-phone, it’s not natural for them to have to think about how to navigate a website. Training them to look for a select box is silly.

Collapsible Menu — The second option I’m seeing used to save screen real estate and provide a user-friendly navigation system is to use a collapsible menu. What I’m seeing is a basic icon shape (thank god for standards) of three horizontal lines being used to indicate the presence of a menu/navigation item on the screen.

Let me show you three examples and tell me if you can spot a trend.

iPhone Reminders:

Google Chrome on the iPhone:

YouTube on the iPhone:

Smart-phone and tablet users are already familiar with the three horizontal lines which indicate the presence of a menu or navigation. Why go against the flow and use a select box?

I think the three horizontal lines (responsive menu icon) is the best option and is what I’m using on my website. Go ahead and shrink your browser and watch the menu icon appear once you reach the proper size. To get this to work on my Genesis child theme took less than 10 minutes and requires zero Php coding. Ready to get started?

How To Implement a Responsive Menu in 10 Minutes

A summary of the code below: You will place a mobile responsive menu icon into your website’s navigation and initially it’s hidden. If a user of your website is viewing your site at a predefined width or smaller, your desktop menu is hidden and your mobile responsive menu icon appears. When a user clicks on the mobile menu icon, jQuery will toggle the menu to then show your full menu.

Take note of a couple things before you start.

• My implementation and tutorial caters to those web developers using the Genesis Framework. It will work with any WordPress theme, but I’ve detailed some information below catering to Genesis. More thinking on your part is required if you’re not using Genesis.
• The other very important thing to note is that in my example, I’m using a custom menu within the header widget. I’m pointing this out to you since your CSS ID and Class Selectors will probably differ from mine in the code below. The CSS selectors I’m referring to is: #menu-primarynavigation and .menu.

1. Place the code below into your theme’s CSS file that’s not inside of a media query.

#mobi-menu {
	display: none;
	visibility: hidden;
}

2. This next piece of CSS needs to be inside of a media query. I’ve chosen to switch to the mobile menu icon when the max-width of a browser is 400px.

@media only screen and (max-width: 400px) {
#mobi-menu { background: url("images/icon-mobile.png") no-repeat scroll 0 0 transparent; cursor: pointer; display: inline-block; 	float: right; height: 30px; margin: 12px; width: 41px; visibility: visible; }
#nav_menu-2 { display: none; }
}

/* Make sure main menu re-appears when scaled up */
@media only screen and (min-width: 401px) {
	#nav_menu-2 {
		display: block !important;
	}
}

The CSS styles mentioned above will get things working. Your homework is to style it properly for your particular implementation.

Now the jQuery…

Place the code below into your site’s head section. I’m using a Genesis child theme so I went to Genesis -> Theme Settings and placed the code into the “Header” scripts section.

<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
	/* prepend menu icon */
	$('#title-area').append('<div id="mobi-menu"></div>');

	/* toggle nav */
	$("#mobi-menu").on("click", function(){
		$("#nav_menu-2").slideToggle();
		$(this).toggleClass("active");
	});
});
// ]]></script>

Grab my mobile menu icon here. Save it to your themes ‘images’ folder. If you save it elsewhere, you’ll need to adjust the code above.

Save everything and re-size your browser. BAM! You now have a responsive menu in less than 10 minutes.

As a reminder. You will have to style everything according to how you want everything displayed on your website.

The post How To Build a Collapsible Responsive Menu for Genesis appeared first on WPSyntax.

There are hundreds of articles detailing methods to prevent your content from being stolen. Preventive measures range from software solutions, htaccess rewrite rules, Google alerts and a handful of other techniques.

So why am I writing this article you ask? Because my approach is free, simple, effective and I believe it works better than anything else out there. I’m sure that once I share my secret, others will try it and then eventually write about it too. You’re welcome!

Let’s get started!

Prerequisite

Disable your RSS feed. I wrote an article on how to disable your WordPress RSS feed that has easy to follow instructions. When I create new content to publish on any of my affiliate or client websites, I don’t want to alert the wrong people that I have new content for them to steal.

Disable automatically rebuilding your XML sitemap. Are you running a WordPress plugin named Google XML Sitemap or something similar? Generally these plugins are set to automatically notify Google, Bing and Yahoo when the content of your website has changed. I have disabled that functionality so that someone cannot monitor my file for new content and then steal it from me.

Speaking of the XML sitemap file. Another technique I use to lower my risk of being scraped/outranked is to give my XML sitemap a name other than sitemap.xml. No need to make it too easy for someone to find my sitemap.xml file containing all my articles wrapped with a bow.

Now lets cover my procedure for publishing new content in an effort to minimize content theft and being outranked in the SERPs with your own content.

How I Publish Content

My 10-step process for publishing content is below. Don’t worry, this is simple, quick and thus far has been proven to be very effective.

1. Write the article
2. Publish the article
3. Go to Google Webmaster Tools and click on Health -> Fetch as Google
4. Enter the URL of the page you just published into the text box. (see image below)

5. Click on Fetch
6. Once the page has been fetched, click on ‘Submit to Index’
7. Go to Bing Webmaster Tools
8. Dashboard -> Configure My Site -> Submit URLs
9. Enter the URL and click on Submit
10. Go back to Google and enter the URL of your new article into the search box. Once the URL appears in the SERPs, wait 24 hours and then promote the hell out of your article on all your preferred marketing channels.

If you are active on Google+, I would start there first. Next I would submit the article to LinkedIn, Twitter and finally Facebook. My tests have shown that posting in that order gives me my best chances of solidifying my ownership of the new content.

That’s it! You’re done. This is working well for me and I would suggest all smaller publishers giving this a try.

Google Authorship

I recently received an email from Google indicating my acceptance into the Google Authorship program. I believe that this is yet another tactic one should employ to help solidify their online presence.

I’m a believer that shadow authors used in affiliate marketing have their days numbered. My online presence and expert areas have been greatly reduced over the last 18 months and I’m seeing positive signals by being more transparent with my online activities.

Good luck. Let me know in the comments below if you have any questions.

The post How To: Prevent Your Stolen Content From Outranking You appeared first on WPSyntax.