Build Your Own Business Website header image

How to incorporate traditional HTML, CSS & Javascript elements in a Thesis Page

One of our Members asked if there were a way to incorporated traditional HTML, CSS & Javascript elements into a Thesis based post or page. Because WordPress and Thesis are built using PHP, HTML, CSS and Javascript any of these elements can be added to a Thesis page or post.

In this tutorial I will demonstrate how to take a slide show that was created in Dreamweaver for a static HTML site and incorporate it into a page. The example comes to us courtesy of Brian Tozer whom some of you may know as kiwibrian on the forums.

You can see this slideshow in action on http://forumdemos2.byobwebsite.com/slide-show/. This slide show was created in Dreamweaver using the Project 7 Components plugins. It does have it’s own file structure as well as javascript and CSS. Our task is to reconfigure this to allow it to be used within a Thesis page.

There are 7 steps in incorporating traditional HTML structures within a Thesis Page:

  1. Copy the files & folders to the wp-content directory.
  2. Create a css file that contains all of the inline css that is included in the head section of the index.htm
  3. Create a page that this slide show will be added to
  4. Create a custom function that contains the content within the body tag of index.htm from the opening table tag to the closing table tag. Start that function with a conditional statement that checks for the page you want this located on.
  5. Change the urls that point to the images in that file from relative to full urls. In other words start the url with “http://www….”
  6. Create a custom function that adds your new style sheet and the javascript file to the head section of the page.
  7. Hook both custom functions to the appropriate location on that page.

Copy the files & folders to the wp-content directory

Dreamweaver created a file structure for this slide show for inclusion into the site.  The file structure consists of directories that hold javascript, css files, full size images and thumbnail images.  Thus we need to copy this file structure somewhere on our site.  Since I synchronize my files between my website and my local machine and since this synchronization starts at /wp-content, that’s where I’ll put it.  You can put it anywhere but it’s safe to put it in wp-content.  My file structure now looks like:

  • forumdemos2.byobwebsite.com/wp-content/
    • plugins/
    • themes/
    • P7-IGM-2-pane-Demo/
      • p7gs/
        • images/
      • p7hg_img_1/
        • fullsize/
        • thumbs/

Here is the original HTML page that contained the CSS, javascript call and the html for the slide show.  We won’t actually use this file but we will use the majority of the content while creating our new Thesis page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Demo</title>
<style type="text/css">
<!--
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	color: #333333;
	background-color: #8FB2CA;
	margin: 0px;
	padding: 0px;
}

#sidebar {
	width: 160px;
	padding: 12px;
	border: 1px solid #333;
	vertical-align: top;
	font-size: .7em;
}
#sidebar p {
	margin: 0 0 12px 0;
}
h2 {
	margin: 16px 0 0 0;
	font-size: 1.25em;
}
#maincontent {
	padding: 0px;
	border: 1px solid #333;
	vertical-align: top;
	background-color: #333333;
}

.title1 {
	font-size: 34px;
	line-height: 20px;
	font-weight: bold;
	color: #16B700;
	padding: 15px;
}

.footer {
	font-size: .7em
	;
}
-->
</style>
<style type="text/css" media="screen">
<!--
#p7GS {
	font-family: Arial, Helvetica, sans-serif;
}
#p7GSvpW3 {
	margin: 0 auto;
	background-color: #FFFFFF;	/* Container for main thumbnail area */
	border: 0;
}
#p7GSvp {
	margin:0 auto;
	background-color:#FFFFFF;	/* Main thumbnail area */
	position:relative;
}
#p7GSsc {
	position:relative;
	margin:0;
}
/* ------------ Hide Description --------------------- */
#p7GSsc div {display: none;}

/* ------------ Thumbnail Lists --------------------- */
#p7GSsc ul {
	margin:0;
	padding:0;
	position:relative;
}
#p7GSsc li{
	margin:0;
	padding:0; /* do not use padding or margin on li, use margin and padding on img */
	list-style-type: none;
	display:inline;
}
#p7GSsc img {
	padding: 2px;
	border: 1px solid #333333;
	background-color: #FFFFFF;	/* Thumbnail margin */
	opacity: .65;
	filter: alpha(opacity=65);
	margin: 6px 6px;
}

