Archive for the ‘ Design ’ Category

2012 in review

The WordPress.com stats helper monkeys prepared a 2012 annual report for this blog.

Here’s an excerpt:

4,329 films were submitted to the 2012 Cannes Film Festival. This blog had 17,000 views in 2012. If each view were a film, this blog would power 4 Film Festivals

Click here to see the complete report.

Advertisements

WANTED – URGENTLY 5 PHP DEVELOPERS

The PHP logo displaying the Handel Gothic font.

SecureNext Software

We plan to recruit 5 PHP developers with 2-3 years experience in our Chennai branch. The candidate should have a minimum 1.5 years experience as a PHP developer. A quick learner and a team player is an added advantage. The referred candidate must commit to serve the company for at least 2 years. If you know anybody who is meeting all the above requirements and is looking for a change, please refer them and ask them to send their resumes to murugan@securenext.net. & raman@securenext.com.

We want to close this recruitment in a week’s time and hence would appreciate a quick response !.. If the candidate referred by you is selected, then, you will get the referral bonus per selected profile as per the company rules and guidelines.

Job Description:-

For PHP openings, We need the following skill set :.

Edu.Qlfn: BE ( CSE / IT / EEE), MCA, MS (CS)

1) Should have minimum 1 year 6 month experience in PHP development

2) Good & hands-on knowledge in PHP, MYSQL, Jquery and CSS
3) A Fair knowledge in Joomla, wordpress and drupal will be an added advantage

We need the following details

Current CTC / Nett take home p.m.

Expected CTC / Nett take home p.m.

Referred By

Number of days required to Join

Reason for changing Job

How to dynamically modify the output of the wp_list_pages

Modifying the output of Wordpres’ template tag wp_list_pages

I’ve noticed a lot of traffic to my previous post on this subject: How to style wp_list_pages, which means that there is a lot of interest in this subject.
I recommend reading the previous article as it might explain certain things which I am going to write about here.

For the template that I was recently working on, I needed a modified output of the default <?php wp_list_pages(‘arguments’); ?> tag, in a way that it would change the link into and anchor. For example, instead of this:

<li class="page_item page-item-1">
    <a title="thisisanexample" href="http://www.thisisanexample.com">this is an example</a>
</li>

into this:

<li class="page_item page-item-1">
    <a title="thisisanexample" href="#thisisanexample">this is an example</a>

</li>


If you are wondering what are anchors for: these are the shortcuts that take you from one part of a page to another part of the same page.
Here’s what I had to start with:

  • A number of pages which all had the same parent
  • The parent’s ID is 5 (you need to find this number on your own)
  • They were all only one level deep (it means that these pages didn’t have any children)
  • the powerful wp_list_pages() tag

So, this is how to do it…

  • Find your wp_list_pages() tag in the template
  • Change the <?php wp_list_pages(‘arguments’); ?> into the following:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
    $my_pages = wp_list_pages('echo=0&title_li=&child_of=5&depth=1');

    $pieces = explode('"', $my_pages);
    $i = 5;

    $j = 3;
    $limit = count($pieces);

    for (;$i<$limit;) {
        $tmp1 = '#'.$pieces[$j];

        $pieces[$i] = $tmp1;
        $i = $i+6;

        $j = $j+6;
    }
    $tmp2 = implode('"',$pieces);

    echo $tmp2;
?>
  • The above code takes the output of wp_list_pages and assigns it to the variable $my_pages
  • The parameters of wp_list_pages: echo=0,so it doesn’t output to the screen, title_li=, so there is no name for the list, child_of=5, so we only get pages, who are children of page no. 5, and depth=1, so we don’t include any children of these pages
  • After that, we need to split (explode) the output into separate parts (array), at each of the ” characters:

from:

$my_pages = '<li class="page_item page-item-1"><a title="example title" href="http://www.examplelink.com">example title</a></li>'

into:

pieces[0] = "<li class="
pieces[1] = "page_item page-item-1"

pieces[2] = "><a title="
pieces[3] = "example title"

pieces[4] = " href="
pieces[5] = "http://www.examplelink.com"

pieces[6] = ">example title</a></li>"
  • Next, we find what are we going to use: pages[3] and pages[5] – the title and the link
  • Also, if we have more than 1 link, then we need to set a limit of how many times the for function will be executed – we can do it easily by getting the number of elements in the pieces[] array:
$limit = count($pieces);
  • Then, we set up a for loop which goes through the whole pieces[] array and exchanges every link with its title, preceded with # (the anchor mark):
$tmp1 = '#'.$pieces[$j];
$pieces[$i] = $tmp1;
  • The above creates a temporary variable by joining the ‘#’ sign with the title of the link (from pieces[3]), and then changes the value of pieces[5] to that temporary variable, which now is our anchor
  • And finally, if you have more than one link (page) then you will need to increase both $i and $j values by 6 – this is how often they are occurring in the pieces[] array
  • When there are no more pieces left to go through and the for loop ends, we need to join all the values of the pieces[] array back into one single variable and print it out

And that is it.

It might happen that the wp_list_pages function outputs the title and the link swapped (link comes before the title), then just swap the values of $i and $j, and it should work.

Oh, and it only works with the unmodified output of the <?php wp_list_pages(‘arguments’); ?> tag – it might behave differently when used together with what I have discussed in the previous link on this subject: How to style wp_list_pages

As usual, let me know what you think about this hack (especially since it isn’t the only way of doing it) and ask questions in the comments if you need help.

Source: Wantusiak Maciej

How to style wp_list_pages

Applying styling to dynamically generated lists (or any content) in WordPress.
Recently, I was in a need of changing the default outcome of the <?php wp_list_pages(‘arguments’); ?> tag in WordPress – as you’ll see, it’s a really simple procedure. I needed to change the wp_list_pages outcome, but this technique can be applied to other tags as well.

On default, after calling this script, we recieve something along these lines:

<ul>
    <li class="page_item current_page_parent">
        <a href="#">Link</a>
    </li>
    <li class="page_item">

        <a href="#">Link2</a>
    </li>
</ul>


On some ocasions you will probably wish to add a <class> or a <span> to each link. Too bad that the wp_list_pages() tag doesn’t take as arguments strings to go before and after each link.

So, this is the way that you can go around this problem:

  • Find your wp_list_pages() tag in the template
  • Change the <?php wp_list_pages(‘arguments’); ?> into the following:
1
2
3
4
5
6
7
8
9
10
<?php
    $my_pages = wp_list_pages('echo=0&title_li=');

    $var1 = '<a';
    $var2 = '<span class="testClass"><a';

    $var3 = '</a';
    $var4 = '</a></span>;';

    $my_pages = str_replace($var1, $var2, $my_pages);

    $my_pages = str_replace($var3, $var4, $my_pages);

    echo $my_pages;
?>
  • The above looks for strings $var1 and $var3 and changes them with $var2 and $var4, respectively in the $my_pages variable (which is the outcome of the wp_list_pages() tag)
  • It is important to pass echo=0&title_li= as arguments because the output would be otherwise not stored as the &my_pages variable (echo=0) and the list would have a title – typically “Pages” (title_li=)
  • After this operation the previous code looks like this:
1
2
3
4
5
6
7
8
9
10
11
12
<ul>
    <li class="page_item current_page_parent">

        <span class="testClass">
            <a href="#">Link</a>
        </span>
    </li>
    <li class="page_item">

        <span class="testClass">
            <a href="#">Link2</a>
        </span>
    </li>
</ul>

And this is it! Simple yet powerful. This litlle trick can have many applications (like, for example, creating a hover effect with some script on the menu) and it is up to you what to do with it next. If you are going to use it for something – it’s always appreciated if you could share your ideas.

Update! I’ve noticed that a lot of interest is paid to this post. If some of you would like me to explain something in more detail, then ask for it in a comment. I hope that I will be able to help 🙂
Update 2! I have written a new post about modifying the outcome of the wp_list_pages tag – have a look here: WordPress: how to dynamically modify the output of the wp_list_pages tag
Take care!

Maciek

Q1: How would one style an element inside a link?
Here is a little modification of the script to include styling of parts of a link, as suggested by Ben, although Ben’s problem was a little more complex.

The problem is how to style one part of a link, for example: The link is “WordPress Rocks!” and we want to apply style only to the word “WordPress”, to be… mmmm…. bold and green! That’s how to do it:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
    $my_pages = wp_list_pages('echo=0&title_li=');

    $var1 = '<a';
    $var2 = '<span class="testClass"><a';

    $var3 = '</a';
    $var4 = '</a></span>;';

    $var5 = 'Wordpress';
    $var6 = '<h10>Wordpress</h10>';

    $my_pages = str_replace($var1, $var2, $my_pages);

    $my_pages = str_replace($var3, $var4, $my_pages);

    $my_pages = str_replace($var5, $var6, $my_pages);

    echo $my_pages;
