Slideshow header on Esplanade theme
-
Hi,
I´m a complete noob coding and programing, but I wanted to give it a try and started to make my own website with WordPress.
Using the Esplanade theme, I tried to use Slideshow in the header, but I can´t make it work correctly.
Don´t know where to put the code in the Header.php file!
Help, please!
http://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/
-
Hi,
If you want to place the slideshow right above the theme’s black navigation bar, I think the best place to put the slideshow’s PHP snippet is right above this line in your theme’s ‘header.php’ file: ‘
<nav id="access">
‘The result would be the following:
<?php do_action('slideshow_deploy', 'the ID of your slideshow goes here'); ?> <nav id="access">
Best regards,
StefanThank you, Stefan, but the problem still remains…this is how it shows:
http://imageshack.us/photo/my-images/685/wrongjp.png/This is how I want it to show (just like the images):
http://imageshack.us/photo/my-images/22/rightwayk.png/Probably it has nothing to do with your plug-in, but with the coding of the margins. Still, if you could point me in the right direction, I would appreciate it.
Nonetheless, thank you once again for your help.
You should probably try to find out what elements wrap the header image (in this image: http://imageshack.us/photo/my-images/22/rightwayk.png/), and what id’s and classes affect its style.
You should then wrap the slideshow in those elements.
If I could see the website with the image in the header, I’d probably be able to point you to what elements you should wrap the slideshow in.
Thank you for your patience!
The site: http://www.ptmedical.pt
It is in the configuration that you asked.
Best regards!
In the ‘header.php’ file, look for this line:
<img id="header-image" src="http://www.ptmedical.pt/wp-content/uploads/2013/01/cropped-HEADER1.jpg" alt="ptmedical.pt" width="1082" height="280" />
Then replace it with this:
<div id="header-image" style="width: 1082px; height: 280px"> <?php do_action('slideshow_deploy', 'the ID of your slideshow goes here'); ?> </div>
That code is not present on header.php
Nonetheless, I tryed to replace it where I thought to be the right place, and this was the result.
http://imageshack.us/photo/my-images/210/headerukq.png/
I copy/paste the original code so you could have a better look, If you would!
`<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo(‘charset’); ?>” />
<meta name=”viewport” content=”width=device-width” />
<title><?php wp_title(); ?></title>
<link rel=”profile” href=”http://gmpg.org/xfn/11″ />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<!–[if lt IE 9]>
<script src=”<?php echo get_template_directory_uri(); ?>/scripts/html5.js” type=”text/javascript”></script>
<![endif]–>
<?php wp_head(); ?>
</head><body <?php body_class() ?>>
<div id=”wrapper”>
<header id=”header”>
<<?php esplanade_title_tag( ‘site’ ); ?> id=”site-title”>” rel=”home”><?php bloginfo( ‘name’ ); ?></<?php esplanade_title_tag( ‘site’ ); ?>>
<?php if( ! is_active_sidebar( 1 ) ) : ?>
<<?php esplanade_title_tag( ‘desc’ ); ?> id=”site-description”><?php bloginfo( ‘description’ ); ?></<?php esplanade_title_tag( ‘desc’ ); ?>>
<?php endif; ?>
<?php get_sidebar( ‘header’ ); ?>
<div class=”clear”></div>
<?php if ( ( ” != get_header_image() ) || ( false != get_header_image() ) ) : ?>
” rel=”home”>
<img id=”header-image” src=”<?php header_image(); ?>” alt=”<?php bloginfo( ‘name’ ); ?>” width=”<?php echo get_custom_header()->width; ?>” height=”<?php echo get_custom_header()->height; ?>” />
<?php endif; ?>
<nav id=”access”>
Navigation
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary_nav’ ) ); ?>
<?php get_search_form(); ?>
<div class=”clear”></div>
</nav><!– #access –>
</header><!– #header –>That looks better already.
Although you seem to have placed a call to the slideshow into the code, where you only needed to place the ID of the slideshow. The ID of the slideshow is the number presented in the shortcode and PHP snippet on the slideshow page.
The code actually is present in the file, it’s just encapsulated in PHP code. Some ten lines from the bottom you’ll find ‘
<img id="header-image"
‘, this is the code I mentioned before.You could remove this entire piece of code:
<?php if ( ( '' != get_header_image() ) || ( false != get_header_image() ) ) : ?> " rel="home"> <img id="header-image" src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" /> <?php endif; ?>
And replace it with this:
<div id="header-image" style="width: 1082px; height: 280px"> <?php do_action('slideshow_deploy', 'the ID of your slideshow goes between these apostrophes, not the entire PHP snippet'); ?> </div>
Huummm…something isn´t right. Nothing happen.
This is the code that I used:
<?php get_sidebar( 'header' ); ?> <div class="clear"></div> <?php if ( ( '' != get_header_image() ) || ( false != get_header_image() ) ) : ?> <a <div id="header-image" style="width: 1082px; height: 280px"> <?php do_action('slideshow_deploy', ''74''); ?> </div> </a> <?php endif; ?> <nav id="access"> <a class="nav-toggle" href="#">Navigation</a> <?php wp_nav_menu( array( 'theme_location' => 'primary_nav' ) ); ?> <?php get_search_form(); ?> <div class="clear"></div> </nav><!-- #access --> </header><!-- #header -->
If I erase this code it gives me a sintax error.
<?php if ( ( '' != get_header_image() ) || ( false != get_header_image() ) ) : ?>
IT IS DONE!!!
My mistake, of course!First buck I make with the site it goes directly to YOU.
Best regards!
False Alarm!
Using IE9, it appears 2 boxes on top of each other.
The first is empty and the second has the slideshow.
If I use Firefox, there is no problem, but since half world uses IE9…Now it is done…After many trials and errors!
I feel like a blind man walking on the street…
Thank you for your patience!
That’s great, I’m glad to hear (and see) that! You’re very welcome.
- The topic ‘Slideshow header on Esplanade theme’ is closed to new replies.