/* ------ Thumbnail Hover and Down Classes ------------------------------- */

#p7GSsc .p7GSover {
	border-color: #000000;
	opacity: 1;
	filter: alpha(opacity=100);
	background-color: #FFFFFF;	/* Margin of hovered thumbnail */
}
#p7GSsc .p7GSon {
	opacity: 1;
	filter: alpha(opacity=100);
	background-color: #333333;	/* Margin of hovered thumbnail */
	border-color: #333333;
}

/* ------------ Thumbnail Nav Styles ------------ */
#p7GSnv {
	margin: 0;
	padding: .25em 0;
	font-size: 1em;
	background-color: #FFFFFF;	/* Image Set select bar */
	border: 1px solid #FFFFFF;
	color: #333333;
	text-align: left;
}
#p7GSnvtitle {
	margin: 0 10px 0 0;
	display: block!important;
	color: #333333;				/* ??? */
}
#p7GSnv span {
	display: none;
}
#p7GSnv h2 {
	margin: 0;
	font-size: 1.5em;
	color: #FFFFFF;
	text-transform: capitalize;
	letter-spacing: normal;
}
#p7GSnv a {
	padding: 0 .5em;
	color: #333333;					/* ??? */
	font-weight: normal;
	background-color: #FFFFFF;	/* ??? */
	text-decoration: none;
	border: 1px solid #333333;		/* Image Set selected thumbnail in right pane */
}

#p7GSnv a:visited {
	color: #333333;
	background-color: #FFFFFF;	/* Unselected Image Select thumbnails in right column */
}
#p7GSnv a:hover,
#p7GSnv a:active,
#p7GSnv a:focus {
	border-color: #333333;
	color: #FFFFFF;
	background-color: #FF0000;	/* Hovered Image Select thumbnail in right column */
}

.p7GSnvon {
	color: #999999!important;
	border-color: #333333!important;
	background-color:#333333!important;	/* Last selected Image Select thumbnail in right column */
	cursor: default;
}

/* ------------FULLSIZE IMAGE DIV---------------- */
/* WRAPPER */
#p7GSfs {
	/* border: 1px solid red; */
	margin: 0 0 12px 0;
	display: none;
	border-top: 1px solid #333;	/* Top of main pane */
}
/* FullSize Row Construct */
.p7GSfst {
	width: 1px;
	margin: 0 auto;
}
/* ------------FULLSIZE IMAGE DIV---------------- */
/*IMAGE ROW*/
.p7GSfsi {
	background-color:#FFFFFF;	/* Margin around main image */
	padding: 6px;
	border: 0;
}
/* IMAGE */
.p7GSfsi img {
	padding: 0px;
	border: 1px solid #000000;		/* Border around main image */
}

/* -------------------------- IMAGE CAPTION ---------------- */
/* CAPTION ROW */
.p7GSfsc {
	color: #333333;
	background-color: #FFFFFF;	/* Caption below main image */
}
.p7GSfsc p{
	font-size:0.75em;
	font-weight: bold;
	padding: 12px;
}

/* ------------------------- IMAGE DESCRIPTION ------------- */
/* DESCRIPTION ROW */
.p7GSfsd {
	padding: 0;
	font-size: .9em;
}
.p7GSfsd div {
	margin: 0px;
	padding: 12px;
	color: #CCCCCC;
}
.p7GSfsd p{
	margin: 0px;
}

/* ------------- progress bar div ----------------- */
#p7GSpb {
	position:absolute;
	visibility:hidden;
}
/* ------------- placeholder div for loading image ---------- */
#p7GSah {
	position:absolute;
	left:0px;
	top:0px;
	visibility:hidden;
	z-index: 1000;
}

/*COUNTER*/
.p7GScounter {
	letter-spacing: normal;
	font-weight: normal;
	text-transform: lowercase;
}

.p7GSfsd a, .p7GSfsd a:visited {
	color: #CCCCCC;
	background-color: #444444;
	padding: 2px 6px;
	border: 1px solid #666666;
	font-size: .75em;
	text-decoration: none;
}
.p7GSfsd a:hover {
	color: #FFFFFF;
	border-color: #FFFFFF;
}
-->
</style>
<script type="text/javascript" src="p7gs/p7gsscripts.js"></script>
</head>

