Support » Plugin: WOW Slider » adding wow slider to header

  • Resolved alexhartley13


    Hello, I have a quick question. I have built a wow slider with the software provided and I want it to become the header. I got the php code of the wow slider but unfortunately I don’t have a clue when it comes to CSS. could you show me what to erase and where to put the php code? I have tried a couple things but the plugin ends up doubling (2 sliders) or the hole page’s format gets messy.

    My template is picolight by the way. I have attached a screenshot of the css code I have so you can point what to erase and where to insert the code.

    Screen Shot 2013-04-06 at 5.18.15 AM

    and here is a sample of my site. I’d like that banner on top to become a rotating banner.

    Screen Shot 2013-04-06 at 5.23.57 AM

    Other than that, it is a great plugin.

    Thank you

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author


    Header image in Picolight theme is added by the following code:
    <img id="headerimage" src="<?php header_image(); ?>" alt="" />

    You should paste WOWSlider php code instead of this line.

    Thanks. I replaced the code:

    <body <?php body_class(); ?>>
    <div id=”wrapper”>
    <div id=”header”>
    <h1>“><?php bloginfo(‘name’); ?></h1>
    <p class=”description”><?php bloginfo(‘description’); ?></p>
    <?php wowslider(2); ?>
    <div id=”mainnav”>
    <?php wp_nav_menu(array(‘theme_location’ => ‘primary’)); ?>
    <div id=”main”>

    …but now I see this image….

    Screen Shot 2013-04-08 at 5.17.37 AM

    it is working, the banners are rotating (I need to adjust the picture size, but I can deal with that later) but the problem is that the wowslider is overlapping the title of the website at the top. any suggestion?


    Plugin Author


    You should set the same settings for WOWSlider that were added to header image. Correct code is:

    <div id="wrapper">
    	<div id="header">
    		<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
    		<p class="description"><?php bloginfo('description'); ?></p>
    		<div style="clear:both;"><?php wowslider(4); ?></div>
    		<div id="mainnav">

    Awesome. it worked. Thank you. Now I just need to figure out the size of the image and I am good to go. If I have trouble with that I’ll let you know.

    Thank you for your help.


    Plugin Author


    You’re welcome.

    Hello, and sorry for my english,
    I have the same problem, where i enter the wowslider code?
    this is my header.php

    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’) ?>” media=”screen” />
    <link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
    remove_action(‘wp_head’, ‘wp_generator’);
    if (is_singular() && get_option(‘thread_comments’)) {
    <body <?php body_class(); ?>>

    <div id=”art-main”>

    <?php if(theme_has_layout_part(“header”)) : ?>
    <header class=”art-header<?php echo (theme_get_option(‘theme_header_clickable’) ? ‘ clickable’ : ”); ?>”><?php get_sidebar(‘header’); ?></header>
    <?php endif; ?>

    <div class=”art-sheet clearfix”>
    <div class=”art-layout-wrapper”>
    <div class=”art-content-layout”>
    <div class=”art-content-layout-row”>
    <?php get_sidebar(); ?>
    <div class=”art-layout-cell art-content”>

    my website.

    Thank you for your help.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘adding wow slider to header’ is closed to new replies.