gatekeepeR's Place

Displaying posts by category re-visited

September 26, 2013 by gatekeeper·Comments Off

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.)

<?php

$cats = get_categories();

function filter_where( $where = '' ) {

// posts in the last x days

$where .= " AND post_date > '" . date('Y-m-d', strtotime('-365 days')) . "'";

return $where;

}

foreach ($cats as $cat) {

$cat_id= $cat->term_id;

echo "<h4 class='news-category'>".$cat->name."</h4><ul>";

$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(); ?>

<?php endwhile;

echo "</ul>";

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.

WordPress Gripes

September 5, 2013 by gatekeeper·Comments Off

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 –

Automattic’s Jetpack
Connections
WP Events Planner
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!

Republican Party of High Point

August 27, 2013 by gatekeeper·Comments Off

About:

The Republican Party of High Point (RPofHP) site was an interesting evolution in terms of my involvement. Again, this was precipitated through conversations with Ed & Anna Currie of Exclamations. The genesis of the project was dealing specifically with a series of fundraising events over the coming months, culminating in a large dinner to commemorate Ronald Reagan’s birthday in February. Paul Norcross, Chairman of the High Point Committee was specific in terms of his needs – the ability to register and pay online (while meeting Federal Election Committee reporting requirements) and publicizing the events – through email and social media. The original conversation started with a discussion of creating websites for each event. When I researched what sort of infrastructure RPofHP had in place already, the answer was “very little”. The RPofHP is generally speaking, a new committee, somewhat separate from the Guilford County Republican Party. (High Point technically spans four counties, with the majority residing in Guilford.) While I’m not sure what led to the establishment of a separate committee, the need for an online presence was there.

Without any infrastructure to rely on for these events, I discussed with Paul the need to establish it’s own website with all the bells and whistles, and then use that as a launchpad to promote the events. Rather than “re-create the wheel” each time, we could keep the underlying systems in place and then leverage those.

The site came together very quickly in terms of turn-around. The site was published the first week of August due to the first event on August 22nd. E-mails needed to go out to publicize the event and registrations had to happen as soon as that e-mail was sent. As of this posting (Aug 27, 2013), there are still chunks of content that haven’t been fully completed yet. Event management processes are still being refined, but I have to say that our first event did have it’s successes with the new registration system.

The site features a feed from the National, State, and County websites that will re-post the latest news onto the site. This benefits the RPofHP in that as we build out our content and newsletter procedures, we can include pertinent information from those entities. The centerpiece, of course, is the event management/registration system. There are also registration and volunteer sign up forms, as well as limited integration with social media. The site features a directory listing of elected officials, and for the upcoming 2014 mid-term elections, the intention is to aggregate candidate information and links on the site.

I created the header logos on the site (the elephant is part of the original logo). Additionally, I helped create the e-vite that went out via email for the first event. There are additional print/online graphics designs in process for upcoming events.

Address:

http://www.highpointgop.org

Features:

Home page with news slider
Event management & registration (with secure credit card payment)
Secure donation form
Email/Newsletter integration & management
Directory/biography
RSS import from National, State, and County Republican Committees
Photo Gallery
Mobile-friendly (responsive) design

Greensboro Pony Drive

August 27, 2013 by gatekeeper·Comments Off

About:

The Greensboro Pony Drive site is an event-specific site for the 2014 Pony Drive to celebrate the 50th Birthday of the Ford Mustang. The drive itself starts in Mustang, Oklahoma and will travel both east and west towards the final destinations of Las Vegas and Charlotte. Along the way, Mustang owners will join with the ride to create (what several are hoping) the longest parade of Mustangs. Greensboro is the last stop before rolling into Charlotte, and is a “lunch stop”. The final overnight stop is in Asheville, NC. Given the route, Greensboro is expected to be the staging point for everyone North and East of Charlotte who wants to travel to the 50th Birthday Celebration as part of this drive.

I was asked to take care of this project by Ed Currie, one of the owners of Exclamations Catering, who I’ve worked with for almost 10 years now. The original intent of the project was much grander in terms of scope as there was little direction from the Mustang Club of America regarding these stops. Unfortunately, the project was scaled back due to the release of their requirements. The site features a registration form, integration with Google Maps (for local information), and a sponsors listing. The site is “responsive”, meaning it scales down to mobile screens.

Originally, the site would be able to accept registrations and print out tickets that could be scanned by mobile devices at check-in. These tickets could be paid for online with a credit card. This registration system would have covered entry, lunch order, and a t-shirt order.

In addition to the site, I’ve also done some print materials (the “printable flyer” at the moment). The header logo is my creation.

Address:

http://www.greensboroponydrive.com

Features:

Home page with news slider
Event registration form
Google Maps integration
Customized sponsorship listing with logos
Responsive layout (desktop fixed-width)
Full-width photo background

pix3l.tv

August 27, 2013 by gatekeeper·Comments Off

About:

This was a quick one-page site that one of my gaming friends asked me to create for him. The original concept/coloring was proposed by a mutual friend of ours, and he was initially supposed to take care of the site, but due to his own commitments, asked me to take over the project.

The site is dominated by the large streaming and chat windows for when he streams video game play. The feed is handled through the streaming service twitch.tv. He was able to use my graphics (header logo, “game over”, avatar) within his Twitch user account to handle his “branding”.

Address:

http://pix3l.tv

Features:

Video streaming connection through twitch.tv
Chat window connection through twitch.tv
Fixed-width layout