<body onLoad="P7_HGSinit(1,29,2,1,1,1,0,1)">
<table style="text-align:left; width: 100%; background-color: #3B75A3;" cellspacing="0" cellpadding="50" border="0">
  <tr>
    <td  class="title1">Demo Gallery Page</td>
  </tr>
  </table>
<table width="100%" border="0" cellpadding="0" cellspacing="3">
<tr>
<td id="maincontent">
<div id="p7GS">
<div id="p7GSvpW3">
<div id="p7GSvp">
<div id="p7GSsc">
<ul>
<li><a href="p7hg_img_1/fullsize/se01_fs.jpg"><img src="p7hg_img_1/thumbs/se01_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
<li><a href="p7hg_img_1/fullsize/se02_fs.jpg"><img src="p7hg_img_1/thumbs/se02_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
<li><a href="p7hg_img_1/fullsize/se03_fs.jpg"><img src="p7hg_img_1/thumbs/se03_tmb.jpg" alt="Figi 2006: Image" title="" width="41" height="60"></a></li>
<li><a href="p7hg_img_1/fullsize/se04_fs.jpg"><img src="p7hg_img_1/thumbs/se04_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
<li><a href="p7hg_img_1/fullsize/se05_fs.jpg"><img src="p7hg_img_1/thumbs/se05_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
<li><a href="p7hg_img_1/fullsize/se06_fs.jpg"><img src="p7hg_img_1/thumbs/se06_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
<li><a href="p7hg_img_1/fullsize/se07_fs.jpg"><img src="p7hg_img_1/thumbs/se07_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
</ul>
<ul>
<li><a href="p7hg_img_1/fullsize/se08_fs.jpg"><img src="p7hg_img_1/thumbs/se08_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
<li><a href="p7hg_img_1/fullsize/se09_fs.jpg"><img src="p7hg_img_1/thumbs/se09_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
<li><a href="p7hg_img_1/fullsize/se10_fs.jpg"><img src="p7hg_img_1/thumbs/se10_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
<li><a href="p7hg_img_1/fullsize/se11_fs.jpg"><img src="p7hg_img_1/thumbs/se11_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
<li><a href="p7hg_img_1/fullsize/se12_fs.jpg"><img src="p7hg_img_1/thumbs/se12_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
<li><a href="p7hg_img_1/fullsize/se13_fs.jpg"><img src="p7hg_img_1/thumbs/se13_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
<li><a href="p7hg_img_1/fullsize/se14_fs.jpg"><img src="p7hg_img_1/thumbs/se14_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
</ul>
<ul>
<li><a href="p7hg_img_1/fullsize/se15_fs.jpg"><img src="p7hg_img_1/thumbs/se15_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
<li><a href="p7hg_img_1/fullsize/se16_fs.jpg"><img src="p7hg_img_1/thumbs/se16_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
<li><a href="p7hg_img_1/fullsize/se17_fs.jpg"><img src="p7hg_img_1/thumbs/se17_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="43"></a></li>
<li><a href="p7hg_img_1/fullsize/se18_fs.jpg"><img src="p7hg_img_1/thumbs/se18_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="42"></a></li>
<li><a href="p7hg_img_1/fullsize/se19_fs.jpg"><img src="p7hg_img_1/thumbs/se19_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
<li><a href="p7hg_img_1/fullsize/se20_fs.jpg"><img src="p7hg_img_1/thumbs/se20_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
<li><a href="p7hg_img_1/fullsize/ins_01_fs.jpg"><img src="p7hg_img_1/thumbs/ins_01_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
</ul>
<ul>
<li><a href="p7hg_img_1/fullsize/ins_02_fs.jpg"><img src="p7hg_img_1/thumbs/ins_02_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
<li><a href="p7hg_img_1/fullsize/ins_03_fs.jpg"><img src="p7hg_img_1/thumbs/ins_03_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
<li><a href="p7hg_img_1/fullsize/ins_04_fs.jpg"><img src="p7hg_img_1/thumbs/ins_04_tmb.jpg" alt="Figi 2006: Image" title="" width="40" height="60"></a></li>
<li><a href="p7hg_img_1/fullsize/ins_05_fs.jpg"><img src="p7hg_img_1/thumbs/ins_05_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
<li><a href="p7hg_img_1/fullsize/ins_06_fs.jpg"><img src="p7hg_img_1/thumbs/ins_06_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="48"></a></li>
<li><a href="p7hg_img_1/fullsize/ins_07_fs.jpg"><img src="p7hg_img_1/thumbs/ins_07_tmb.jpg" alt="Figi 2006: Paper Moth" title="" width="60" height="45"></a>
<div>Image of the month</div>
</li>
<li><a href="p7hg_img_1/fullsize/ins_08_fs.jpg"><img src="p7hg_img_1/thumbs/ins_08_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
</ul>
<ul>
<li><a href="p7hg_img_1/fullsize/ins_09_fs.jpg"><img src="p7hg_img_1/thumbs/ins_09_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
<li><a href="p7hg_img_1/fullsize/ins_10_fs.jpg"><img src="p7hg_img_1/thumbs/ins_10_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
<li><a href="p7hg_img_1/fullsize/ins_11_fs.jpg"><img src="p7hg_img_1/thumbs/ins_11_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
<li><a href="p7hg_img_1/fullsize/ins_12_fs.jpg"><img src="p7hg_img_1/thumbs/ins_12_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
<li><a href="p7hg_img_1/fullsize/ins_13_fs.jpg"><img src="p7hg_img_1/thumbs/ins_13_tmb.jpg" alt="Figi 2006: Image" title="" width="40" height="60"></a></li>
<li><a href="p7hg_img_1/fullsize/ins_14_fs.jpg"><img src="p7hg_img_1/thumbs/ins_14_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
<li><a href="p7hg_img_1/fullsize/ins_15_fs.jpg"><img src="p7hg_img_1/thumbs/ins_15_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
</ul>
</div>
</div>
</div>
<div id="p7GSfs"></div>
<div id="p7GSpb"><img src="p7gs/images/prog-bar.gif" alt="Now Loading" width="125" height="22"></div>
<div id="p7GSah"></div>
<!--[if IE 5]><style>#p7GSvp,#p7GSfsc,#p7GSfsd{text-align:left;}#p7GSnv a{height:1em;width:1em;}</style><![endif]-->
<!--[if lte IE 6]><style>#p7GS{height:1%;}</style><![endif]-->
</div>
</td>
<td id="sidebar"><p><strong>Choose an Image set: </strong></p>
<div id="p7GSnv"></div>
<h2>image du jour </h2>
<p>A re-engineering of your current world view will reaffirm your online presence enabling a more effervescent solution. Upscaling voluminous networking exchange solutions will result in your achieving an excellent systemic electronic data interchange synchronization, thereby exploiting technical environments for mission critical broad-based capacity-constrained systems. This will fundamentally cause a morphing into a well designed and actionable information infrastructure whose semantic content is downright null.</p></td>
</tr>
</table>
<p class="footer">Footer Information</p>
</body>
</html>
 

