The Blog
Web Designers vs. Web Developers Infographic
While working in the industry for a few years, I find that stereotypes do exists. Of course they always will exist and yet they aren’t always applicable. But for good fun, I’ll post this here, Enjoy!
Thanks to @shanesnow for his wit and perspective used to create this!
Click for a larger image
Widget Logic and Subpages
After using WordPress for a few months and quickly understanding it’s potential as a simple & easy to use Content Management System (CMS), one thing still confounded me.
What is so great about these widgets?
I could see widgets being quite useful on sites which required small areas of content ‘widgetized’ into the layout of the page, but the main drawback I saw was that widget’s appeared on every page, post and template. Unless some template customization was made to include or exclude the widget area they were a continuous part of the site. The time spent to modify the template structure to include or exclude widgets seemed to null the inherent easy plug n play nature of widgets. Until I discovered Widget Logic.
Quickly my qualms about widget use dissolved and the full power of WordPress widgets was unleashed. Only one question remained… Why isn’t this plugin built into the WordPress Core?
Fig. 1 – The Widget Logic field
Thanks to the friendly folks over at the Themeshaper forums I stumbled upon the powerful and simple Widget Logic. Widget Logic is a simple and easy to use plugin which adds a small field to all WP widgets (fig 1). The widget logic field allows you to specify which pages, posts or templates that you’d like your widget to appear on.
The Widget logic field can accept full PHP and/or WordPress conditional tags both of which need to output a ‘TRUE’ value for the widget to appear. Using some basic PHP operators (&& = And, ||= Or, !=Not) you can create some powerful logic to help your widgets display just where you want them.
Here’s a few common examples..
Testing for Homepage
is_home()
Tests whether or not you’re on the homepage and returns a TRUE value to display the widget only on the homepage.
!is_home()
This displays the widget on all pages EXCEPT the homepage.
Testing for Page and Child pages
Although WordPress doesn’t currently have a ‘test for sub-page’ conditional tag, you can use the following PHP to test and return TRUE for all sub-pages of the specified Parent page. To accomplish this on multiple pages and their corresponding sub-pages see the last example.
global $post; return (is_page('holistic-care') || ($post->post_parent=="12"));
This tests and display the widget on page ‘holistic-care’ and on all sub-pages of holistic care (page ID 12)
Testing for Category Archives & Single posts
is_category('testimonials') && is_single()
This tests and displays the widget on all single posts in the category ‘testimonials’.
Testing for Specific Page and or Posts
is_page('locationhours') || is_single( array( 2, 'chiropractic', 'Chiropractic Therapy' ) )
This displays the widget on page with slug ‘locationhours’ or a single post with ID 2, a post_name of ‘chiropractic’ or a post_title of ‘Chiropractic Therapy’
Testing for Multiple Sub-pages of Multiple Parents
A big thanks to our developer Wiz Kevin for sorting this one out. The code below test’s and return’s TRUE for all sub-pages of Parent pages ID’s 2 & 13.
global $post; $ancestors = get_post_ancestors($post); $show_widgets_for = array(2, 13); $show_widgets = FALSE; foreach ($show_widgets_for as $child) { if (in_array($child, $ancestors)) { $show_widgets = TRUE; break; } } return $show_widgets;
The host of options available with WordPress’ Conditional tags can be referenced at the WP Codex. I hope this has been a handy post for the budding WordPress professional.
Why jQuery won’t fire in IE7
JQuery is a Javascript library which has grown to have a huge following among web designer’s and developer’s. The main advantage to using a Javascript library like jQuery is that you don’t have to be a Javascript wizard to implement, powerful Javascript techniques into your web projects. But for those (like me) without a big background in Javascript it can be a fun learning experience to get some seemingly simple jQuery running.
After implementing a jQuery carousel developed by Jan Sorgalla, an example can be seen here I ran into a small issue. The jQuery plugin worked great in all browsers, EVEN IE6! but for some reason in IE7 the script wasn’t firing.
After extensive searching into deeper and deeper pages of Google results I found a small post outlining the problem.
Comma’s kick my butt.
Most jQuery plugins offer customization via different parameters which can affects how the Javascript functions on the page. In this case I was passing the parameters you see below, you can see my error highlighted on line 7.
The Error
jQuery('#mycarousel').jcarousel({
vertical: false,
scroll:1,
initCallback: mycarousel_initCallback,
auto:5,
animation:700,
wrap:'last',
});
Just like CSS selectors, when you use multiple selectors you need to place a comma after each selector which is followed by a subsequent selector. Like so..
Just like CSS
.sf-menu li,
.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu a:focus,
.sf-menu a:active
{
background-color:transparent;
}
But when the final selector, or in the case of jQuery, the final parameter is listed it should not be followed by a comma. CSS breaks immediately when you do this, so it’s not a hard time to troubleshoot. But most modern browser’s and even IE6 handle this error when it’s passed with Javascript. But IE7 doesn’t. It breaks, and when all else is working, it can be hard to track down this issue.
The correct code for the parameters above should read..
The Right Way
jQuery('#mycarousel').jcarousel({
vertical: false,
scroll:1,
initCallback: mycarousel_initCallback,
auto:5,
animation:700,
wrap:'last'
});
I hope this will alleviate some headaches for the jQuery beginner out there. See you next time!
12
Be Social