?>

As you can see, I have wrapped the word “WordPress” in <h10> tag. Why not <span>? Because for what I know it creates a bunch of gibberish as outcome (try it and you’ll know it). <h10>, or any <h> tag which is not being used, is a simpler solution.

Don’t forget to style it in your CSS file. If the <h> tag breaks your line, use “display:inline;” in your style sheet to fix it.

h10 {
    font-weight: bold;

    color: Green;
    display: inline;
}

Oh, and I am assuming that the word “WordPress” is a constant output from the wp_list_pages(). This means, that wp_list_pages() always outputs the word “WordPress”.

Q1: How to add a line between to <li> elements?
Here’s how:

1
2
3
4
5
6
7
<?php
    $my_pages = wp_list_pages('echo=0&title_li=');

    $var1 = '/li><li';
    $var2 = '/li> whatever you want to add here <li';

    $my_pages = str_replace($var1, $var2, $my_pages);

    echo $my_pages;
?>


UPDATED!!! 25.04.2009


Q2: How do you create a dynamic submenu?
Marc Wiest was kind to share wit us a solution to this problem, based on the above hack and work by Gabriel Svennerberg.

Here is how to create a dynamic submenu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
    $has_subpages = false;
    // Check to see if the current page has any subpages  
    $children = wp_list_pages('&child_of='.$post->ID.'&echo=0');

    if($children) {
        $has_subpages = true;
    }

    // Reseting $children  
    $children = "";
    // Fetching the right thing depending on if we're on a subpage or on a parent page (that has subpages)  
    if(is_page() && $post->post_parent) {

        // This is a subpage  
        $children = wp_list_pages("title_li=&include=".$post->post_parent ."&echo=0");

        $children .= wp_list_pages("title_li=&child_of=".$post->post_parent ."&echo=0");

    } else if($has_subpages) {
        // This is a parent page that have subpages  
        $children = wp_list_pages("title_li=&include=".$post->ID ."&echo=0");

        $children .= wp_list_pages("title_li=&child_of=".$post->ID ."&echo=0");

    }
?>
<!--Check to see if we have anything to output-->
<?php if ($children) { ?>

    <div class="subNav">
	<ul>
    	    <li>
            <!--modified wp_list_pages-->

	        <?php
                    $var1 = '<a';
                    $var2 = '<span class="testClass"><a';

                    $var3 = '</a>';
                    $var4 = '</a></span>';

                    $children = str_replace($var1, $var2, $children);

                    $children = str_replace($var3, $var4, $children);

                   echo $children;
                ?>
                <!--end of modified wp_list_pages-->
            </li>
        </ul>

    </div><!--subNav-->
<?php } ?>

I didn’t get a chance to test out this code (but it looks alright to me and it works for Marc), so if you run into any problems, let me know in the comment.
Also you are welcome to share your problems and solutions.
Again, thanks Marc!

If you found this post interesting, have a look at the one about dynamically modifying the wp_list_pages output

Source: Wantusiak Maciej

Best jQuery plugins – June 2010

JcubeiT Plugin

Pretty funny one demonstrating how to build a cube using new CSS properties. Its use is very simple, you only need 3 objects (the visible faces of the cube) inside of a DIV container. Such objects could be links, images, other divs, etc.

Try out a demo

dualSlider

A great option to have as a splash feature at the top of your site, highlights recent articles you want to advertise, that might have a nice graphic or even a video…basically anything you want.

Try out a demo

popeye – an inline lightbox alternative

Popeye generates an inline image gallery from an unordered list of images. The gallery features clever inline image enlargement, i.e. the enlarged image stretches out over the site content without adding a visual overlay of the whole site. It stays fixed with one edge to its original coordinates, so that a sense of cohesiveness is created in the user interface and interaction.

Try out a demo

Image Desaturate

This plugin allow you to desaturate (convert to gray) images. Support of transparent png for IE is included (not compatible with other png fix plugins).

Try out a demo

Google Charts

Add Google Charts to your pages via a simple JavaScript interface. You provide the data and Google does the rest.

Try out a demo

jQuery.Scratchie