Create a CSS file that contains all of the CSS contained in the <head> section of the original web page

When the slide show was created it included a bunch of page specific CSS in the head section of the web page.  We will copy that and create a new file called p7gs_customized.css.  The reason for that name is that Dreamweaver created a CSS file called p7gs_base.css, the new file can be distinguished from the old file this way.  The javascript will actually be using both CSS files.  To create our file we will take every thing from line 27 to line 59 from the file above and from line 64 to line 258 and place that in the new file we have created.  We will save this file in the p7gs directory.  You can see the end result below:

 /*
  -----------------------------------
  Gallery Magic Style Sheet
  by Project Seven Development - customized by Brian Tozer
  This file is derived from the Head css that was in the index.htm file created by dreamweaver.
  www.projectseven.com
  Gallery Type: Horizontal
  Insert-Mode CSS
  -----------------------------------
*/

#sidebar {
	width: 160px;
	padding: 12px;
	border: 1px solid #333;
	vertical-align: top;
	font-size: .7em;
}
#sidebar p {
	margin: 0 0 12px 0;
}
h2 {
	margin: 16px 0 0 0;
	font-size: 1.25em;
}
#maincontent {
	padding: 0px;
	border: 1px solid #333;
	vertical-align: top;
	background-color: #333333;
}

.title1 {
	font-size: 34px;
	line-height: 20px;
	font-weight: bold;
	color: #16B700;
	padding: 15px;
}

