Code Explosion – Week 1

Welcome to the first installation of Weekly Code Roundup. Every week as I write code for my various freelance positions I find nifty bits of code across the far reaches of the interwebs. Those that I found most useful are below:

CSS3

Image opacity can help enhance user experience, especially when using CSS3 transitions to smooth the effect:

img    {
    opacity:0.4; /* Image will begin at 40 percent opacity */
    filter:alpha(opacity=40); /* For IE8 and earlier */
    -webkit-transition: all ease 0.5s; /* transition will ease in .5 seconds */
    -moz-transition: all ease-in 0.5s;
    -o-transition: all ease-in 0.5s;
    transition: all ease-in 0.5s;
}

img:hover    {
    opacity:1.0; /* on hover transition from 40 to 100 percent initiates */
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

jQuery

Helpful resource for becoming a jQuery ninja:

Improve your jQuery – Jon Hobbs-Smith

WordPress

When creating a custom theme in WordPress you will frequently need to refer to relative locations in your template directory. This piece of PHP lets you do that quite simply:

<img src="<?php echo get_template_directory_uri() ?>/images/mainimage.jpg" title="" alt="" />

<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/css/normalize.css"><!-- Reset Stylsheet -->

Pages and Posts are what will be generated most by people using your theme, so why not make the WordPress Search Parameter exclude pages from search results:

<?php

    function SearchFilter($query) {
    if ($query->is_search) {
    $query->set('post_type', 'post');
    }
    return $query;
    }

    add_filter('pre_get_posts','SearchFilter');

?>

Without this piece of code in footer.php, some WordPress files can break, including plugins and widgets. WordPress key to theme development from “Blank” Themes:

<?php
   /* Always have wp_footer() just before the closing </body>
    * tag of your theme, or you will break many plugins, which
    * generally use this hook to reference JavaScript files.
    */

    wp_footer();
?>
</body>
</html>

While creating configuration options for a custom WordPress theme I’ve had a few hiccups, all of which were cured by debug.log, a nice text file that tells me where the internet gnomes are ruining my PHP. WordPress Debug goes in the wp-config.php file:

/**
 * For developers: WordPress debugging mode.
 *
 * Change this to true to enable the display of notices during development.
 * It is strongly recommended that plugin and theme developers use WP_DEBUG
 * in their development environments.
 */
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
@ini_set('display_errors', 0);

/* That's all, stop editing! Happy blogging. */

The resulting debug.log file will be just inside your /wp-content directory.

Closing Statements

I found other little tidbits along the way this week, but I found these to be most useful. Feel free to let me know of other ways to do anything listed above. Be sure to check back next week for Weekly Code Roundup – Week 2. Until then, go forth and code!

The post Code Explosion – Week 1 appeared first on John B. Hartley.