Recently a need arose where the CSS had to be loaded irrespective of the theme being used, on a multisite network. So the function took shape as a plugin and I have my first WordPress plugin up in the extend.

Admin CSS MU

Admin CSS MU simply loads a CSS file. All your custom CSS can go into that file. I think the best use case for the plugin would be as a mu plugin, since it wouldn’t probably need an update ever (and hence the MU in the name).

Installation Instructions:

To use as a normal plugin in WordPress single install and Multisite.

• Install the plugin through the WordPress admin interface, or upload the folder /admin-css-mu/ to wp-content/plugins/ using ftp.
• Move (or create) custom_admin.css to wp-content/themes/ folder. (it should look like wp-content/themes/custom_admin.css)
• Add the custom css you want into custom_admin.css.
• Activate the plugin via WordPress admin interface. If it is a Multisite, preferably Network Activate it.

To use as a Must Use (mu) plugin for WordPress single install and Multisite.

• If you don’t have already, create a folder /mu-plugins/ in /wp-content/ directory on your server. (it should look like wp-content/mu-plugins/)
• Upload the file (just the file, not folder) admincssmu.php to wp-content/mu-plugins/ . (it should look like wp-content/mu-plugins/admincssmu.php)
• Move (or create) custom_admin.css to wp-content/themes/ folder. (it should look like wp-content/themes/custom_admin.css)
• No activation is necessary. MU plugins are always active and can only be deactivated if you delete it. No auto-updates are available though.

Plugin Page | Download | CSS Samples

Hope you find this useful. Let me know what you think. Cheers!

Sourced from: Million Clues! | Follow on Twitter | Fan on Facebook

Leave a Comment: Admin CSS MU – Load an Admin Side CSS For Customizing WP-Admin

Then I met WordPress and she completely changed my life forever. It got fascinated by how you could add bits and pieces of code and see her do things to me which I never knew was possible. I wanted this blog to be my home for everything I had an interest in.

An illustration that I used for one of my posts a long time ago

I like to think of myself as an organized person. I started on a piece of paper and thought about all the things I wanted to write here. Then I made categories and sub-categories for all of those niches I wanted to touch. 32 of them. Big mistake.

Since my permalink structure was and is /%category%/%postname%/ the links looked like http://millionclues.com/problogging/wordpress-tips/wordpress-themes/the-title-of-the-post , very long and ugly. It was very evident on Google searches.

And what happened was, I never really wrote on all those niches I had in mind. I got hooked to WordPress and as you can see, most of my posts are about WordPress and Blogging.

I got a chance to correct this when I started Kuttappi.com. There I have just 5 categories, no sub-categories and lots of tags that act as sub-categories. Everything that I write in there fits into one of the categories and tags act as sort of grouping related articles together. Works elegantly.

That is what I would recommend for any new WordPress Blogs. Use few broad categories and use tags wherever necessary to group articles.

And today I sat down and finally made it straight here. Here is what I did:

1. Used the Bulk Post editor to move all posts from the sub-categories to its relevant top category. For this I filtered the posts by category, then selected all posts and in ‘Bulk Actions’, I chose ‘Edit’.

2. Now this will change the permalinks of all those posts. Thankfully, WordPress have an in-house redirect mechanism and yes, it is a 301 redirect. For instance, this old link will redirect to this new link now, all taken care of by WordPress (and no additional plugin or .htaccess). There doesn’t seem to be any official documentation for this, but in this thread a WordPress Happiness Engineer (that’s what they call for their support people I suppose), says it works.

3. Deleted the sub-categories and those categories I no longer needed.

4. Then I recreated the sitemap in my fav sitemap plugin, Google XML Sitemap Generator so that next time Google comes to say Hi, they will know that somethings different.

So that’s the story of how 32 categories came down to 9. Hope you picked up something from this. They say, “It is never too late”. How true!

Sourced from: Million Clues! | Follow on Twitter | Fan on Facebook

Leave a Comment: The Menace With Categories I Made When I Started With WordPress

The default themes, Twenty Ten and Twenty Eleven are also updated to support the Theme Customizer, but you aren’t using the default theme, are you? But that doesn’t mean you can’t use the feature, here is how you can make the most of it.