.footer {
	font-size: .7em
	;
}

#p7GS {
	font-family: Arial, Helvetica, sans-serif;
}
#p7GSvpW3 {
	margin: 0 auto;
	background-color: #FFFFFF;	/* Container for main thumbnail area */
	border: 0;
}
#p7GSvp {
	margin:0 auto;
	background-color:#FFFFFF;	/* Main thumbnail area */
	position:relative;
}
#p7GSsc {
	position:relative;
	margin:0;
}
/* ------------ Hide Description --------------------- */
#p7GSsc div {display: none;}

/* ------------ Thumbnail Lists --------------------- */
#p7GSsc ul {
	margin:0;
	padding:0;
	position:relative;
}
#p7GSsc li{
	margin:0;
	padding:0; /* do not use padding or margin on li, use margin and padding on img */
	list-style-type: none;
	display:inline;
}
#p7GSsc img {
	padding: 2px;
	border: 1px solid #333333;
	background-color: #FFFFFF;	/* Thumbnail margin */
	opacity: .65;
	filter: alpha(opacity=65);
	margin: 6px 6px;
}

/* ------ Thumbnail Hover and Down Classes ------------------------------- */

#p7GSsc .p7GSover {
	border-color: #000000;
	opacity: 1;
	filter: alpha(opacity=100);
	background-color: #FFFFFF;	/* Margin of hovered thumbnail */
}
#p7GSsc .p7GSon {
	opacity: 1;
	filter: alpha(opacity=100);
	background-color: #333333;	/* Margin of hovered thumbnail */
	border-color: #333333;
}

/* ------------ Thumbnail Nav Styles ------------ */
#p7GSnv {
	margin: 0;
	padding: .25em 0;
	font-size: 1em;
	background-color: #FFFFFF;	/* Image Set select bar */
	border: 1px solid #FFFFFF;
	color: #333333;
	text-align: left;
}
#p7GSnvtitle {
	margin: 0 10px 0 0;
	display: block!important;
	color: #333333;				/* ??? */
}
#p7GSnv span {
	display: none;
}
#p7GSnv h2 {
	margin: 0;
	font-size: 1.5em;
	color: #FFFFFF;
	text-transform: capitalize;
	letter-spacing: normal;
}
#p7GSnv a {
	padding: 0 .5em;
	color: #333333;					/* ??? */
	font-weight: normal;
	background-color: #FFFFFF;	/* ??? */
	text-decoration: none;
	border: 1px solid #333333;		/* Image Set selected thumbnail in right pane */
}

#p7GSnv a:visited {
	color: #333333;
	background-color: #FFFFFF;	/* Unselected Image Select thumbnails in right column */
}
#p7GSnv a:hover,
#p7GSnv a:active,
#p7GSnv a:focus {
	border-color: #333333;
	color: #FFFFFF;
	background-color: #FF0000;	/* Hovered Image Select thumbnail in right column */
}

.p7GSnvon {
	color: #999999!important;
	border-color: #333333!important;
	background-color:#333333!important;	/* Last selected Image Select thumbnail in right column */
	cursor: default;
}

/* ------------FULLSIZE IMAGE DIV---------------- */
/* WRAPPER */
#p7GSfs {
	/* border: 1px solid red; */
	margin: 0 0 12px 0;
	display: none;
	border-top: 1px solid #333;	/* Top of main pane */
}
/* FullSize Row Construct */
.p7GSfst {
	width: 1px;
	margin: 0 auto;
}
/* ------------FULLSIZE IMAGE DIV---------------- */
/*IMAGE ROW*/
.p7GSfsi {
	background-color:#FFFFFF;	/* Margin around main image */
	padding: 6px;
	border: 0;
}
/* IMAGE */
.p7GSfsi img {
	padding: 0px;
	border: 1px solid #000000;		/* Border around main image */
}

