Categories
WordPress How To

Customize WordPress Admin Styles from Your Theme Directory

It’s better to style the /wp-admin of WordPress from your theme because it’s portable and upgrade-proof. Keeping all customizations  in ONE place is always a good idea in web development.

How to style WordPress admin backend /wp-admin from your theme?

  1. Add this hook to the functions.php of your theme:
    function customAdmin() {
        ?><link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/wp-admin.css" /><?php
    }
    add_action('admin_head', 'customAdmin');

    Which effectively adds a stylesheet to the header of every /wp-admin page.

  2. Create a text file named wp-admin.css in your theme directory.
  3. Write the customization styles in wp-admin.css.

That’s it. Now you can freely customize the look and appearance of the WordPress admin backend from within wp-admin.css in your theme directory.

Categories
WordPress How To

Make WordPress Hooked Function to Run Only Once

Consider this hook to add something before your WordPress blog’s sidebar:

function before_siderbar() {
?>
<!-- Something goes here, such as an AdSense links unit -->
<?php
}
add_action( 'get_sidebar', 'before_siderbar' );

It’s usual to add an AdSense links unit there but the problem with some themes is that they run get_sidebar more than once, such as on the sidebar AND in the footer. Consequently, you would end up with multiple AdSense links unit here and there, whereas you only wanted it on the sidebar once.

This could create a TOS problem towards AdSense because unconsciously, you would very probably end up adding more than 3 links unit per page.

To prevent this and only make the hooked WordPress function to run once (even it is called multiple times), use the PHP static variable in functions.

function before_siderbar() {
	static $called = false;
	if (isset($called) && $called) {
		return false;
	}
?>
<!-- Something goes here, such as an AdSense links unit -->
<?php
	$called = true;
}
add_action( 'get_sidebar', 'before_siderbar' );

In the above snippet, the variable $called is kept alive across multiple calls to the before_siderbar() function. After the first successful run of the function, $called would have a value of true and it’s kept so inside the function every time it’s called afterwards. In the 2nd and every call afterwards, $called will always be true and the function returns before outputting the AdSense code.

There you go. Now no matter how many times the before_sidebar() is called, only the first run would output the stuff you put in it.

Categories
Content / SEO Tips & Tutorials Make Money Online WordPress How To

How to Create WordPress Widget Areas (Before and After Single Post)

Most WordPress themes such as those released by WooThemes come with ready to use widget areas only in sidebar and footer. They are missing out the most important areas of a blog for readership attention and actionable conversions. They are the areas immediately before single post content and immediately after it.

For example, a paragraph naturally flowing at the end of the post as if it’s part of the content would definitely grab the attention of your readers:

immediately after single post content

So How do We Create These 2 New Widget Areas?

Open functions.php and put in the follow snippet:

// This registers the widget area immediately before single post content
register_sidebar(array(
    'id' => 'before-single-post',
    'name' => 'Before Single Post',
    'description' => 'Widget area immediately before single post content',
    'before_widget' => '<div id="%1$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
));

// This registers the widget area immediately after single post content
register_sidebar(array(
    'id' => 'after-single-post',
    'name' => 'After Single Post',
    'description' => 'Widget area immediately after single post content',
    'before_widget' => '<div id="%1$s">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
));

And then open single.php or content-single.php or whatever it is that is the single post template file of your theme. Find the_content() and put before and after it the dynamic_sidebar() function so the widget content is displayed. You will very probably have something like this in the end:

<div id="before-single-post">
	<?php dynamic_sidebar('before-single-post'); ?>
</div>

<?php the_content(); ?>

<div id="after-single-post">
	<?php dynamic_sidebar('after-single-post'); ?>
</div>

Done.

Only 2 files (functions.php to register the widget area and one other file where you intend the widget content to be displayed) that need to be edited and updated to add new widget areas.

Adding Stuff to the Widget Areas

Now if you go to Appearance –> Widgets in the WordPress backend console, you would see 2 extra widgetized areas:

widget areas created

Try adding a widget there (probably the text widget) and see how it looks so you can style it for better attention attraction.

Categories
WordPress How To

Create a WordPress Child Theme

WordPress amazes by making things possible in the simplest and most intuitive way. Child themes are the intended and correct way for customizing a third-party theme and you should always create a child theme to do the customizations so that the original theme stays intact thus ready for upgrade. And this is how you can do it with a file that’s just a few lines.

Follow the steps. Create the child theme folder and its style.css.

