Hide user’s “Last Activity” in BuddyPress

Here’s another code snippet!

BuddyPress is a really cool plugin for WordPress that basically turns your website into a social network! Check it out at http://buddypress.org.

I recently had a client that wanted to disable the user “active X seconds ago” feature but I couldn’t find any way to disable in the settings so I just just hid it with some CSS!

A very simple code that will remove the user’s last activity from the members list page and from their profiles without causing any display issues.

As always with any sort of CSS override in WordPress, just make sure that it is placed right before the </head> tag in your header file and especially after the “wp_head” function.

Remove space above SendPress’s submit button

This is a real quick and easy code snippet but I figured I’d throw it up on here anyways.

SendPress is a simple mailing list plugin for WordPress. Read more about it at http://sendpress.com.

SendPress allows you to do a lot of customizing to it’s form except for there’s a margin hard-coded into the submit button that creates a huge gap between it and the rest of the form.

Huge ugly gap!

Huge ugly gap!

So with a little bit of CSS code we can easily make things look a little neater.

Make sure that the CSS file that this is placed in is directly before your </head> tag in your header and definitely after the “wp_head” function.

Much better!

Much better!

Modify Twenty Twelve entry meta layout

The Twenty Twelve theme for WordPress is your basic two column page layout, in fact, it’s the base for the theme I use here! When I first decided to switch to WordPress I was going to make my theme from scratch, but what I was aiming to create was almost exactly what the Twenty Twelve theme was. So rather than reinvent the wheel, I created a child theme based on one that was already made.

A child theme is a way to customize a theme without having to modify it’s files. It’s highly recommended to create a child theme and not modify a theme itself. Read more about child themes here: http://codex.wordpress.org/Child_Themes

One thing that I wanted to change was the way post meta was displayed. It just seemed cluttered.

testpost

The comments link wastes a lot of space.

The template for pretty much all content is located in “content.php”. And when it comes time to display the meta data it calls for the “twentytwelve_entry_meta” function which is a template itself. I didn’t like how the meta template was separated from the content template so I wrote my own entry meta function and placed it in my child theme’s “functions.php”.

This function returns the meta data in an array instead of just printing it so that you can really have full control over how your data is displayed.

Next, we want to copy the original “content.php” into our child theme and modify it. You’re going to want to delete the line that says “<?php twentytwelve_entry_meta(); ?>” and then place this line towards the top of the file, just below the comments:

And then all that’s left to do is put the data the way you want it. For example, I took the comments link from the header and put it down with the rest of the data and cleaned it up. Here’s my meta data layout:

That's a lot better.

That’s a lot better.

Dynamic header images

Here’s a neat way to spice up your website. When choosing a font for your website, you have a pretty limited list to choose from because in order for users to see that font, it has to be installed on their computer. So to use a different font for your article headers you would have to just create an image to use instead of text. Luckily you can create images with PHP and the GD Library.

First off, we’re going to create our image file using PHP. We’ll call it “img.php”.

This is a pretty simple setup for image processing so I’m not going to go into detail about how it works. But basically $font is the path to your font file obviously and $text is, you guessed it, your text to be printed. It checks to see if there was any text defined by the “t” variable passed through the URL, if not it just prints a “No text entered” message. imagecreatetruecolor creates the image with the given width and height. imagefilledrectangle fills the background with a color, in this case the color is white. imagettftext prints the text, Read about the imagettftext function here.

At this point, if you visit your img.php file in a browser, you should see something like this:

img

You can change the text by defining “t” in the URL like this: “img.php?t=Your+Text+Here”.

Now, you could just use it as is and write <img> tags each time you wanted to use it, but we’re going to take it a step further. Let’s have some Javascript automatically convert the text in certain elements on the page to images.

Put this right before your closing body tag (</body>). It will change the contents of any element with the class name “header” to an image with that text using our img.php file!

So if we write this:

We get this without our javascript:

headerexample1

And we get this with the javascript:

headerexample2

Neat huh?

Move and resize fancyBox’s buttons

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

-http://fancyapps.com/fancybox

fancyBox is a neat way to display image galleries and pretty much any sort of content in a “lightbox” dialog. One thing I’ve come across though is that the “next” and “previous” buttons can get in the way, especially if the content you’re trying to display is something that needs to be clicked such as a link or an input form.

I'm not trying to click that!

I’m not trying to click that!

Some simple CSS code can fix this for us!

You can put this code in between your page’s <head> tags or in your page’s stylesheet file. Either way, make sure that it is AFTER fancyBox’s css file “jquery.fancybox.css”.

The red box's represent the "next" and "previous" clickable area without our CSS code.

The red boxes represent the “next” and “previous” clickable areas without our CSS code.

And here's what it looks like after we're done! (Minus the red boxes of course.)

And here’s what it looks like after we’re done! (Minus the red boxes of course.)

And of course you can play with the numbers as you see fit.