setting up a wp dev environment on a live site

2010-05-07 16:42:04

developing a wordpress site on the domain it eventually will live on has plenty of advantages (and ok, a few obvious disadvantages not covered in this post…). no need to fiddle around in the db looking for hardcoded urls to the development domain name and when it’s time to launch – you don’t need to bother with db export/imports and stuff.

but – how to do this when there’s already an existing site live on this domain? actually it’s accomplished pretty easily.

make a folder on your live site, call it something like “dev”, put this into the index.php file within this folder:

if(isset($_GET["mode"])&&$_GET["mode"]=="dev"){
	setcookie("dev","true", time()+3600*24*7, "/");
	header("Location: /dev");
}else if(isset($_GET["mode"])&&$_GET["mode"]=="live"){
	setcookie("dev", "", time()-1000, "/");
	header("Location: /dev");
}
if(isset($_COOKIE["dev"])){
	echo "DEVELOPMENT MODE IN YOUR BROWSER: ON | SWITCH";
}else{
	echo "DEVELOPMENT MODE IN YOUR BROWSER: OFF | SWITCH";
}

when a user enters /dev on your live site and clicks ON, a cookie will be set. this cookie can then be checked for, and the server can make a decision wether to show the old site or the development site.

next upload wordpress the usual way to the docroot of the site, and install. make sure you don’t overwrite any existing files on the server when uploading.

lastly – let’s make that cookie work for us. open the file wp-blog-header.php, located in the docroot, and replace the contents with this:

if(isset($_COOKIE["dev"])){ # does the user have the dev cookie?
	if ( !isset($wp_did_header) ) {
		$wp_did_header = true;
		require_once( dirname(__FILE__) . '/wp-load.php' );
		wp();
		require_once( ABSPATH . WPINC . '/template-loader.php' );
	}
}else{
	header("Location: currentindex.htm"); # no? then show the current page
}

one word of warning though – do not run wordpress auto update while developing the site this way. doing so will remove the cookie-check in wp-blog-header.php and exposing your development site to the world. should you need to run the automatic update, remember to make the changes to wp-blog-header.php again.

when you’re ready to go live with your shiny new wordpress site – just remove the cookie check from wp-blog-header.php and let the world in. that’s it folks!

/ peder fjällström

php class for ffmpeg

2010-04-03 18:10:16

i’ve had a few projects over the last years where i’ve needed to convert some video file to flv, generate a thumbnail and get the video’s duration. i’ve never really got around to wrapping this into something reusable. but here it is, get it if you need it.

you’ll also need a non-windows server with ffmpeg installed, and if you need compability with any non-standard formats (3gp/mp3/etc) you need to install these as well. i won”t go into detail about how this is done, just google it.

when ffmpeg is correctly installed on your box, use this class like this:

$encoder = new videoencoder();
$thumbnail = $encoder->export_thumb("yourfile.mp4");
$duration = $encoder->get_duration("yourfile.mp4");
$videofile = $encoder->export_video("yourfile.mp4");

ok i know it’s better to use a service for this, like the excellent encoding.com – but hey, this is more fun – and really fast! also, worth noting is that while ffmpeg happily converts your files to flv, it will use the old “spark” codec for flash videos, instead of the newer and slightly better codec “on2″ due to licensing issues. you can however use mp4 files with recent versions of flash player, which ffmpeg can convert to. use mp4 instead if you worry about video quality (which i guess you should…).

download my php class here.

/ peder fjällström

Overlay app

2010-03-30 15:46:41

Selecting an image would in some projects be quicker if you actually could see the image in the context. If you’re making a magazine, a brochure or a web banner, the design could be pretty much set, and you just need the image to go with it.

So, what Overlay does is to show your graphics with transparency. If you have an eps, pdf, or a png you could open it in Overlay and place it for example over your stock image provider, and then quickly browse through images.

Here I got my Pet World Grand Opening banner, for which I need a great pet shot.

You could also use this for say a photography shoot for an ad, when the design already is set. To instantly get to view the images in context could help you to spot mistakes or make small adjustments.

Download the app (mac only).

This is a rough alpha version, take it for what it is. One could easily imagine a few useful features like resizing, outlining the surface, inverting the colors and tabs with different artwork.

/ fredrik mjelle

webhook thingie

2010-03-23 21:17:17

so you want to be able to ping your local computer when something happens on the internet? not a problem, thanks to xmpphp. the flow would be:
your code -> xmpphp -> googletalk -> adium -> growl. neat huh?

some ideas where this may come in handy:
- when a cron script finishes on a server,
- whenever a comment is held for moderation on your blog,
- on successful svn commit or deploy from springloops (or beanstalk?) which uses webhooks. this is how we use it…

to get this working, download the xmpphp files from google code and tweak the example files according to your needs.

this will not work on all webhosts though, and to be honest the only shared hosting i got this working on is dreamhost. any vps will probably do, as long as the firewall is configured correctly (or turned off…).

