I've bought a HTML theme and I want to make Wordpress manage the content of it.
The problem is that when I put the code from index.html on index.php to make it a valid Wordpress theme, the Revolution Slider Plugin stops working. The images from the slider are displayed on top of each other like if no plugin were installed.
The Revolution Slider plugin files are inside the theme folder, in a folder called "rs-plugin".
This is the header of my header.php:
<!DOCTYPE html>
<!--[if IE 8]><html class="ie ie8"> <![endif]-->
<!--[if IE 9]><html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!-->
<html>
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="pousada, flores do cerrado, pousada flores do cerrado, pousada pirenopolis, pousada pirenópolis, flores pousada, flores do cerrado pirenópolis, pousada flores pirenópolis, aconchego, pousada calma, pousada família, pousada casal, pousada aconchegante, fim de semana casal pirenopolis, fim de semana pirenopolis, pousada ferias pirenopolis, pousada barata pirenopolis" />
<meta name="description" content="Pousada Flores do Cerrado - O bálsamo do conforto e aconchego em Pirenópolis. ">
<meta name="author" content="Ansonika">
<title>Country Holidays - Premium site template for a country accommodation.</title>
<!-- Favicons-->
<link rel="shortcut icon" href="img/favicon.ico" type="<?php bloginfo('template_directory');?>/image/x-icon">
<link rel="apple-touch-icon" type="image/x-icon" href="<?php bloginfo('template_directory');?>/img/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon" type="image/x-icon" sizes="72x72" href="<?php bloginfo('template_directory');?>/img/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon" type="image/x-icon" sizes="114x114" href="<?php bloginfo('template_directory');?>/img/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon" type="image/x-icon" sizes="144x144" href="<?php bloginfo('template_directory');?>/img/apple-touch-icon-144x144-precomposed.png">
<!-- Google web fonts -->
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>
<!-- BASE CSS -->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory');?>/css/style.css" />
<link href="<?php bloginfo('template_directory');?>/css/base.css" rel="stylesheet">
<!-- REVOLUTION SLIDER CSS -->
<link href="<?php bloginfo('template_directory');?>/rs-plugin/css/settings.css" rel="stylesheet">
<link href="<?php bloginfo('template_directory');?>/css/extralayers.css" rel="stylesheet">
<script src="<?php bloginfo('template_directory');?>/rs-plugin/js/jquery.themepunch.enablelog.js"> </script>
<script src="<?php bloginfo('template_directory');?>/rs-plugin/js/jquery.themepunch.revolution.js"> </script>
<script src="<?php bloginfo('template_directory');?>/rs-plugin/js/jquery.themepunch.revolution.min.js"> </script>
<script src="<?php bloginfo('template_directory');?>/rs-plugin/js/jquery.themepunch.tools.min.js"> </script>
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<?php wp_head();?>
</head>
This is the part of the code where the plugin comes and should be working:
<!-- Slider -->
<div class="tp-banner-container">
<div class="tp-banner">
<ul>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Intro Slide">
<!-- MAIN IMAGE -->
<img src="<?php bloginfo('template_directory');?>/img/cafe-1-grande.jpg" alt="slidebg1" data-lazyload="img/slides_bg/slide_1.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption white_heavy_40 customin customout text-center text-uppercase" data-x="center" data-y="center" data-hoffset="0" data-voffset="-20" data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;" data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="1000" data-start="1700" data-easing="Back.easeInOut" data-endspeed="300" style="z-index: 5;max-width: auto; max-height: auto; white-space: nowrap;">Country Holidays pleasure
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption customin tp-resizeme rs-parallaxlevel-0 text-center" data-x="center" data-y="center" data-hoffset="0" data-voffset="15" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="500" data-start="2600" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.05" data-endelementdelay="0.1" style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;">
<div style="color:#ffffff; font-size:16px; text-transform:uppercase;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);">
Rooms / Country activities / Pleasure</div>
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption customin tp-resizeme rs-parallaxlevel-0" data-x="center" data-y="center" data-hoffset="0" data-voffset="70" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="500" data-start="2900" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-linktoslide="next" style="z-index: 12;"><a href='rooms_list.html' class="button_intro">View Rooms</a> <a href='all_activities.html' class=" button_intro outline">Activities</a>
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Intro Slide">
<!-- MAIN IMAGE -->
<img src="<?php bloginfo('template_directory');?>/img/redario-1.jpg" alt="slidebg1" data-lazyload="img/slides_bg/slide_6.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption white_heavy_40 customin customout text-center text-uppercase" data-x="center" data-y="center" data-hoffset="0" data-voffset="-20" data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;" data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="1000" data-start="1700" data-easing="Back.easeInOut" data-endspeed="300" style="z-index: 5; max-width: auto; max-height: auto; white-space: nowrap;">Discover fantastic places
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption customin tp-resizeme rs-parallaxlevel-0 text-center" data-x="center" data-y="center" data-hoffset="0" data-voffset="15" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="500" data-start="2600" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.05" data-endelementdelay="0.1" style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;">
<div style="color:#ffffff; font-size:16px; text-transform:uppercase;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);">
We offer a variety of services and options</div>
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption customin tp-resizeme rs-parallaxlevel-0" data-x="center" data-y="center" data-hoffset="0" data-voffset="70" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="500" data-start="2900" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-linktoslide="next" style="z-index: 12;"><a href='rooms_list.html' class="button_intro">View Rooms</a> <a href='all_activities.html' class=" button_intro outline">Activities</a>
</div>
</li>
<!-- SLIDE -->
<li data-transition="fade" data-slotamount="7" data-masterspeed="500" data-saveperformance="on" data-title="Intro Slide">
<!-- MAIN IMAGE -->
<img src="<?php bloginfo('template_directory');?>/img/lazer-1.jpg" alt="slidebg1" data-lazyload="img/slides_bg/slide_4.jpg" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYER NR. 1 -->
<div class="tp-caption white_heavy_40 customin customout text-center text-uppercase" data-x="center" data-y="center" data-hoffset="0" data-voffset="-20" data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;" data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="1000" data-start="1700" data-easing="Back.easeInOut" data-endspeed="300" style="z-index: 5; max-width: auto; max-height: auto; white-space: nowrap;">Enjoy Countryside Activities
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption customin tp-resizeme rs-parallaxlevel-0 text-center" data-x="center" data-y="center" data-hoffset="0" data-voffset="15" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="500" data-start="2600" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.05" data-endelementdelay="0.1" style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;">
<div style="color:#ffffff; font-size:16px; text-transform:uppercase;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);">
Rooms / Country activities / Pleasure</div>
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption customin tp-resizeme rs-parallaxlevel-0" data-x="center" data-y="center" data-hoffset="0" data-voffset="70" data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="500" data-start="2900" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-linktoslide="next" style="z-index: 12;"><a href='rooms_list.html' class="button_intro">View Rooms</a> <a href='all_activities.html' class=" button_intro outline">Activities</a>
</div>
</li>
</ul>
</div>
<div id="general_decor"></div>
</div>
<!-- End Slider -->
I've been stuck on this for a while. Where am I missing?