/* -------------------------- IMAGE CAPTION ---------------- */
/* CAPTION ROW */
.p7GSfsc {
	color: #333333;
	background-color: #FFFFFF;	/* Caption below main image */
}
.p7GSfsc p{
	font-size:0.75em;
	font-weight: bold;
	padding: 12px;
}

/* ------------------------- IMAGE DESCRIPTION ------------- */
/* DESCRIPTION ROW */
.p7GSfsd {
	padding: 0;
	font-size: .9em;
}
.p7GSfsd div {
	margin: 0px;
	padding: 12px;
	color: #CCCCCC;
}
.p7GSfsd p{
	margin: 0px;
}

/* ------------- progress bar div ----------------- */
#p7GSpb {
	position:absolute;
	visibility:hidden;
}
/* ------------- placeholder div for loading image ---------- */
#p7GSah {
	position:absolute;
	left:0px;
	top:0px;
	visibility:hidden;
	z-index: 1000;
}

/*COUNTER*/
.p7GScounter {
	letter-spacing: normal;
	font-weight: normal;
	text-transform: lowercase;
}

.p7GSfsd a, .p7GSfsd a:visited {
	color: #CCCCCC;
	background-color: #444444;
	padding: 2px 6px;
	border: 1px solid #666666;
	font-size: .75em;
	text-decoration: none;
}
.p7GSfsd a:hover {
	color: #FFFFFF;
	border-color: #FFFFFF;
}

Step 3 – Create a page that the slide show will be added to.

In this case I’ve created a page called “Slide Show”. I have used the “no-sidebars” template and I’ve added a little bit of introductory text. Make a note of the page id. In this case the page_id is 15.

Step 4 – Create a custom function that contains the slide show.

This function will do 2 things. First it will determine that the slide show page is being called and if it is then it will display the HTML that calls the slide show. That html code is contained between lines 264 & 339 in the initial code above. The code for the new function is below:

///////////////////////////////////////////////////////////
//This Adds the slideshow to the appropriate page
/////////////////////////////////////////////////////////