jQuery Scratchie Scratchie is a fully-customizable scratchcard plugin. Define a background image and an overlay image or color and clicking and click and drag or just drag the mouse over the overlay to reveal the target image underneath!

Try out a demo

Get User Facebook Albums and Pictures

getFacebookAlbums is a plugin that allows the user to connect on Facebook and choose a picture among his/her own albums. It’s an alternative to the simple upload form the hard drive disk.

Try out a demo

showLoading

This plugin is designed to show a loading image over a specific area of the screen (e.g. a specific div or other dom element) while an ajax request is running.

Try out a demo

scrollExtend and onScrollBeyond

The scrollExtend plugin is designed to automatically load new content at the bottom of the screen (by appending to a DOM element) when the user scrolls beyond the element, much like Facebook does with their status updates. The existing infinite scroll plugin was primarily designed to integrate with WordPress, which didn’t really suit my purposes.

Try out a demo

jQnotice

Allow you to show some notifications at the top of your website with just a simple line.

Try out a demo

Felichi Borders

This small javascript allows custom made borders to html elements. You can use your own images to style the borders.

Try out a demo

jQuery-typing

Assign callbacks for started/stopped typing events.

Try out a demo

IE Select Width

Setting the fixed width of a select element in Internet Explorer will cause all of the select options that are wider than the select’s set width to be cropped.

Try out a demo

Blockify

Allows you to turn any element into a clickable link based on an anchor tag within said element. HTML5 makes this plugin obsolete (because you can wrap an anchor tag around block level elements) but is still useful for the time being.

Try out a demo

statusmessageQ

Display status messages in a consistent and friendly manner.

gSearch – Google Web Search

gSearch is a lightweight jQuery plugin that helps you embed Google Search Results into your website. With only 2 KB in size it is very flexible and highly customizable.

Try out a demo

jQuery FormLabels Plugin

The idea of using captions on form input boxes is not new; however, previous methods of providing this functionality have a few drawbacks. The jQuery FormLabels Plugin is a result of working with hundreds of different clients, sites, and especially forms. Every form is different, so building a uniform label generator was not an easy task.

Try out a demo

text2form

Filling many inputs (Addressforms, Applications, Payments etc) with content from a textarea separated by Newlines. So its more easy to fill out several forms from a textual source. For example: putting a email signature via clipboard to your CRM.

Try out a demo

jCollapser

It is a jQuery plugin to help ease the creation of multiple collapsable elements on a page.

Try out a demo

jStockTicker plugin

A JavaScript stock ticker plugin. It animates a sequence of spans contained in a div.

Idle Checker

Customizable cross window/tab utility that checks and notifies the user if they are about to be automatically timed/logged out.

Try out a demo

jFrame : Complex ajax without JavaScript

jFrame provides an easy way to get an HTML frame-like behaviour on DIV Elements with a src attribute.

Try out a demo

Sliding Labels

A jQuery technique that presents labels in input fields by default but then slides them to the left (or up) rather than removing them on click. If JavaScript is turned off, the labels are displayed above the input fields. The small jQuery snippet works in all major browsers and can be used for input and textarea elements.

Try out a demo

jQuery Cursor Hover Plugin

This plugin lets you create a two-layer button with one layer that follows the mouse. This method allows you to create some very professional effects on your site. The example below duplicates the Windows 7 start bar button hover functionality.

Try out a demo

TagCanvas

TagCanvas is a Javascript class which will draw and animate a HTML5 canvas based tag cloud.

Try out a demo

jQuery Panel Magic

jQuery Panel Magic is a new take on website navigation. Using a matrix or grid style layout for your website, you can easily implement this plugin for small websites and web applications. It gives you more room for your design and provides a cool new approach to a sitemap.

Try out a demo

jsTree

jsTree is a javascript based, cross browser tree component. It is packaged as a jQuery plugin. jsTree is absolutely free (licensed same as jQuery – under both GPL and MIT – whichever suits your needs).

Try out a demo

Open Standard Media Player

The Open Standard Media Player is an all-in-one media player for the web. This media player is an industry changing, open source (GPL) media player that is built to dynamically deliver any type of web media, including HTML5, YouTube, Vimeo, and Flash.

jQuery Easy Confirm Dialog

This is a jQuery based confirm plugin module that will act as the build in confirm-function in javascript but with the ability to style the dialog window. Only using built in jQuery and jQuery UI functions.

