Border Image Sass Mixin

The following is a Sass mixin for the CSS3 border-image property. It sets an image as the border. @mixin border-image($source, $slice, $width, $outset, $repeat) { border-image-source: url($source); border-image-slice: $slice; border-image-width: $width; border-image-outset: $outset; border-image-repeat: $repeat; -webkit-border-image: url($source) $slice $width $outset $repeat; -o-border-image: url($source) $slice $width $outset $repeat; } Here is an example of how-to include the mixin within your Sass file(s): @include border-image("border.png", 100%, 1, 0, stretch); If you liked this code snippet, you might »

Prevent Hotlinking using .htaccess

Hotlinking is where another website, let's say XYZ.com, uses the asset(s) of another website, let's say ABC.com, by using the direct link to that asset. This is known as hotlinking. The problem with this is that XYZ.com is stealing the bandwidth of ABC.com and could potentially be infringing on ABC.com copyrighted image. You can prevent hotlinking by using the following code snippet. Simply place the code snippet in you .htaccess file. RewriteEngine on RewriteCond »

Using GitHub Gists to Save and Share Code Snippets

GitHub has a service called GitHub Gist, which is a simple way to save and share code snippets (small and reusable code). No more saving your code snippets to a Word document or to Google Drive. All gists are Git repositories, so each gist is automatically versioned, forkable and usable from Git. In addition, each gist can be made up of multiple files and each gist can be downloaded in .tar.gz (gzip compressed tar archives) format. You can also »

How-to Style External Links with CSS

Styling a external link is a good way of telling your website's visitor that the link they are about to visit does not belong to the website they are viewing, but instead belongs to another website. Many websites inform visitors that the link is external by placing an directional arrow icon after the link, but you may prefer to make the external link a different colour than internal links or you may not like having to remember placing an icon »

Clean up wp_head() in WordPress

WordPress adds a lot of various stuff to your website's header source using the wp_head() action hook. Well, some of what is generated you may want, there maybe some that you don't. So, let me show you how to remove what you don't want. Usage We'll be using the remove_action() function, which has a usage of: remove_action( $tag, $function_to_remove, $priority ); The remove_action() function will remove a specified action hook. So, in the above example, »

Remove the WordPress Login Shake Effect

When you go to the WordPress login page and you or a member tries to login but the login fails, a failed box will appear and that box shakes. You can remove the shaking effect by adding the following to your theme's functions.php file: function remove_login_shake() { remove_action('login_head', 'wp_shake_js', 12); } add_action('login_head', 'remove_login_shake'); »

Skeleton Reset CSS File for WordPress Multisite

Skeleton is a WordPress starter theme that uses Twitter's Bootstrap front-end framework. It is also available for HTML5. One of it's core principles is easy customization. One of the ways this is accomplished is through a CSS reset file. What does this mean? Skeleton has two (2) core CSS files: one for Bootstrap and the reset CSS file. The Bootstrap CSS file is where Bootstrap's CSS distribution file is stored. The reset CSS file allows you to override or "reset" »

Display Content Only on First Page of Category

WordPress categories are designed to list posts in that category. This is limiting and you may want to display content on the first page of the category - an advertisements, information, related services, etc... Use the following code snippet to display the content only on the first page of a category: <?php if ( !is_paged() ){ echo 'Content to be displayed only on the first page.'; } else { echo ''; } ?> Add the code snippet to a is_category conditional »

Change Default Theme For WordPress Multisites

When you create a new site in a WordPress multisite installation, the created site will use WordPress's default theme, which most likely will be the newest theme they created. However, you may not like or want this. You can change the default theme a new multisite site uses by adding the following to your wp-config.php file: define( 'WP_DEFAULT_THEME', 'custom-theme-name' ); Replace custom-theme-name with the name of the theme you want to be the default. »