Adding Theme Customizer Support For Your Theme

I have used the Cutline 2.2 theme for an example here. With this tutorial you should be able to add Custom Header Support, Custom Background Image and Custom Background Color to the theme.

Creating a Custom Header Area

Open up your functions.php and add the following code to it, somewhere it would look nice. This will tell WordPress that your theme supports Custom Headers:

// Custom Header
$args = array(
'flex-width' => false,
'width' => 896,
'flex-height' => false,
'height' => 163,
'default-image' => get_template_directory_uri() . '/images/header_1.JPG',
);
add_theme_support( 'custom-header', $args );

As you can see above, change the width and height as per your theme’s header image. Also the location of the default image. You can find more arguments here: http://codex.wordpress.org/Custom_Headers

Now its time to set the default image and its thumbnail:

// Setting Default Header Image
register_default_headers( array(
'one' => array(
'url' => '%s/images/header_1.jpg',
'thumbnail_url' => '%s/images/header_1_thumb.jpg',
'description' => 'First Image'
),
) );

Then you need to pull this image from your header.php. Open up header.php and replace the header image with this:

<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />

Here is how it looks like on the Theme Customizer

Header Image (click to enlarge)

Now it’s a matter of adding the Custom Background Image Support. Again to functions.php add:

// Custom Background and Color
$args = array(
'default-color' => '000000',
'default-image' => get_template_directory_uri() . '/images/light-tile.gif',
);
add_theme_support( 'custom-background', $args );

And that shows up like this on the Theme Customizer

Set Background Image (click to englarge)

Time to Test Out Twitter Embed

Moving on, lets see what happens when I paste this tweet:

WordPress 3.4 is here! Update your site now to try the new theme customizer, better headers, HTML captions & more: wp.me/pZhYe-BE

— WordPress(@WordPress) June 13, 2012

And For the HTML in Image Captions

This Caption Uses
So Much HTML!

Upgrade and have fun!

Sourced from: Million Clues! | Follow on Twitter | Fan on Facebook

Leave a Comment: Make Your Theme WordPress 3.4 (Theme Customizer) Compatible

But not good enough. It couldn’t annotate, plus you needed to find a place to upload it. I use twitpic to upload and share photos, but the I have to bother about which photos are private and which are not.

I found the perfect solution. Awesome Screenshot.

Awesome Screenshot is available as a addon for Firefox, Chrome and Safari. It stays on the browser as a neat icon and you have a quick and easy menu. Either Capture the whole page (yes, that is available!) or Capture the Visible area.

Awesome Screenshot Browser Menu

Choose any of those and the capture opens up in a new tab with lots of handy tools:

Capture Options. Crop, Annotate, Add Shapes

And when you are done, save it to your hard disc, or temporarily online or on Diigo if you have an account there. (Would love to see integration with some more free services):

Save On Your PC, or Temporarily Online or Permanently on Diigo

I find the temporary save particularly useful. Take a screenshot, do your thing, save it temporarily, get the shortlink (automatically generated) and then share it where you want to.

Here is a sample upload: http://awesomescreenshot.com/0456u0v81

Does the job, and is awesome! What do you use?

Sourced from: Million Clues! | Follow on Twitter | Fan on Facebook

Leave a Comment: Best Free Addon To Capture And Share Browser Screenshots

Think of times when another admin locks you out, changes the admin email and takes away. Or times when your client cannot remember what email she gave during sign-up and now can’t remember the password as well. Or when you are on a local host and its impossible to reset the password.

Breaking and Entering When You Get Locked Out of WP-Admin

• Login to your Host’s Cpanel (or whatever that lets you access phpMyAdmin)
• Login to phpmyadmin
• From the Left Sidebar of phpMyAdmin, choose the database of the WordPress install. You can find the name of the database from wp-config.php, look for DB_NAME and you will find something like this. In my example wordpress is the database name.

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'wordpress');

phpMyAdmin List of Databases

• Now the sidebar shows a list of tables in the selected database. Find wp_users table. That brings up a list of all users in the installation.

wp_users Table and Edit Button

