Change your WordPress Theme Favicon

Really easy to do, but rarely done

Not sure how to create your favicon? I typically use GIMP, along with this tutorial. It has some good info on creating “proper” favicons, too, so it’s a worthwhile read even if you aren’t creating a favicon at the moment.

I like X-Icon Editor, too (it’s in the screenshot attached to this post), and there’s tons of converters for creating .ico favicon files.

Just add this modify the following and add it to your theme’s functions.php file, or add it to your WordPress functionality plugin.

function my_favicon() { ?>
<link rel="shortcut icon" href="/path/to/favicon.ico" >
<?php }
add_action('wp_head', 'my_favicon');

Change /path/to/favicon.ico to point to your favicon.ico file and you’re done!

0

WordPress: Sending Correct HTTP Status Code on Login Failure

For some reason, WordPress will send a 200 HTTP response status code, or OK, when a login attempt has failed. Why not send a 403 status code, which is designed specifically to say you can’t be here, or forbidden, actually. There’s even a better alternative to 403, but stay with me.

I came about this bit of information while reading this post by Konstantin Kovshenin. And was able to confirm it myself by logging into this site incorrectly, as you can see in the featured image above. wp-login.php is returned as 200 OK and is circled in red.

So, as Konstantin suggested, we can use this code to send a proper 403 Forbidden status code on a failed login attempt:

<?php
function my_login_failed_403() {
    status_header( 403 );
}
add_action( 'wp_login_failed', 'my_login_failed_403' )
?>

But why send a 403, which is Forbidden? It’s not truly a forbidden page, as people have a legit reason to be there, even if they can’t remember their password.

So, sending 401 Unauthorized as the HTTP response status code may be even better.

<?php
function my_login_failed_401() {
    status_header( 401 );
}
add_action( 'wp_login_failed', 'my_login_failed_401' );
?>

So, you can use either of those, the first chunk to send a 403 Forbidden response, and the second for sending a 401 Unauthorized response code.

On login failure, send "401 Unauthorized" or "403 Forbidden" HTTP response code?

View Results

Loading ... Loading ...

Either could go in the functions.php file for your theme, or more likely, in your WordPress functionality plugin.

You can find a good list of HTTP response codes at the Mozilla Developer Network site.

0

Add HTML To The End of Every WordPress Post

Great for signup forms or affiliate links

I don’t place the DigitalOcean affiliate link manually at the end of each post. That’s because it’s super easy to do with add_filter('the_content').

Add The Message, With or Without HTML

function add_post_bottom_content($content){

    $html = '<span class="post-footer-message"><a href="http://oursponsor.com" target="_blank">Thanks to our sponsor for the generous donation!</a></span>';

    if( !is_page( ) && isset($html) ) {

        return $content . $html;

    } else {

        return $content;

    }

}

add_filter('the_content', 'add_post_bottom_content');

To disable the content, just empty the $html variable .

$html='';

The anchor tag is wrapped in a span with a class of post-footer-message. You’ll want to style your message with that, rename the classes if you want, just stay consistent with the naming.

Some basic styling, with no underline on hover:

span.do_link a:hover {
  font-style:none;
}

As long as you have some basic CSS knowledge, you’ll be able to apply all the styling you need. Just remember to add your CSS to your child theme’s style.css file, or load up the custom CSS file.

The code in this post can go in your theme’s functions.php file or in your WordPress functionality plugin.

3+

Creating A WordPress Functionality Plugin

Keep your customizations in place, like that driftwood up there

A functionality plugin is a WordPress plugin that is specific to your site, and contains the additional functionality you need your site to have. This is a much better option than adding features to your theme’s functions.php file, because it allows you to change themes at will, yet keep your customizations via the plugin.

WPCandy has a great write-up on creating a functionality plugin and does a great job of explaining why you’d want to use one, and also what kind of things belong in a functionality plugin. Here’s one of my favorite pieces from that WPCandy article:

To decide what belongs in a functions.php file and what belongs in a functionality plugin, think long term. Rather than thinking about how your website will look and behave this week, think about how it will look and behave five years from now. With few exceptions, I bet all of our sites will have new and upgraded themes in five years’ time.