Try out a demo

Source: qeqnes.wordpress.com

WordPress functions.php Template with 15 Essential Custom Functions

When designing WordPress themes, I always add a common set of custom functions to the theme’s functions.php file. This speeds up development time because I don’t have to hunt for and individually copy the same slew of functions for every theme. I just drop in a copy of my functions.php template and build up from there. This takes care of all those little things that always need to be done:

  • Include jQuery
  • Enable threaded comments
  • Add feed links to the header
  • Disable unused widget areas
  • Adding Google Analytics to the footer
  • Stop the “Read More” link from jumping to the middle of the next page 😉

One of the things that I like about these functions is that they’re all so concise, simple, and effective. The functions.php template file currently contains 15 different functions and is a continual work in progress. Not everyone is going to need or use everything in the file, but the idea is to modify this template into something that works for you. It’s a starting point with some really useful functions.

In this DiW article, we first provide an explanation of each of the 15 functions and then bring them all together into the working functions.php template. Just copy and paste the template code at the end of this article or grab a copy of the zipped functions.php file and enjoy a custom collection of functions that will help you optimize your development process while enhancing WordPress with essential functionality.

Add feed links to header

Since version 2.8, WordPress can add all relevant feed links (main, comments, categories, et al) to your <head> area. It doesn’t happen by default, however, because you have to add the following snippet to make it work:

// add feed links to header
if (function_exists('automatic_feed_links')) {
	automatic_feed_links();
} else {
	return;
}

This will check to see if you’re using a version of WordPress that is compatible, and then enable the automatic feed links. A couple of notes: first, this method assumes that you are not manually including any feed links in your <head>. Also, I read a recent Trac ticket that looked like this functionality was being integrated with add_theme_support, so keep your eyes open for that.

Automatic jQuery inclusion

We’ve discussed how to include jQuery the right way by placing a little snippet in your document head, but here is a way to do it from your theme’s functions.php file:

// smart jquery inclusion
if (!is_admin()) {
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
	wp_enqueue_script('jquery');
}

This code ensures that only one copy of jQuery is included, and calls it from Google’s servers to save bandwidth and take advantage of any primed caches that happen to be visiting. Note that this function needs to be located before the threaded-comments function in order for it to work.

Enable threaded comments

As we explain in the book, enabling threaded comments requires adding a snippet of code into your <head> area just before the wp_head tag. After a little experimenting, I discovered that you can include this snippet from the functions.php file:

// enable threaded comments
function enable_threaded_comments(){
	if (!is_admin()) {
		if (is_singular() AND comments_open() AND (get_option('thread_comments') == 1))
			wp_enqueue_script('comment-reply');
		}
}
add_action('get_header', 'enable_threaded_comments');

This helps keep your document <head> a little cleaner. Note that this function needs to be located after the jQuery-inclusion function in order for it to work.

Remove unwanted crap from the head section

As we’ve mentioned before, WordPress spits out a ton of crap in the document <head> – stuff like the version number and WLW, RSD, and index links. To clean things up, we add this nice little snippet into the functions.php template:

// remove junk from head
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'start_post_rel_link', 10, 0);
remove_action('wp_head', 'parent_post_rel_link', 10, 0);
remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0);

Add Google Analytics to the footer

Another annoying task that has to be done for all of the sites I create is adding Google Analytics code to the footer.php file. Recently it occurred to me to just add the code to my functions.php and never worry about it again:

// add google analytics to footer
function add_google_analytics() {
	echo '<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>';
	echo '<script type="text/javascript">';
	echo 'var pageTracker = _gat._getTracker("UA-XXXXX-X");';
	echo 'pageTracker._trackPageview();';
	echo '</script>';
}
add_action('wp_footer', 'add_google_analytics');

A couple of notes here: first, obviously you want to replace the “UA-123456-1” with your actual GA code. Second, you may want to check out the three currently available Analytics options and modify the code accordingly. Currently, this function is using the newer “ga.js” tracking code, but that is easily changed to either of the other methods.

Custom excerpt length

Instead of using the default 55-word limit, this function enables you to specify any length for your excerpts.

// custom excerpt length
function custom_excerpt_length($length) {
	return 20;
}
add_filter('excerpt_length', 'custom_excerpt_length');

Just set your preferred number of words by editing the “20” to whatever you wish.

Custom excerpt “continue” string