• Passwords cannot be read off from the database, because they are encrypted or hashed. Use this tool to create the MD5 hash of a password you would like. For eg, the password “testpass” is 179ad45c6ce2cb97cf1029e212046e81
• Back in your phpMyAdmin, edit the admin, or the username that you want the password for. Change the value in user_pass to the new MD5 Hash value that you generated and save it.

Enter MD5 Hash and Save

Now you can login to your wp-admin using the username and the new password.

Sourced from: Million Clues! | Follow on Twitter | Fan on Facebook

Leave a Comment: How to: Change WordPress Password When You Can’t Access WP-Admin

But when it comes to playing a Background music, site-wide with auto-resume across page loads, it becomes a little tricky. I was playing with some plugins today and here is what I did to make it work.

Auto-Resume Tracks Across Page Loads

I got the Audio Playlist Manager with Auto Resume plugin that this guy Ameen built out of the original Audio Playlist Manager plugin. What this plugin does is add a nice widget (or embed on any page using shortcodes) an audio player. The audio player can be configured to auto-play on page load and resume playing on page-loads, both these features makes it the plugin of choice for our need.

Here is how we do it. Install the plugin first.

Go ahead and download a soothing free music track from here, they have color coding for different moods, which make them awesome! Of course, you can have any track you like, make sure you compress it to a smaller size (under 500kb) using a software like this one here.

Now in the plugin settings, create a playlist. Then upload the Audio File using the uploader and Add it to the playlist you created. Click on Preview Player. Make sure you tick the following:

• Begin playing automatically
• Resume playing on page changes
• Repeat when playlist ends
• Set an initial volume to something around 30 if your track is too loud. You don’t want to startle your visitors, or do you?

Audio Player Options

Now you will have a shortcode that looks something like this:

[ti_audio name="Play on Load" autoplay="1" autoresume="1" repeat="1" randomize="1" volume="30"]

Next, I added it to the footer.php (which is called on every page) using the do_shortcode function. But that showed the player on the footer for every page, like this:

So I added some css to hide it and lo! We have background music on all pages that plays on and on as long as the user is on the site. Here is the final code that I added to footer.php

<div style="visibility: hidden; margin-top: -32px;"><?php echo do_shortcode('[ti_audio name="Play on Load" autoplay="1" autoresume="1" repeat="1" randomize="1" volume="30"]'); ?></div>

Have fun!

Sourced from: Million Clues! | Follow on Twitter | Fan on Facebook

Leave a Comment: How to Add Site-Wide Background Music to a WordPress Website

This sometimes call for styling not only your front end for your visitors, but also the backend of your WordPress admin. Well, if you are looking for fully fledged admin themes, Go google for WordPress admin themes and you will end up with many plugins that do that. And if you are looking at completely revamping your backend, complete with your own branding and custom stuff, the Easy Blogging Plugin is made for you.

If that’s not what you are looking for, but instead some tweaks here and there, like hiding some stuff using display:none or something of that sort, here is what you need to do.

Add the following snippet into the functions.php of your active theme:

// add admin css
add_action( 'admin_print_styles', 'load_custom_admin_css' );
function load_custom_admin_css()
{
wp_enqueue_style('my_style', WP_CONTENT_URL . '/themes/custom_admin.css');
}
//end admin css

Now create a custom_admin.css in your wp-content/themes/ folder and add all the custom css you want in there.

For instance, to hide the Plugins section from the Admin sidebar, you would add to your custom_admin.css:

#menu-plugins {
display:none !important;
}

Of course, this is a cosmetic change, like all things css. The plugins area would still be accessible via a direct link. If you wish to remove them or show them based on user-role, Admin Menu Editor can do that for you.

Have fun. Out.

Update: If you want this to be theme independent, I have a cute plugin for you: Admin CSS MU. Check it out.

Sourced from: Million Clues! | Follow on Twitter | Fan on Facebook

Leave a Comment: How to Add CSS Styles to WordPress Admin

Have you ever seen this sign “If you are below 18 leave now, else Enter here” (yeah, the smile on your face explains it)? You see that sign when you enter first and that’s that. Lets make one such page.

Making a “Enter Site” Page

Depending on your theme, your theme folder will have home.php or index.php or sometimes both in your theme folder. If you have home.php open it up, else go for index.php. Refer the template hierarchy if that interests you. I am assuming my theme has index.php only.

