by ·Comments Off on Displaying posts by category re-visited

I stumbled across this solution a few months ago as I was playing around with a concept idea in WordPress from wesbos. (List WordPress Posts by Category)  As I’ve started working on my latest project, I needed to re-visit the idea.  The problem was that I also wanted to limit it to posts within a certain time range and use it for a “sidebar”.  I could have spent some time searching for a plugin that would accomplish that, but why bother?  On this project, it would be on one page only, so I could hard-code it in.

Wes uses the standard “query_posts” method of running the loop, because he’s not really changing anything or making any significant queries.  I assume that it would be the same across the board for probably 90% of the folks out there trying it.  The Codex these days suggests that if you’re going to modify the loop (or run a separate loop outside the main loop), you use WP_Query.

So in order to modify Wes’ original example as well as add in my own changes, I pretty much wound up re-writing a lot of the example. Just throw this in whatever DOM element you want (div, aside, etc.)

 

 '" . date('Y-m-d', strtotime('-365 days')) . "'";
	return $where;
	}

        foreach ($cats as $cat) {
         $cat_id= $cat->term_id;
	    echo "
".$cat->name."
    ";
         $query_string = array(
		'post_type'	=> 'post',
		'post_status' => 'publish',
		'cat'		=> $cat_id
		);
					
	add_filter( 'posts_where', 'filter_where' );
	$query = new WP_Query( $query_string );
	remove_filter( 'posts_where', 'filter_where' );
    if ( $query->have_posts()) : while ( $query->have_posts()) : $query->the_post(); ?>
    
  •   
    • 
 
        ";
          endif; } 
          wp_reset_postdata(); ?>

Still needs some cleanup, and I want to move some of that into the core functions of the theme so I’m only calling a function or two. (To be honest, the whole theme at this point lacks a fair amount of structure or sensibility to the code.)

But it’s still a pretty good start.

by ·Comments Off on WordPress Gripes

One of the things that’s been bugging me the last few months as I’ve taken on “real” projects with WordPress has been consistently striving to increase page load speed.  I’ve run the gamut of learning about the caching plugins (and other related tweaks), optimizing images, you name it.  But on the latest project, this one has really taken it out of control.

For the most part, the WordPress ecosystem is great for your “casual blogger” and you can build a pretty powerful site with the many free plugins available.  But, sometimes, you have to go beyond the free sphere and get into premium plugins.  The most popular/well-known is Gravity Forms.  But there’s a lot of others out there too.  Many of them are what’s considered “freemium” – they have a basic plugin for free, but you have to upgrade to get more features.  Which, if it’s a good plugin, it’s money well spent.

But what’s irking me in the last 48 hours has been trying to optimize the site and reduce the number of external scripts and style calls made on the home page.  The home page is the most critical of any site.  If it doesn’t load fast, the “bounce rate” tends to go up.  Which is never good.

All in all, before I started working on getting the optimizations going, I was sending over 70 HTTP requests to load the home page.  That’s a lot.  It also doesn’t help that the server/hosting isn’t mine and it doesn’t have HTTP KeepAlive enabled, but that’s another story.

The main culprits to my script dilemma –

  1. Automattic’s Jetpack
  2. Connections
  3. WP Events Planner
  4. Wysija

Those 4 plugins were loading unneeded scripts on the front page.  The sad thing is, Wysija & WP Events Planner are “freemium” plugins.  I’ve currently paid for WP Events Planner, and once we get the newsletter system fully running, I’ll pay for Wysija as well.  Jetpack is professional in the sense that it’s maintained and released by the Automattic team.  Even Connections follows the freemium model.

Really, what it boils down to is that I’m disappointed that none of these plugins does a conditional loading of the scripts.  They just load them up without regard to the need for them.

  • Wysija – this one is easy enough, as 95% of it is back-end anyways.  It loads jQuery validation JS and CSS.  But it’s only needed for the widget and/or signup page.  Wouldn’t using the new “has_shortcode” or “is_widget_actve” help here?
  • Connections – this one requires a shortcode placed on a page (or post, I think) to display data.  Again, using the “has_shortcode” tag would be appropriate.  At the very least, using a “is_page” or something in the options would be preferable.
  • Jetpack – this one bugs me most of all.  You tell it that you don’t want to display “likes” on the home page.  What does it do?  It still queues up the scripts and CSS, despite the code never being injected into the template!  Add to that the fact that neither of those things want to seem to cache, so it has to reload them on each page view!  Nevermind that if you want to use jetpack for comments, it still loads “postmessage.js” even when comments aren’t open.
  • WP Events Planner – this one’s just ugly.  It loads an unbelievable number of scripts and CSS and is by far, the biggest offender on this one site.  By my count, it loads 20 different CSS or JS files.  Some of it seems could be accomplished with “has_shortcode” type of conditionals.  Others is just a matter of cleaning up/consolidating the CSS into one file.  Minifying the CSS and JS would be nice as well!

I get that the new has_shortcode was just released in 3.6 and some of these folks have bigger fish to fry than using a brand new code within a few weeks of a major core release, but there are plenty of other conditionals you could use!

So, after doing some quick functioning, I’m now down to 45 HTTP requests on load.  It seems to have cut about 10-15% off the load time (my readings are all over the place from a 600ms load time up to a 2.5s load time).  I could cut a couple of my tracking scripts out, which would help as well.  The next thing I’m going to attack though, is “sprite-ing” my images like the buttons for facebook, twitter, etc.  That will shave another 5-6 requests and should take me under 40 requests.  I’m also debating if I just want to universally unload their JS and combine it into JS that I’m already loading, but I’m not sure if I want to go down that road.

Bottom-line – PLEASE plugin authors – in today’s day and age of page load mattering more and more, use more conditional loading in your plugins!  Not all end-users of your plugins might be theme authors/developers!

