Tag Archives: development

Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). This can include web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development. However, among web professionals, “web development” usually refers to the main non-design aspects of building web sites: writing markup and coding.

using wordpress custom pages for service templates

Posted on by

I was reading a discussion elsewhere on a rest service plugin for wordpress. Problem seemed that wordpress kept rerouting all requests to index.php. Most wordpress installs use server modules for url rewriting, where .htaccess contains a rule that checks first if a file exists on the server that matches the request. If it doesn’t, wordpress handles it. Unless you write an extra .htaccess rule to direct requests to the service endpoint, you have to have all endpoint files present under the request name. That’s awkward.

using custom pages

You can solve that by masking your service as a page. WordPress tests if the file exists as ‘single’ (page or post), and if a page exists with that permalink, wordpress generates the page.

I can write custom templates for pages. That template can be any file, so it can also be the main request handler of the REST service.

If I place my request handler in the template directory with a remark

/* Template Name: XMLServices
*/

then wordpress adds it to the custom pages list, that I can use on the backend when I add a new page.

custom content-type headers

Services usually reply with json or xml data, and not with wordpress content pages. I need a custom file header.
black magic

No problem, if I leave get_header(); out of the page template, I can specifiy my own header and use an text/xml content type or vcard text/directory content type.

I made a small example by adding my twitter friends timeline as xml output to the blog menu, by placing a file xmlservices.php in the template directory :

/* Template Name: XMLServices
*/

$x = simplexml_load_file('https://www.juust.org/friends_timeline.xml');
if($x) {

//make the XML-header :
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/xml");

//make some xml :
$xml = "< ?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
$xml .= "";
$xml .= "1";
$xml .= "15";
foreach($x->status as $s) {
	$xml .= "";
	$xml .= "< ![CDATA[".$s->source."]]>";		
	$xml .= "< ![CDATA[".$s->text."]]>";
	//$xml .= "< ![CDATA[".$s->user->screen_name."]]>";				
	$xml .= "< ![CDATA[".$s->user->name."]]>";		
	$xml .= "< ![CDATA[".$s->user->screen_name."]]>";		
	$xml .= "< ![CDATA[".$s->user->followers_count."]]>";		
	$xml .= "";		
}

$xml .= "";
echo $xml;
} else {
//no data, relocate to the blog index or something
}

Then added a page services with xmlservices as template. I can make a whole tree of xml service pages, as long as I use my XMLServices template when I make the page. You can use both http-get-queries and http-post.

Adding a vCard

wordpress custom page You can also add your  vcard, if you work business to business that comes in very handy.

I picked Troy Wolf’s vcard class of the net, made a file vcard.php with vcard as Template Name and put it in the template directory.

/* Template Name: vcard
*/

//include the class file
include('../../../classes/vcard.class.php');
//here we go : add my personal data
$vc = new vcard;
$vc->display_name ='Juust';//....
$vc->download();

I added a empty new page with ‘about’ as parent and vcard as custom template, published it and now anyone can download my vCard straight from the ‘about’ menu.

masked slideshow – jquery & wordpress

Posted on by

I agreed to make a wordpress template for a friends’ site. As extra feature they wanted a slide show in the sidebar with a half transparent mask.

I trolloped around the net a little and this seems the most basic sidebar slideshow :

 
 

I make a new 240×240 image in photoshop and use a radial gradient from transparent to white, making the center of the picture transparent, and export it as ‘mask.png’, 24bit.

In my sidebar_left.php I make three divs, one is the container dia_frame,

the other two are the overlay and the slideshow div.

<div id="dia_frame">
      <div id="dia_show"></div>
       <div id="dia_overlay"></div>
</div>

I give he frame the z-order 90, the mask the z-order 92, the slideshow is z-order 91. That makes sure the overlay is rendered on top of the slideshow.

Both the overlay and show div are relative positioned. 

 

#sidebar_left #dia_frame {
  width: 240px;
  min-height : 240px;
  _height : 240px;
  clear: both;
  z-index: 90;
}

#sidebar_left #dia_frame #dia_show {
	width: 240px;
	min-height: 240px;
	_height: 240px;
	position: relative;
	float: right;
        z-index: 91;
}

#sidebar_left #dia_frame #dia_overlay {
	width: 240px;
	position : relative;
	background: url(images/mask.png) no-repeat; 
  	min-height : 240px;
 	_height : 240px;
	z-index: 92;
}

That sets up the xhtml and css frame in the side bar. Then I go make the slideshow. I grab some graphics of flowers and store them in the themes images folder.

With jQuery in header.php I make an array containing the image urls, and with a timer, cycle the slideshow background graphics :

jQuery(document).ready(function() {
var allImgs = [];
	
	allImgs[0] = "/images/one.png";
	allImgs[1] = "/images/two.png";
	allImgs[2] = "/images/three.png";
	allImgs[3] = "/images/four.png";
	allImgs[4] = "/images/five.png";

    var currentSlide = 0;
 
 	jQuery.mynamespace = {};
	jQuery.mynamespace.counter = currentSlide;
	jQuery.mynamespace.imgs= allImgs; 
 
    function imgRotate() {
	
        jQuery('#dia_show').css('background', 'url(' + jQuery.mynamespace.imgs[jQuery.mynamespace.counter] +  ') no-repeat right');
		jQuery.mynamespace.counter++;
		if(jQuery.mynamespace.counter > 4) { 
			jQuery.mynamespace.counter = 0;
		};
    }
 
    setInterval(imgRotate, 2000);

});

 

That’s the basic setup

IE5 and IE6 dont support PNG transparency, so for these there are a number of workarounds. supersleight by drew mclellan is reprogrammed to work with jQuery, for wordpress that seems the best option.