Add the following code snippet at the start of  index.php. Start as in, the very first line, before everything and everything. On line 1:

<?php if( (strpos($_SERVER['HTTP_REFERER'], get_bloginfo('home')) === false) && !$_SERVER['QUERY_STRING']) : ?>
<?php include ('http://yourdomain.com/wp-content/themes/yourtheme/page-splash.php'); ?>
<?php else : ?>

Now you opened close the if else by adding the following to the end of index.php. End as in the last line:

<?php endif; ?>

That makes index.php in between those two codes.

What this does is, if the user is entering from anything but your own site, it will show: http://yourdomain.com/wp-content/themes/yourtheme/page-splash.php

Go ahead and make a copy of page.php in your theme folder and name it page-splash.php . If hope you have figured that you have to replace http://yourdomain.com/wp-content/themes/yourtheme/page-splash.php in the above snippet with the direct link to your page-splash.php .

You will have to hard-code your page-splash.php. The best way to do this is to look at the source code of a page on your site and imitate them into your page-splash.php. Well, I am thinking, if you just copy paste the code, that should also work.

Here is a little page-splash.php that I made for Twenty Ten default WordPress theme:

<?php
/**
* The Splash Page
*/

</div><!-- #content -->
</div><!-- #container -->
<?php get_footer(); ?>

To test the welcome page, open up a new tab and enter your site into the browser. Lo!

Hope you have fun creating the Welcome Page. Do let me know what you think.

Sourced from: Million Clues! | Follow on Twitter | Fan on Facebook

Leave a Comment: How to Create a Welcome Page (Splash Page) for WordPress

In simple terms, Taxonomies are classifications and Post Types are well, they are Post Types. For e.g. Pages and Posts are two default post types (there are 5 default post types) and Tags and Categories are default Taxonomies. You can read more about Taxonomies here and Post Types here.

For e.g: Movies could be a custom Post Type and Genre could be a Taxonomy and Genres like Drama, Comedy etc could be the terms.

Here is a code snippet to display posts that belong to a specific taxonomy in a specific post type:

<?php
$args = array(
'posts_per_page' => 10, // Number of posts per page
'post_type' => 'classifieds', // Custom Post Type like Movies
'tax_query' => array(
array(
'taxonomy' => 'classifieds_tags', //Custom Taxonomy Name like Genre
'field' => 'slug',
'terms' => array(
'books', //Tags or Categories like Drama or Comedy
'houses'
)
)
)

<?php endwhile; // end of the loop. ?>

This is a crude version of the code. Referring to your archive.php (or index.php in some themes) should help you extend this further to best suit your theme.

Sourced from: Million Clues! | Follow on Twitter | Fan on Facebook

Leave a Comment: Display Posts from a Custom Taxonomy (Tag / Category) of a Custom Post Type

Rooting was not an option. Other options called in for too much work so I dropped the idea of screenshots.

Last week I came to know that on an iPhone, screenshots come as an inbuilt feature (yeah, too late to know that) and pressing the home button + the power button would take a screenshot. That’s neat.

Screenshot on Android Gingerbred (2.3)

Today morning, I tried the same combination on my S2 and to my surprise it worked! Here is what I took (from the Google Sky Map Application:

On Samsung Galaxy S2 (running Android 2.3.3), to take a screenshot: Press the Home Button + the Power button together. Note that my phone is NOT rooted. The screenshot was saved in a separate folder and can be accessed through the gallery.

This came as a huge surprize to me, because no one ever mentioned anywhere about this inbuilt feature. I found this video today that says its possible and he is using a Samsung Galaxy Ace. And he is using the home button + the back button to get this.

Now, I am wondering if this is a feature that is available only on Samsung Phones. Someone check it on your Android and share? The key combination would be different depending on your phone, so please try some other combos.

Screenshot on Android Icecream Sandwich (4.0)

Screenshot comes as a bundled (and I think a stated) feature on the latest version. The key combo is going to be different for each phone I assume. Holding the home button + volume down should work on most phones.

Sourced from: Million Clues! | Follow on Twitter | Fan on Facebook

Leave a Comment: Taking Screenshots without Rooting or App on Android Gingerbred (2.3) and Icecream Sandwich (4.0)