Summary
This tutorial is part 2 of the WordPress tutorial from last week . We will be using the completed files from last week to integrate into our WordPress Installation. You may download the completed files from last week here. The download link is at the bottom of the page.
Step 1: Modify the header in your theme
The first step in incorporating all of our work from last week will be to make changes to the header.php file in your theme you created last week, YOUR_WORDPRESS_INSTALLATION\wp-content\themes\slideshow2010. First, let's upload slidestyles.css from last week to the aforementioned directory and link it to our header.php file as shown below in red:
<link rel="stylesheet" type="text/css" media="all" href="/" />Next let's add the html for the slideshow. In your header.php find the following line (approximately line 66):
<link rel="stylesheet" type="text/css" media="all" href="//slidestyles.css" />
<div id="site-description"></div> //approximately line 66Remove everything shown in red above. Right after this line of code (~line 66) insert lines 32 through 51 from your wpslideshow.html file. The header.php file will now look like this:
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() && has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="/" width="" height="" alt="" />
<?php endif; ?>
</div><!-- #branding -->
<div id="site-description"></div>
<div style="clear:both;margin:0px:padding:0px;"></div>
<div id="slider-header">
<div id="slide-holder" >
<div id="slide-runner">
<a href="/"><img id="slide-img-1" src="/images2/nature-photo.png" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-2" src="/images2/nature-photo1.png" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-3" src="/images2/nature-photo2.png" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-4" src="/images2/nature-photo3.png" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-5" src="/images2/nature-photo4.png" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-6" src="/images2/nature-photo4.png" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-7" src="/images2/nature-photo6.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
<!--End Slide Controls -->
</div>
<!--End Slider -->
</div></div>
</div><!-- #branding -->
Step 2: Adding the functionality to the Administrator Panel
- Open the file YOUR_WORDPRESS_INSTALLATION\wp-content\themes\slideshow2010\functions.php.
- Add the two lines shown in red to the end of the file. Save and close functions.php
....
printf(
$posted_in,
get_the_category_list( ', ' ),
$tag_list,
get_permalink(),
the_title_attribute( 'echo=0' )
);
}
endif;
include (TEMPLATEPATH . '/options/slideshow_settings.php');
include (TEMPLATEPATH . '/slideshow_defaults.php');
- Create a directory in this same directory (YOUR_WORDPRESS_INSTALLATION\wp-content\themes\slideshow2010) called images2. Copy all the images from your ..slideshow\work\images2 directory from last week to your newly created images2 directory. The photo images will be our "default" images for the slideshow. Make sure you have also copied nav-bg.png, slide-nav.png, and slide-bg.png to your images2 directory. These aforementioned images were from the the original slide-show download and they are required to create the navigation buttons and slideshow frame.
- Create another directory called options: YOUR_WORDPRESS_INSTALLATION\wp-content\themes\slideshow2010\options
- Inside the options directory create a file called slidehow_settings.php. Copy the code below into slideshow_settings.php
<?php
// creating slideshow Custom Menu
add_action('admin_menu', 'slideshow_create_menu');
add_action('init', 'jquery_init');
function slideshow_create_menu() {
add_menu_page('Slide Settings', 'Slide Settings', 'administrator', "ss", 'ss_settings_html');
add_action('admin_init', 'register_mysettings');
}
function register_mysettings() {
register_setting('slideshow-settings', 'slide_images');
register_setting('slideshow-settings', 'slide_titles');
register_setting('slideshow-settings', 'slide_descriptions'); }
// Footer scripts
function jquery_init() {
if (!is_admin()) {
//load scripts for non admin pages
wp_deregister_script('jquery');//deregister current jquery
//load jquery from google api, and place in footer
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js', false, '1.4', false);
wp_enqueue_script('jquery');
// load a additional js files
wp_enqueue_script('scripts', get_bloginfo('template_url')."/js/scripts.js", array('jquery'), '1.0', true);
} //end if
}
function ss_settings_html(){
include (TEMPLATEPATH . '/slideshow_defaults.php'); ?>
<div class="wrap">
<h2>Slideshow Images</h2>
<p> Note: The slide show is limited to 7 total images. The slide show must also have a total of 7 images </p>
<form method="post" action="options.php">
<table class="form-table">
<tr valign="top">
<th scope="row"> <label for="blogname">Slide Images</label> </th>
<td> <textarea name="slide_images" rows="11" cols="50" class="large-text"></textarea> </td>
</tr>
<tr valign="top">
<th scope="row"> <label for="blogname">Slide Titles-Separate each title with a comma.</label> </th>
<td> <textarea name="slide_titles" rows="11" cols="50" class="large-text"> </textarea> </td>
</tr>
<tr valign="top">
<th scope="row"> <label for="blogname">Slide Descriptions- Separate Each description with a forward slash /.</label> </th>
<td> <textarea name="slide_descriptions" rows="11" cols="50" class="large-text"></textarea> </td>
</tr>
<tr valign="top">
<th scope="row"> <input type="submit" class="button-primary" value="" /> </th> </tr> </table>
</form> </div> <?php } ?>
- Create another directory called js : YOUR_WORDPRESS_INSTALLATION\wp-content\themes\slideshow2010\js. Copy all the scripts (ie6.js, scripts.js, jquery.js) from last week in your ..slideshow\work\js directory to this js directory .
- Create a file called slideshow_defaults.php in YOUR_WORDPRESS_INSTALLATION\wp-content\themes\slideshow2010\ directory. Copy and paste the following code in the file:
<?php
$ss_slides = '
<a href="/"><img id="slide-img-1" src="/wp-content/themes/slideshow2010/images2/nature-photo.png" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-2" src="/wp-content/themes/slideshow2010/images2/nature-photo1.png" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-3" src="/wp-content/themes/slideshow2010/images2/nature-photo2.png" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-4" src="/wp-content/themes/slideshow2010/images2/nature-photo3.png" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-5" src="/wp-content/themes/slideshow2010/images2/nature-photo4.png" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-6" src="/wp-content/themes/slideshow2010/images2/nature-photo4.png" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-7" src="/wp-content/themes/slideshow2010/images2/nature-photo6.png" class="slide" alt="" /></a>';
$ss_titles = "Photo 1, Photo 2, Photo 3, Photo 4, Photo 5, Photo 6, Photo 7";
$ss_descr = "Photo 1 Desc / Photo 2 Desc / Photo 3 Desc / Photo 4 Desc / Photo 5 Desc/ Photo 6 Desc /Photo 7 Desc";
?>
Step 3: Explanation of Step 2
The quick explanantion of step 2 is that we made WordPress Framework specific calls to add our custom settings to the administrator panel. We also installed default options for our slideshow so images for the slideshow will be loaded on our Web pages when the theme is activated.
Since this is a tutorial, let me explain some of the files and code we added in more detail:
- The functions.php file is a file that is automatically loaded during WordPress initialization. A theme developer simply has to include this file in the theme directory and the code in functions.php will automatically be executed. This file is the file where one can add custom options for their theme. When we specified include.../slideshow_settings.php and include slideshow_defaults.php in functions.php, those statements caused those two files to be parsed/executed also. In the case of the slideshow_defaults.php we were simple creating a variable to hold our default images. These default images are used in slideshow_settings.php
- The file slideshow_settings.php specifies our fields in the administrator panel for specifying our images. The code also adds our options to the WordPress database for later reference. The table below gives an overview of the WordPress methods used in slideshow_settings.php:
Method Description add_action('admin_menu', 'slideshow_create_menu') We are telling WordPress to call "slideshow_create menu" when WordPress creates the WordPress Admin Menu.
Slideshow_create_menu sets up a link to our option page and assigns the link to another function (ss_settings_html) that generates our slideshow options pageadd_action('init', 'jquery_init'); Tells WordPress to add JQuery and our scripts to the footer. Note: We actually did not need to copy JQuery into our JS directory since we are using the Google library for JQuery. register_mysettings Tells WordPress about our slideshow options and the sanitized name to use as an identifier when saving the options to the database. These options are stored in the 'wp_options' table ss_settings_html The ss_settings_html function contains the html for our options page in the admin panel
Note: You can learn more about WordPress functions here
Step 4: Completing the coding for the SlideShow.
The final step to make our slideshow fully functional is to add our SlideShow javascript to the footer of our page. If you remember from last week we added JavaScript in step 6 to initialize and start our slideshow. We will be doing pretty much the same thing except:
- We won't be adding the script tags for JQuery and the slideshow script. We already told WordPress to add these scripts in pour slideshow_setting.php
- We will add some PHP code to use the slides, descriptions, and titles we have saved in our backend administrator panel
Open your YOUR_WORDPRESS_INSTALLATION\wp-content\themes\slideshow2010\footer.php file and add the following code just before the closing body tag:
<script>
<?php
//get titles and descriptions for our slideshow from the database
list($title1, $title2, $title3, $title4, $title5, $title6, $title7) = explode(",", get_option('slide_titles', $ss_titles));
list($desc1, $desc2, $desc3, $desc4, $desc5, $desc6, $desc7) = explode("/", get_option('slide_descriptions', $ss_descr));
?>
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"","desc":""},{"id":"slide-img-2","client":"","desc":""},{"id":"slide-img-3","client":"","desc":""},{"id":"slide-img-4","client":"","desc":""},{"id":"slide-img-5","client":"","desc":""},{"id":"slide-img-6","client":"","desc":""},{"id":"slide-img-7","client":"","desc":""}];
</script></body>
Step 5: Admiring your work
- Log into your WordPress Admin Panel. In the left hand column you should see "Slide Settings". Click on the Slide Settings to open up SlideShow Options page.
- You should see an options page similar to the one below (click to view a larger image):
Here you can add images, descriptions, and titles, just don't forget to hit the "Save" button on the lower left hand corner.
Step 6: An exercise for the reader
If I were going to make this part of a theme for a client I would do the following:
- Change the header to show the default 2010 image if no slides were available. This would require some adjustments to the PHP, HTMl, and CSS for the header
- Have an input area for each image with its title and description.
Note: You can download the completed slide-show theme here. Please read the "Readme.txt" included in the zip file.