(UPDATE: through the wonders of twitter i heard about this python project, using google app engine. fyi.)

/ peder fjällström

search for artist from iTunes

2010-03-16 15:57:24

So, say you got this one great track in iTunes, and you want to look for more music from the same artist. Here’s a simple little script that can ease things up a bit.

Download it

This script makes a Amazon search in Firefox for the artist, but as you’re guessing you can make it go to what-ever site you like and search for content. Open the script and replace the url with a new url and save. You can also make it use Safari instead of Firefox.

To install it, place it in your home folder/Library/iTunes/Scripts
If that folder doesn’t exist – make a new one and call it Scripts.
Quit iTunes, restart and an applescript icon should appear in the iTunes menu bar, with your script ready to be clicked on.

/ fredrik mjelle

simple custom type

2010-03-04 11:48:59

there’s a point in every wp project (almost) where i need something more than just posts and pages. like stores with longlat data, albums from an artist in the sidebar, etc. now, there are a couple of plugins that do this, like pods and flutter, but they both have their downsides (pods is complexity+doesn’t play nice with wpml and flutter is just plain evil).

so i decided to hack something together which would fill my needs. this plugin cannot collide with anything in wp core or any plugin. please use as you see fit.

1. install the plugin
2. configure your first custom type in the customtypes folder inside the plugin. i’ve included an example type called storelocator which you should be able to rework into your own needs

3. if you enable “showhelp” inside your customtype, you will be presented all the code you need to get this into your templates

4. start inserting and editing content in your new content type!

now don’t go hog wild with this plugin. the plugin stores all data in a single table outside your wp installation and uses serialization/regexps to store/get the data. this means that if you have 1 million rows it will take a couple of seconds for the site to render your data. but if you have 1 millions rows you should probably concider using pods instead (no, not flutter).
click here to download the plugin (v.1.0)

/ peder fjällström

applying oop to wordpress themes

2010-03-04 08:05:00

first couple of wordpress themes people hack together are unmaintainable pieces of junk, so was mine (to say the least).

the problem usually lies in the custom functions.php file, in which all things evil mostly takes place. the code in this file is generally just sequentially executed crap which, if you’re lucky, won’t collide with any core wp functionality or the badly written plugins you install.

plus – variables from functions.php can’t be accessed in header/sidebar/footer files unless you declare every single one of these functions as global. which is a pain.

luckily the solution as simple as elegant. wrap your custom functionality in classes! for most themes one class is enough. i won’t go into detail about how oop works in php5, there is plenty of stuff written on that subject already. but here’s how to apply it to theme development!

inside your functions.php, create a new class:

class YourTheme{
	public function __construct(){
		$this->some_variable_youll_need_throughout_the_theme = "random string, could be an array or anything else";
	}
	public function get_some_var(){
		echo $this->some_variable_youll_need_throughout_the_theme;
	}
}
$YourTheme = new YourTheme;

now, inside any theme file you can access this class by adding this to the top of the file:

global $YourTheme;

then, access all methods and variables this way:

$YourTheme->get_some_var();

You can also set variables really simple, just the way you would expect:

$YourTheme->another_var = "h3ll0 w0r1d";

and retrieve it in another theme file:

echo $YourTheme->another_var;

that’s how simple it is. have fun.

/ peder fjällström

music hack day

2010-02-04 07:48:36

so, we (@fjallstrom + @mjelle) went to #musichackday stockholm and hacked stuff.
the idea came up during lunch on friday, and by sunday at 14.01 we had
a working(well…) site ready.
http://tunemyfeed.com

read more about this hack and what others did at:
http://stockholm.musichackday.org/index.php?page=Tune+My+Feed

technologies we used:
php
codeigniter
facebook connect api
google language detector api
google translate api
yql / yahoo term extractor api
last.fm api
spotify metadata api
jquery

known bugs:
the fancy ajax stuff leaks memory like your mother. wontfix – it’s a hack.

made some decent contacts and had massive fun. now – wash up and sleep.
huge thanks to henrik, mattias and dave (and the sponsors) for putting
the hack day together.

/ peder fjällström

battleships – with real ships!

2009-11-27 10:54:42

someone on twitter passed on a link to a site where one could track 11000 ships, live on a map. excited about the vast chunk of scrapable data i started chatting to my buddy tnobs about this, and we came up with a fun hack… but who’s got time to hack stuff for fun? well, i got way too excited and started right away. at the end of play the same day – this battleship inspired game was live.

Skärmavbild 2009-11-29 kl. 12.04.56

the idea is pretty simple – select weapon and click anywhere on the world map. if you’re lucky you’ll hit a ship. much like the old battleship board game, with two exceptions. it’s based on real data – the ships are real ships, on the seven seas of the world. and this “game” lack all the drama of a real game… try it here!

well, i can’t see that i’ll be hacking away any further on this project, it was a fun proof of concept and i learnt a little. if you get any great ideas on how to hack this into something usable, email me.

/ peder fjällström