How to create a WordPress child theme?

  1. Create a folder in /wp-content/themes and name it however you like as this would be your child theme directory. For instance, you are creating a child theme from Twenty Eleven, and you may name it twentyeleven_one, twentyeleven_two, or something.
  2. Create a style.css file in the new directory and put in the following lines in it:
    /*
    Theme Name:     Twenty Eleven Child One
    Template:       twentyeleven
    */
    
    @import url("../twentyeleven/style.css");
    
  3. That’s it. Now head to Appearances -> Themes and refresh the page to see the new theme that you can activate.

The bold part of the above code is the folder name of the parent theme, so this child theme knows which parent theme it is inheriting from.

Activating Child Theme & Customizations

After you have activated the child theme, everything will be the same as if you have activated the parent theme. And you can overrule the same file in the parent theme by creating an identically named file in the child theme, including .php, .css, .js, .jpg, etc. Note however, you can’t overrule files in a sub-folder of the parent theme.

For example, you can now write some CSS styles in the style.css you just created and it will be overwriting existing styles in style.css in the parent theme directory.

Any customizations to the theme files will be only in the child theme so the parent theme will be free and ready to be upgraded thus preserving your changes.

Categories
WordPress How To

WordPress: Programmatically Add Items to a Menu (Dynamically)

Menus are created and edited from in the WordPress backend and then called in frontend theme to be displayed by the wp_nav_menu() function. On some occasions, we may want to programmatically add one or two menu items to a menu because those menu items change frequently and it would be a chore to have to add / update them in the backend every time any of changes occur.

So how to programmatically add menu items to a WP menu on the fly?

For instance, what we have now in our theme as the top menu:

<ul id="main-nav" class="nav fl">
	<?php
	
	wp_nav_menu(array(
		'depth' => 6, 
		'sort_column' => 'menu_order', 
		'container' => 'ul', 
		'menu_id' => 'main-nav', 
		'menu_class' => 'nav fl', 
		'theme_location' => 'primary-menu', 
		'items_wrap' => '%3$s'
	));
	
	?>
</ul>

Firstly, we need to get the HTML returned by wp_nav_menu() by setting the parameter ‘echo’ => false. This way, we can get the menu HTML as a PHP variable and then manipulate it however we want. What I want to do is to add some sub menu items to the “Shop” item:

<ul id="main-nav" class="nav fl">
	<?php
	
	$my_wp_nav_menu = wp_nav_menu(array(
		'depth' => 6, 
		'sort_column' => 'menu_order', 
		'container' => 'ul', 
		'menu_id' => 'main-nav', 
		'menu_class' => 'nav fl', 
		'theme_location' => 'primary-menu', 
		'items_wrap' => '%3$s', 
		'echo' => false
	));
	
	$my_wp_nav_menu = str_replace(
		'>Shop</a></li>', 
		'>Shop</a><ul class="sub-menu">'.$my_sub_items_html.'</ul></li>', 
		$my_wp_nav_menu
	);
	
	echo $my_wp_nav_menu;
	
	?>
</ul>

The key is to insert a sub menu in there. In this case, I used the str_replace() function to do this. Make sure you use appropriate classes for <ul></ul> and <li></li> or they won’t be rendered as a sub menu.

$my_sub_items_html contains the sub menu items such as this:

<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/product-category/bags/">Bags</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/product-category/accessories/">Accessories</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/product-category/toys/">Toys</a></li>

These can be dynamically generated from one of the taxonomies of your WordPress blog or you can specify your own.

Categories
WordPress How To

Customize WordPress Login Header and Link, Upgrade-proof without Plugin

The default image header and link on the login / register page of WordPress is a WordPress one, apparently, but when you are enabling registration / login to general users, you would want to use your own logo and website URL as the header rather than the default -  so people don’t get confused and freak out!

It’s amazing how WordPress has made such simple customizations even simpler by the introduction of hooks. Just insert the following snippet in your theme’s functions.php:

add_action('login_head', 'my_custom_login_logo');
function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.dirname(get_bloginfo('stylesheet_url')).'/my_custom_login_logo.png) !important; }
    </style>';
}

add_filter('login_headerurl', 'my_custom_login_link');
function my_custom_login_logo(){
    return ('/'); // put here your website URL such as http://www.example.com/ or simply /
}

Just provide your own logo and upload it to your theme directory as my_custom_login_logo.png. You can also use get_bloginfo(‘template_directory’) for theme path but that would return the parent theme path if you have a child theme. Sensibly, we would put all customizations in the child theme, so dirname(get_bloginfo(‘stylesheet_url’)) is probably a better approach.

Without editing the core files, this solution is upgrade-proof and you don’t have to install any plugin.