by ·Comments Off on Another blast from the past…

I was unfortunate to start having errors on my home desktop over the past weekend.  BSOD’s, all that fun stuff. To be fair, the errors have been happening for a few days prior, but I digress.  Eventually, it was to the point where I determined that I’d need to do a re-format of my SSD, and possibly change out my primary data drive.

Once that was done, it was a matter of copying files over from the old data drive to the new one.  But I thought that rather than do a “blanket” copy, I’d take the time and really sort through the stuff on the drive.

Buried in one of the download folders was a site backup I’d done in 2009.  (When I was still on the “full” domain name of the-gatekeeper.net.)  Near as I can remember, this was about when I made the switch from shared web-hosting to running my own VPS.  But what intrigued me was looking into the folder a bit more – it was a WordPress install.  Finding the readme & version files, it was 2.8.4.  Not bad… so I’d probably been on for at least a few months prior, maybe back to 2.7 or even 2.6.

With the release of v3.6 imminent as well as WP’s 10th “anniversary” last month, it’s just one of those things that you kinda say “wow”.  =)

by ·Comments Off on Foundation and WordPress Embeds

I got the chance to do a re-think of Dan & Matt’s basic blog theme for halftonreviews.com, and as per my preference, I’m applying Zurb’s Foundation to handle my responsive duties.  It’s still a work in progress.  But I ran across something that was going to prove to be a pain the arse.

WordPress provides native libraries to automatically embed media from certain sites by just pasting the URL.  So instead of having to go through the old bloated way of finding the entire embed code, WP just wants the url and passes it off to the oEmbed libraries.

It’s pretty neat and straightforward, but if you’ve been working with sharing videos and pictures on the internet for any length of time, you’re used to the old code.  This is a roundabout way of saying that the old way and even the new way (using oEmbed) create headaches when you’re working in a responsive design and re-size the screen (or visit it on your mobile device).  What happens is that the standard “old” way of doing it (with a long and messy code) automatically specifies a fixed width that’s usually BIGGER than a mobile screen.  So you still run into the old problem of having to zoom to see the rest of the content.

Zurb’s response (and I assume several other frameworks as well) is to wrap the media (videos mainly, pictures don’t have this issue, it seems) in a <div class=”flex-video”> (for what it’s worth, it also works with any other selector like p, span, etc..  While that’s not bad… with WP’s native oEmbed, you can easily forget or overlook it.

So the first stop is to find a function that will automatically add the container around the embed.  That was straightforward enough…

[php]
function tgk_embed_filter( $html, $url, $attr ) {
$return = ‘

;’. $html .’

‘;
return $return;
}
add_filter(’embed_oembed_html’, ‘tgk_embed_filter’, 90, 3 );
[/php]

The trouble comes with the fact that it adds that container to *any* embedded media – pictures, twitter statuses, etc.  Which then makes life beyond difficult, because suddenly a twitter embed grows to nearly 60% of the vertical space of the monitor.

So at the present time, my function has expanded to this:

[php]
// Adds class to oEmbed videos so they are resposnive
function tgk_embed_filter( $html, $url, $attr ) {

require_once(get_template_directory() . ‘/inc/domains/effectiveTLDs.inc.php’);
require_once(get_template_directory() . ‘/inc/domains/regDomain.inc.php’);

if ( ‘twitter.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$twitter_return = $html;
return $twitter_return;
}

else if ( ‘instagram.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$instagram_return = $html;
return $instagram_return;
}

else if ( ‘photobucket.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$photobucket_return = $html;
return $photobucket_return;
}

else if ( ‘polldaddy.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$polldaddy_return = $html;
return $polldaddy_return;
}

else if ( ‘scribd.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$scribd_return = $html;
return $scribd_return;
}

else if ( ‘slideshare.net’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$slideshare_return = $html;
return $slideshare_return;
}

else if ( ‘smugmug.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$smugmug_return = $html;
return $smugmug_return;
}

else if ( ‘vimeo.com’ == getRegisteredDomain(parse_url($url, PHP_URL_HOST))){
$vimeo_return = ‘

‘. $html .’

‘;
return $vimeo_return;
}

else

$return = ‘

‘. $html .’

‘;
return $return;
}
add_filter(’embed_oembed_html’, ‘tgk_embed_filter’, 90, 3 );
[/php]

This covers most of the non-video embeds so it uses the default CSS selectors with Zurb or WordPress for styling.  I’m cheating a bit at the moment because I’m having a hell of a time parsing the correct URL information.  I could also shrink this function down to provide just for what I think the Twins might use, and I’ll talk to them about it.  Depending if they just want to keep it to videos from YouTube and Vimeo, I can go back to the original function.

But, my intention is to use a lot of this work as a springboard for my own Foundation framework theme, so I’ll need to do some massive cleanup.  At least get it to the point where I don’t need to load another 200k of libraries just to check the danged domain.

by ·1 Comment

I crave information.  So much, that sometimes it makes my head spin.  And I love expediency.  Over the last couple of years, as I’ve scoured the web for design ideas and instructions, I add plenty of new sites to my RSS reader.  A lot of times, the headlines are enough of an indication that I want to read something or not.  (I assume the same still holds true when reading a newspaper – you don’t read “cover to cover”, but articles that interest you.)  Ocassionally, I’ll find a commentary on some aspect of web design that merits some attention.

It’s interesting, because this article – Custom Web Design or Website Template, somewhat illustrates a concept I was trying to explain earlier this week to a “client”.  He was asking me why I was able to crank out a basic design/prototype for his club’s website so quickly, yet struggling with his own company page.  I’ve developed an “extension” of the article, I suppose, that explains my feelings on when to use a ready-made template/theme package vs. building from the ground up.Continue reading