Posts Tagged WordPress
Avoid WordPress Trackbacks within your own site
Posted by admin in Web design & development on June 15th, 2010
So you’re doing the right thing and crafting internal links within your site to give the thing meaning and usefulness (or SEO) but WordPress is marking these links with superfluous trackbacks in the comments of the pages/posts your linking to…
There’s plugins to prevent this do this of course – but no need to bother with these as it’s very simple thing to prevent; just stick with best-practice and make any internal links root-relative rather than absolute: ie link to /example-post/ rather than http://example.com/example-post/.
There’s an added advantage in that should you ever change your domain – all your links will stay good.
Rotating Twitter Tweet feed in WordPress
Posted by admin in Web design & development on June 12th, 2010
Again, this is for one my current projects: my mate Phil’s digital DJ tips site…
OK – so there’s loads of plugin’s out there that do this kind of thing but I’m not after anything fancy (or bloated), I’m happy to code this into the theme files with a bit of PHP and well – it’s something slightly new to learn …
Primary requirements:
- We want this thing to use the SimplePie feed parser and cacheing system, as already included with a standard WordPress install. This will copy the latest tweets into WordPress and avoid running-off to bother Twitter every time our WP site gets a visit. This will also make the thing more robust as Twitter does occasionally… fail.
- A raw Twitter feed will include your user name at the beginning of each tweet. This unnecessary when the blog and tweets are from the same person/identity/brand so we’ll need to remove that.
- We need the SimplePie cache to expire fairly regularly – not enough to bust Twitter’s balls with extra requests – but enough to keep the tweets fresh
- We may want to trim the tweets (yes even less than 140 characters!) so they fit on one line without having the set an explicit width or css “overflow:hidden;”. [This is a graphic design call here as I like backgrounds fills to match the variable length of text (inline) rather than be fixed-width with trailing whitespace of block level element - makes each tweet look like the unique thing it is.]
- Once this is done it goes into a simple carousel to rotate through the last x tweets.
The code comes in a couple of pieces:
The main engine: get the twitter feed – pack it up and process it.
I put the following into an include file to keep it all wrapped together for easy access. This code mostly based on the excellent WordPress codex article “Function Reference/fetch feed“. The String replace reference came from the classic tizag PHP guide and the shorten to the nearest whole word came from somewhere else
<?php
// Get RSS Feed(s)
include_once(ABSPATH . WPINC . '/feed.php');
// Get a SimplePie feed object from the specified feed source. CHANGE THE USER ID BELOW!
$rss = fetch_feed('http://twitter.com/statuses/user_timeline/126881491.rss');
if (!is_wp_error( $rss ) ) : // Checks that the object is created correctly
// Figure out how many total items there are, but limit it to 5.
$maxitems = $rss->get_item_quantity(5);
// Build an array of all the items, starting with element 0 (first element).
$rss_items = $rss->get_items(0, $maxitems);
endif;
// shorten string function
function short_str( $str, $len, $cut = true ) {
if ( strlen( $str ) <= $len ) return $str;
return ( $cut ? substr( $str, 0, $len ) : substr( $str, 0, strrpos( substr( $str, 0, $len ), ' ' ) ) ) . '...';
}
?>
<div id="djt-twitter-feed"><!-- djt classes and ID to be replaced by something that is useful to you -->
<ul id="djt-tweets" class="jcarousel-skin">
<?php if ($maxitems == 0) echo '<li>No tweets!</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li class="cfn">
<span><a href='<?php echo $item->get_permalink(); //or hardcode link to Twitter homepage ?>'
title='<?php echo 'Posted '.$item->get_date('j F Y | g:i a'); ?>'>
<?php //get tweets (but remove twitter ID before displaying)
$djt_twitter_tweet = $item->get_title();
$djt_twitter_tweet = str_replace("YourTwitterUsername: ", "", $djt_twitter_tweet) ;
echo short_str( $djt_twitter_tweet , 140, false) //OK - not actually doing any shortening with this line now ;
?></a></span>
</li>
<?php endforeach; ?>
</ul>
</div>
Set the cache expiry in functions.php
// Alter expiry lenght on feeds (set in seconds)
add_filter( 'wp_feed_cache_transient_lifetime', create_function('$a', 'return 480;') );
Finally make it pretty with jCarousel
The idea was to have one tweet visible at a time – scrolling/rotating through the list. Grab your copy of jCarousel (it’s much bigger than jCarousel lite but by the time I’d figured out the trouble with my wp_head() it was time to leave well enough alone. To be revisited when there’s some time to optimize.) I’ll not go into the CSS – that’s there online.
<!-- jCarousel -->
<script type="text/javascript">
function mycarousel_initCallback(carousel) { };
jQuery(document).ready(function() {
jQuery('#djt-tweets').jcarousel({
auto: 8,
wrap: 'last',
vertical: false,
scroll: 1,
animation: 0,
initCallback: mycarousel_initCallback
});
});
</script>
WordPress jQuery conflict solved
Posted by admin in Asides, Web design & development on June 12th, 2010
After several hours of thinking I’m being a idiot (happens occasionally) I discovered that sometimes you’ll need to call
<?php wp_head(); ?>
before any jQuery scripts (or concatenated scripts in my case).
It’s been hours and I couldn’t figure out why none of the Carousel scripts I was trying today wanted to work – while all other scripts and plugins carried on just fine.
And yes – I am calling already trying to prevent jQuery conflicts with
<?php wp_enqueue_script("jquery"); ?>
So if your carousel (or other) scripts don’t want to work – try shaking up your head.
Fancy WordPress loop with main posts and then grid of post in rows
Posted by admin in CMS, Web design & development on June 10th, 2010
Here’s how I managed to get this loop to work for the custom WordPress theme I whacked off for my friend and erstwhile colleague Phil Morse AKA Digital DJ Tips
The challenge I set myself was to get the loop to display posts in two formats: first a certain number of posts with large excerpts and any images via the_content then a grid of 3 rows of mini-posts showing just the title… it may not sound tricky but the devil is in the detail: stepping in and out of the loop to open and close container divs is not widely documented (well not that I could find)…
Couple of catches
- using multiple loop solutions causes the pagination to fail: link to older posts would reload the same content. To get proper pagination you need to stick with one loop.
- I needed to inject some HTML in and around the mini posts to keep formatting and layout controllable:
- need to add a class of “last” on the last item in a row to make use of the full width available with margin right on all except the last element of the row
- each row of x mini-posts had to be wrapped in a div as these mini-posts are of unequal height (a design decision). With uneven heights floating them all within a single div causes the dreaded float-stack-horror.
- As we’re injecting extra HTML markup every x items we also need to be able to close this markup prematurely if we run out of posts before the row is finished. Therefore we need to know the total number of posts in the loop so this thing can close itself early if need be.
In the end I also decided that I wanted the logic to be easily adaptable to allow changes to the number of full excerpt posts and the number of columns in the following rows. Thats easily changed with the variable set at the outset here and by varying the denominator in the integer test bit (simplerer than it sounds).
Cut-n-paste to the chase already…
</span>
<pre><?php
get_header(); ?>
<div id="content">
<?php if (have_posts()) : ?>
<?php
/* Custom loop to show n main posts (title + excerpt) then
finish with remainder as small posts (just title) in markup that allows
columns of unequal mini-posts in rows.
Here one main post then subsequent mini-posts in rows of 3.
Total number per page defined in WP options
*/
$count = 0; //start the counter
$main_posts = 1; //set the number of main posts
?>
<?php // find out how many posts so we can close this thing properly at the last post
$totalposts = sizeof($posts); ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; //increment counter by 1 ?>
<?php $small_posts_count = ($count - $main_posts) ; // calculate the number of small posts ?>
<?php if ($count < ($main_posts + 1)) : // if within the range of main post set above then... ?>
<div <?php post_class('sheet') ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content('Read more') ; ?>
</div>
</div>
<?php else : // if loop is at small_posts start a wrapper div.loop2 for next row of posts ?>
<?php // if (count-1)/3 is an integer then it's first in the row: open the wrapper
if (($small_posts_count - 1) % 3 == 0 ) { echo '<div class="loop2 clearfix">';} ?>
<div class="sheet<?php if ((isset($small_posts_count)) && ($small_posts_count % 3 == 0 )) { echo ' last';} // same logic to add class of last to last item in row of three ?>" id="post-<?php the_ID(); ?>">
<h4><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
</div>
<?php //close the row if multiple of three (using same logic as above) or if it's the last post
if (($count == $totalposts) || ($small_posts_count % 3 == 0 )) { echo '</div><!-- .loop2 -->';} // if is multiple of three ?>
<?php endif; ?>
<?php endwhile; ?>
<?php if (!is_page()) { // get older and/or newer posts links (not for single posts) ?>
<?php include( TEMPLATEPATH . '/tpl.nav.posts.php' ); ?>
<?php ; } ?>
<?php else : ?>
<?php include( TEMPLATEPATH . '/tpl.search.404.php' ); // get 404 error message ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Long/short headings (or title tags) using WordPress Custom Fields
Posted by admin in CMS, Web design & development on May 19th, 2010
Problem: WP titles are too long to fit in your navigation.
Solution:
Make the title short enough to fit in the navigation and then add a Custom Field into your post (in the example bellow it is set as “heading”) then edit your template file to render the longer version (“heading”) on the page.
Example:
In the Loop of your template swap out
<h1><?php the_title(); ?></h1> <?php the_content(); ?>
for:
<h1><?php// If has a custom field of heading ; then use that:
$customField = get_post_custom_values("heading");
if (isset($customField[0])) {
echo $customField[0];
} else {
the_title();
} ; ?></h1>
<?php the_content(); ?>
Hat-tip: Smashing Magazine
How to show just sticky posts in a WordPress template
Posted by admin in Web design & development on May 15th, 2010
Want to just show just your sticky posts in a WordPress template? This guide tells you how (and much more) – but you’re hacking a theme and are stuck when it says “add this code before the loop” – well the loop is the bit that starts if (have_posts()). In the below example – how to when hackingh the soon-to-be-defunct default Kubric theme.
Add the following
< ?php
// this line just get the sticky posts:
query_posts(array('post__in'=>get_option('sticky_posts')));
// The Loop:
if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
Using WordPress.com stats and Google Analytics on a WordPress instal
Posted by admin in Analytics, Web design & development on February 3rd, 2010
Wondering which you should use?
Use both. (As recommended by Mr WordPress himself…)
The WordPress.com Stats WordPress plugin provides all the basic daily dose of stats you need – and all easily accessible from the WordPress Dashboard. Google Analytics gives you that extra oompf when you need it and will of course tie in with any Google advertising you have going on.