function traditional_html_slideshow(){
    if(is_page('slide-show')){

   ?> <table style="text-align:left; width: 100%; background-color: #3B75A3;" cellspacing="0" cellpadding="50" border="0">
      <tr>
        <td  class="title1">Demo Gallery Page</td>
      </tr>
      </table>
        <table width="100%" border="0" cellpadding="0" cellspacing="3">
        <tr>
            <td id="maincontent">
                <div id="p7GS">
                    <div id="p7GSvpW3">
                        <div id="p7GSvp">
                            <div id="p7GSsc">
                                <ul>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se01_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se01_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se02_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se02_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se03_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se03_tmb.jpg" alt="Figi 2006: Image" title="" width="41" height="60"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se04_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se04_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se05_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se05_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se06_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se06_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se07_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se07_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
                                </ul>
                                <ul>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se08_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se08_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se09_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se09_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se10_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se10_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se11_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se11_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se12_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se12_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se13_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se13_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se14_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se14_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
                                </ul>
                                <ul>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se15_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se15_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se16_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se16_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se17_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se17_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="43"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se18_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se18_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="42"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se19_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se19_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/se20_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/se20_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_01_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_01_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
                                </ul>
                                <ul>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_02_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_02_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_03_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_03_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_04_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_04_tmb.jpg" alt="Figi 2006: Image" title="" width="40" height="60"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_05_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_05_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_06_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_06_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="48"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_07_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_07_tmb.jpg" alt="Figi 2006: Paper Moth" title="" width="60" height="45"></a>
                                    <div>Image of the month</div>
                                    </li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_08_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_08_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
                                </ul>
                                <ul>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_09_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_09_tmb.jpg" alt="Figi 2006: Image" title="" width="45" height="60"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_10_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_10_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_11_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_11_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_12_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_12_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_13_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_13_tmb.jpg" alt="Figi 2006: Image" title="" width="40" height="60"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_14_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_14_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="45"></a></li>
                                    <li><a href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/fullsize/ins_15_fs.jpg"><img src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7hg_img_1/thumbs/ins_15_tmb.jpg" alt="Figi 2006: Image" title="" width="60" height="40"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                <div id="p7GSfs"></div>
                <div id="p7GSpb"><img src="p7gs/images/prog-bar.gif" alt="Now Loading" width="125" height="22"></div>
                <div id="p7GSah"></div>
                <!--[if IE 5]><style>#p7GSvp,#p7GSfsc,#p7GSfsd{text-align:left;}#p7GSnv a{height:1em;width:1em;}</style><![endif]-->
                <!--[if lte IE 6]><style>#p7GS{height:1%;}</style><![endif]-->
                </div>
            </td>
            <td id="sidebar"><p><strong>Choose an Image set: </strong></p>
            <div id="p7GSnv"></div>
            <h2>image du jour </h2>
            <p>A re-engineering of your current world view will reaffirm your online presence enabling a more effervescent solution. Upscaling voluminous networking exchange solutions will result in your achieving an excellent systemic electronic data interchange synchronization, thereby exploiting technical environments for mission critical broad-based capacity-constrained systems. This will fundamentally cause a morphing into a well designed and actionable information infrastructure whose semantic content is downright null.</p></td>
        </tr>
        </table> 

Step 5 – Change the URLs from relative to full pointing to the correct folder.

If you look up at the original code you will see that all of the images are located at either p7hg_img_1/fullsize/se01_fs.jpg or p7hg_img_1/thumbs/se01_tmb.jpg. Unfortunately these addresses more than likely won’t resolve correctly so they need to be changed by adding http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/ to the front of each url.

Step 6 – Create the function that adds the CSS & Javascript to the head of the page.

We need to call both our new css file and the javascript that runs the slideshow in the head of the page. In addition, we don’t have access to the tag so we can use the same onLoad command for running the javascript. We start off with the conditional statement that checks for the Slide Show page. Next we add the CSS link and Java Script link and finally we load the actual javascript program. The code is below:

 ///////////////////////////////////////////////////////////
//This Adds the slideshow functionality to the head section
/////////////////////////////////////////////////////////

function traditional_html_slideshow_head(){
    if(is_page('slide-show')){
        ?>
            <link rel="stylesheet" href="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7gs/p7gs_customized.css" type="text/css" media="screen, projection" />
            <script type="text/javascript" src="http://www.forumdemos2.byobwebsite.com/wp-content/P7-IGM-2-pane-Demo/p7gs/p7gsscripts.js"></script>
            <script type="text/javascript">
            function init() {
                P7_HGSinit(1,29,2,1,1,1,0,1);
                }
                window.onload = init;
            </script>
        <?php
    }
}

Notice that we are using the full URL for the css file and the javascript file. The function init() code replaces the body onLoad="P7_HGSinit(1,29,2,1,1,1,0,1)" command from the originial file. This is a more common way of calling javascript in WordPress.

Step 7 – Hook these functions to the appropriate locations.

We need to hook the “head section” function to wp-head and we want the slide show to come after the content box so we use the following hooks:

add_action('wp_head', 'traditional_html_slideshow_head');
add_action('thesis_hook_after_content_box', 'traditional_html_slideshow'); 

And that wraps it up. All it takes is separating the html into pieces that WordPress can use and then addressing those pieces properly in Thesis.

4 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options

Related Posts

4 comments… add one
  • Brian Tozer June 9, 2010, 12:44 am

    A wonderful tutorial Rick. I hope that it proves to be worth the effort in the overall scheme of things.

    • Rick Anderson June 9, 2010, 5:57 am

      I hope that it’s clear enough and that you can repeat it on a future project.

  • Steve Sinclair September 16, 2010, 10:33 pm

    Hi Rick – I use P7 widgets a lot for “traditional” websites. I’m new to Wordpress and recently purchased the Thesis theme. I’ve learned a great deal from your site and the tutorials – thank you very much for taking the time to share your knowledge. I intend using this excellent and helpful tutorial as a guide for using some of the other P7 widgets for inclusion in a Thesis driven site. I’ll post here if any problems encountered and solutions so others can build on your work. Thanks again.

    • Rick Anderson September 17, 2010, 4:43 am

      Steve, I’m glad you found the site to be useful. I’ll be interested in hearing of your experience with other P7 widgets.

Leave a Comment