Or whatever they call that funky bracketed ellipses thing “[...]” that is appended to your post excerpts by default. I like to remove the brackets, but with this functions.php snippet you can change it to anything:

// custom excerpt ellipses for 2.9+
function custom_excerpt_more($more) {
	return '...';
}
add_filter('excerpt_more', 'custom_excerpt_more');

/* custom excerpt ellipses for 2.8-
function custom_excerpt_more($excerpt) {
	return str_replace('[...]', '...', $excerpt);
}
add_filter('wp_trim_excerpt', 'custom_excerpt_more'); 
*/

As you can see, there are two different versions of this code, depending on your version of WordPress. We like to stay current, so we commented out the older method but left it there in case you need it. For either version of this technique, just replace the “...” with “pants on the ground” or whatever happens to suit your needs.

No “more” jumping for the “read more” link

One of the weirdest things that WordPress does is “jump” the reader to the location of the “<!--more-->” tag on the single-post-view when the “read more” link is clicked. It’s just awkward — if the jump was on the same page, it would make sense, but to load a new page and then take the reader halfway down without explaining anything is just wrong. In any case, here is a nice little function that will stop the jumping once and for all:

// no more jumping for read more link
function no_more_jumping($post) {
	return '<a href="'.get_permalink($post->ID).'" class="read-more">'.'Continue Reading'.'</a>';
}
add_filter('excerpt_more', 'no_more_jumping');

Nothing else needs to be done for this to work – just plug it in and enjoy your new “jumpless” functionality. Note that this is also a convenient place to customize the “read more” link with whatever attributes or custom text you wish.

Add a favicon to your blog

You just gotsta have a favicon for your blog, and this code makes it super easy to do. Just create your image and upload to site’s root directory. The following code in your functions.php file makes it so by adding the required line to your <head> area:

// add a favicon to your 
function blog_favicon() {
	echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('wpurl').'/favicon.ico" />';
}
add_action('wp_head', 'blog_favicon');

Feel free to change the directory to whatever you desire. Also make sure that the wp_head is present within your theme’s header.php file.

Add a different favicon for your blog’s Admin area

While we’re here, let’s add a unique favicon to our Admin pages, so that they are easier to recognize when bookmarked or working with tabs. Just create a favicon and upload to your theme’s /images/ directory. This code takes care of the rest:

// add a favicon for your admin
function admin_favicon() {
	echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('stylesheet_directory').'/images/favicon.png" />';
}
add_action('admin_head', 'admin_favicon');

As before, feel free to change the directory to whatever you desire. It might be best to keep your admin favicon in a separate directory than your blog favicon. Just sayin’.

Custom Admin Login logo

You know that snazzy blue WordPress logo that is branding your various login pages? Yeh, you can change that to whatever you want. Just create your custom login image, name it “custom-login-logo.png”, and upload it to your theme’s /images/ directory. This code will take care of the rest:

// custom admin login logo
function custom_login_logo() {
	echo '<style type="text/css">
	h1 a { background-image: url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important; }
	</style>';
}
add_action('login_head', 'custom_login_logo');

The key here is to make sure that the path and image names match that of your setup. Also, when creating your image, you may want to keep in mind the properties of the original: 30px length, 31px height, transparent GIF format, and header background color of #464646 (for the image matte).

Disable unused widget areas

Justin Tadlock shares this handy function for removing unwanted widget areas from our theme – a must for customizing existing themes:

// disable all widget areas
function disable_all_widgets($sidebars_widgets) {
	//if (is_home())
		$sidebars_widgets = array(false);
	return $sidebars_widgets;
}
add_filter('sidebars_widgets', 'disable_all_widgets');