If a feature is theme-specific, such as sidebars or menus, is should go into your functions.php file. If the feature interacts with content of any type, it belongs in a functionality plugin.

Creating The Plugin

This piece is so easy, we’re essentially creating our own WordPress plugin. First, create a new folder called functionality-plugin. Create it inside the plugins folder for your WordPress site.

Next, we just need to create the PHP file and save it in the functionality-plugin folder. Your plugin needs to have some specific content in the comments at the top of the file for WordPress to recognize it as a plugin, you can see those in the functionality plugin example below. Our functionality plugin will load a JavaScript file that your site relies on ALL the time, no matter what theme is currently in use.

<?php
/*
Plugin Name: Tyler's Functionality Plugin
Description: Everything to run my site.
Version: 1.0
License: GPL
Author: Tyler Longren
Author URI: http://longren.io/
*/

function load_site_scripts() {
    // load javascript
    wp_enqueue_script( 'photo-service-script', 'http://thisphotoservice.com/script.js' );
 
}
add_action( 'wp_enqueue_scripts', 'load_site_scripts' );

?>

So, with that, as long as this plugin is enabled, your site will always load that necessary JavaScript file, http://thisphotoservice.com/script.js.

You can safely use that code as a starting point for your own functionality plugin. Just make sure to save that code in the functionality-plugin folder.

The filename doesn’t matter, just make sure to save it with a .php extension. Navigate in your web browser to your WordPress Dashboard, go to Plugins, and enable your plugin just like you would any other plugin. That’s it!

Really, most of what I know about functionality plugins came from Ryan Imel and his article at WPCandy, so a LOT of credit is owed to Ryan.

Do you use a functionality plugin?

View Results

Loading ... Loading ...

There’s this plugin at WordPress.org, too, called Functionality. It’s essentially a plugin for creating a functionality plugin it looks like, but I’m really not sure. Anybody used it before? Comments are open below.

0

Adding Pace From HubSpot To Your WordPress Theme

Pace.js, from HubSpot, is pretty cool. It’s a page load progress bar that usually sits at the top of your website. The Minimial theme for Pace, which I like the best, gets hidden by the WordPress admin bar if you have it enabled. There’s a few different themes though, most work just fine with the WordPress admin bar.

HubSpot describes Pace better than I can.

Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.

No need to hook into any of your code, progress is detected automatically.

Instead of downloading pace.js, I like to use cdnjs for this type of thing, here’s pace.js on cdnjs.com.

In your functions.php file, just call the cdnjs file instead of a local file. You will, however, have to host the Pace theme CSS locally, which is usually tiny, unless you choose one of the more animated themes. I personally like the Center Simple theme the best.

Pace Themes

The wp_enqueue_style() call below loads /css/pace.css from your theme’s stylesheet directory. That’s the file that should contain the CSS provided by the Pace theme download.

/**
* load_scripts
*
* load up css and javascript for Pace.js
*/
function load_scripts() {
    // load styles
    wp_enqueue_style( 'pace-css', get_stylesheet_directory_uri() . '/css/pace.css' ); // Center Simple Theme CSS

    // load javascript
    wp_enqueue_script( 'pace', 'http://cdnjs.cloudflare.com/ajax/libs/pace/0.4.17/pace.min.js' ); // pace.min.js
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );

If your functions.php file already contains a add_action( 'wp_enqueue_scripts', 'load_scripts' ), find the function it calls, and add wp_enqueue_style and wp_enqueue_script there instead of making a new function like the example above.

This is more for theme developers to build into their themes as options and such, so if you’re a regular WordPress user you’d be better served by a functionality plugin. Essentially a plugin that you always have activated that adds all the necessary extra elements of the site, like the Pure JavaScript and CSS.

I’ll show how to create your own functionality plugin within the next few posts/days. If you want notified of when exactly it’s posted, subscribe below. Look for the Get New Posts via E-Mail heading.

Update: There’s a plugin to do this, too.

0