This code is plug-&-play – no other modifications need to be made. Note: if you only want to disable widgets on your Home page, then remove the two comment slashes (“//”) from the third line.

Kill the WordPress update nag

This is one of my favorites, but I know it’s not for everyone. In any case, you know that “Please update now..” message that appears on every page in the WordPress Admin when new versions are available? This sweet little function kills it dead (or disables it, actually):

// kill the admin nag
if (!current_user_can('edit_users')) {
	add_action('init', create_function('$a', "remove_action('init', 'wp_version_check');"), 2);
	add_filter('pre_option_update_core', create_function('$a', "return null;"));
}

Feel free to comment this one out or remove it if you rely on the Admin nag to keep you informed of changes.

Include category ID in body_class and post_class

By default, WordPress body_class and post_class do not include the ID of the category of the current post. This custom function changes all that:

// category id in body and post class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes [] = 'cat-' . $category->cat_ID . '-id';
		return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

Even if you aren’t using it, it’s a nice function to have around, which is why it’s included here for this custom functions.php template of essential functions. Keywords in the house because we can.

Get the first category ID

Another useful function when working with different categories is the ability to get the first category ID of the current post. This function makes it happen:

// get the first category id
function get_first_category_ID() {
	$category = get_the_category();
	return $category[0]->cat_ID;
}

Strictly plug-&-play: just use <?php get_first_category_ID(); ?> in your theme template file to access the data.

Putting it all together..

As promised, here is the full-meal deal – the entire collection neatly organized into a single chunk of code:

<?php // custom functions.php template @ digwp.com

// add feed links to header
if (function_exists('automatic_feed_links')) {
	automatic_feed_links();
} else {
	return;
}


// smart jquery inclusion
if (!is_admin()) {
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.3.2');
	wp_enqueue_script('jquery');
}


// enable threaded comments
function enable_threaded_comments(){
	if (!is_admin()) {
		if (is_singular() AND comments_open() AND (get_option('thread_comments') == 1))
			wp_enqueue_script('comment-reply');
		}
}
add_action('get_header', 'enable_threaded_comments');


// remove junk from head
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'feed_links_extra', 3);
remove_action('wp_head', 'start_post_rel_link', 10, 0);
remove_action('wp_head', 'parent_post_rel_link', 10, 0);
remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0);


// add google analytics to footer
function add_google_analytics() {
	echo '<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>';
	echo '<script type="text/javascript">';
	echo 'var pageTracker = _gat._getTracker("UA-XXXXX-X");';
	echo 'pageTracker._trackPageview();';
	echo '</script>';
}
add_action('wp_footer', 'add_google_analytics');


// custom excerpt length
function custom_excerpt_length($length) {
	return 20;
}
add_filter('excerpt_length', 'custom_excerpt_length');


// custom excerpt ellipses for 2.9+
function custom_excerpt_more($more) {
	return '...';
}
add_filter('excerpt_more', 'custom_excerpt_more');

/* custom excerpt ellipses for 2.8-
function custom_excerpt_more($excerpt) {
	return str_replace('[...]', '...', $excerpt);
}
add_filter('wp_trim_excerpt', 'custom_excerpt_more'); 
*/


// no more jumping for read more link
function no_more_jumping($post) {
	return '<a href="'.get_permalink($post->ID).'" class="read-more">'.'Continue Reading'.'</a>';
}
add_filter('excerpt_more', 'no_more_jumping');


// add a favicon to your 
function blog_favicon() {
	echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('wpurl').'/favicon.ico" />';
}
add_action('wp_head', 'blog_favicon');


// add a favicon for your admin
function admin_favicon() {
	echo '<link rel="Shortcut Icon" type="image/x-icon" href="'.get_bloginfo('stylesheet_directory').'/images/favicon.png" />';
}
add_action('admin_head', 'admin_favicon');


// custom admin login logo
function custom_login_logo() {
	echo '<style type="text/css">

	h1 a { background-image: url('.get_bloginfo('template_directory').'/images/custom-login-logo.png) !important; }
	</style>';
}
add_action('login_head', 'custom_login_logo');


// disable all widget areas
function disable_all_widgets($sidebars_widgets) {
	//if (is_home())
		$sidebars_widgets = array(false);
	return $sidebars_widgets;
}
add_filter('sidebars_widgets', 'disable_all_widgets');


// kill the admin nag
if (!current_user_can('edit_users')) {
	add_action('init', create_function('$a', "remove_action('init', 'wp_version_check');"), 2);
	add_filter('pre_option_update_core', create_function('$a', "return null;"));
}


// category id in body and post class
function category_id_class($classes) {
	global $post;
	foreach((get_the_category($post->ID)) as $category)
		$classes [] = 'cat-' . $category->cat_ID . '-id';
		return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');


// get the first category id
function get_first_category_ID() {
	$category = get_the_category();
	return $category[0]->cat_ID;
}

?>

Download the custom functions.php template file

If you prefer, you can download this code in a ready-to-go functions.php file in zipped format:

Download zipped functions.php Template File

Source:

Digging into wordpress

%d bloggers like this: