CODEWITHSUNDEEP
phphtmlcsswordpress
Quang Huy
Quang Huy

Reputation: 59

Convert HTML to PHP Wordpress footer not working

I am currently self learning how to code the website and my static website is now done. Then I am try to convert it into PHP Wordpress but so far, my footer doesn't work like my HTML file. The footer jump into the content of the homepage. It's work fine as HTML. I also have tried to use others online template to convert it into PHP Wordpress to test my conversion and everything seem fine so it is not about my Wordpress config. I am also checked this question but it doesn't solve my problem. I am using HTML 5 Blank theme to convert my HTML. So my problem is my static HTML didn't work when I split it into header.php and footer.php

Here is my workable static header and footer HTML I failed to split it into PHP

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Movie On The Go</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <link href="css/font-awesome.min.css" rel="stylesheet"/>
        <link rel="shortcut icon" type="image/png" href="#"/>
    </head>
    <body>
    <div class="container">
        <header>
            <div class="header-inner">
                <a href="<?php echo home_url(); ?>" id="logo"><img src="img/raging.gif" alt=""></a>
                <a href="<?php echo home_url(); ?>" id="webname"><h1>Movies On The Go</h1></a>
                <nav>
                    <a href="#" id="menu-icon"></a>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="movieslist.html">Movies list</a></li>
                        <li><a href="aboutus.html">About us</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <p>This is the content of the homepage.</p>
        <footer class="credit">
            <p><a href="https://twitter.com/maiphamquanghuy">ImHikaruCat</a></p>
        </footer>
    </div>
    </body>
    </html>

Here is my header.php

<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>

    <link href="//www.google-analytics.com" rel="dns-prefetch">
    <link href="<?php echo get_template_directory_uri(); ?>/img/icons/favicon.ico" rel="shortcut icon">
    <link href="<?php echo get_template_directory_uri(); ?>/img/icons/touch.png" rel="apple-touch-icon-precomposed">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="<?php bloginfo('description'); ?>">

    <?php wp_head(); ?>
    <script>
    // conditionizr.com
    // configure environment tests
    conditionizr.config({
        assets: '<?php echo get_template_directory_uri(); ?>',
        tests: {}
    });
    </script>

</head>
<body <?php body_class(); ?>>
    <div class="container">
    <header>
        <div class="header-inner">
            <a href="<?php echo home_url(); ?>" id="logo"><img src="img/raging.gif" alt=""></a>
            <a href="<?php echo home_url(); ?>" id="webname"><h1>Movies On The Go</h1></a>
            <nav>
                <?php html5blank_nav(); ?>
            </nav>
        </div>
    </header>

My footer.php

            <footer class="credit">
            <p><a href="https://twitter.com/maiphamquanghuy">ImHikaruCat</a></p>
        </footer>
    </div>
    <!-- /wrapper -->

    <?php wp_footer(); ?>

    <!-- analytics -->
    <script>
    (function(f,i,r,e,s,h,l){i['GoogleAnalyticsObject']=s;f[s]=f[s]||function(){
    (f[s].q=f[s].q||[]).push(arguments)},f[s].l=1*new Date();h=i.createElement(r),
    l=i.getElementsByTagName(r)[0];h.async=1;h.src=e;l.parentNode.insertBefore(h,l)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXXXXX-XX', 'yourdomain.com');
    ga('send', 'pageview');
    </script>

</body>

My style.css just in case

@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';

*{
    margin: 0px;
    padding: 0px;
    border: 0px;
}

body{
    background: #F5F5F5;
    color: #67727A;
    font-family:"Alegreya Sans", sans-serif;
    margin: 0px;
}

h2{
    font-size: 250%;
    font-weight: 700;
    text-align: center;
    padding-top: 2%;
    color: #F5F5F5;
    font-family: "Alegreya Sans", sans-serif;
}

h2 a{
    text-decoration: none;
    color: #F5F5F5;
}

h2 a:hover{
    color: #999;
}

h3{
    font-size: 175%;
    line-height: 155%;
    padding: 5% 0;
    font-weight: 400;
    color: #F5F5F5;
}

p{
    font-size: 160%;
    line-height: 150%;
    padding: 3%;
    text-indent: 2%;
    text-align: justify;
    color: #F5F5F5;
}

img{
    max-width:100%;
    height: auto;
    width: auto;
    margin-bottom: -4px;
}
header{
    background-color: #6991AC;
    width: 100%;
    height: 86px;
}

.header-inner{
    max-width: 1200px;
    margin: 0 auto;
}

#logo{
    display: hidden;
    margin: 0px;
    float: left;
    width: 100px;
    height: auto;
}

#webname{
    display: hidden;
    margin: 20px;
    float: left;
    width: 400px;
    height: auto;
    text-decoration: none;
    color: #ffffff;
}

/*---bat dau thanh navigation---*/

nav{
    float: right;
    padding: 25px 20px 0 0;
}

#menu-icon{
    display: hidden;
    width: 40px;
    height: 40px;
    background: url("http://i.imgur.com/sAjpuaw.png") center;
}

a:hover#menu-icon{
    border-radius: 4px 4px 0 0;
}

ul{
    list-style-type: none;
}

nav ul li{
    font-family: "Alegreya Sans", sans-serif;
    font-size: 150%;
    display: inline-block;
    float: left;
    padding: 10px;
}

nav ul li a{
    color: #F5F5F5;
    text-decoration: none;
}

nav ul li a:hover{
    color: #C3D7DF;
}

.current{
    color: #C3D7DF;
}

/*---het thanh navigation---*/

.banner{
    width: 100%;
    background-color: #6991AC;
}

.banner-inner{
    width: 1920px;
    margin: 0 auto;
    text-align: center;
}

.one-fourth{
    width: 25%;
    float: left;
    text-align: center;
}

.one-fourth h3{
    font-family: "Alegreya Sans", sans-serif;
    display: inline-block;
}

.one-fourth h3 a{
    text-decoration: none;
    color: #F5F5F5;
}

.one-fourth h3 a:hover{
    color: #999
}

a{
    text-decoration: none;
}

#movie1{
    background-color: #F1AA90;
}

#movie2{
    background-color: #BEB9AD;
}

#movie3{
    background-color: #AADCD2;
}

#movie4{
    background-color: #A2B2C1;
}

#movie5{
    background-color: #6da53b;
}

#movie6{
    background-color: #9e7621;
}

#movie7{
    background-color: #c14732;
}

#movie8{
    background-color: #315363;
}

/*---phan spotlight---*/
article{
    float: left;
    margin: 0 auto;
    width: 50%;
    height: auto;
}

aside{
    float: right;
    margin: 0 auto;
    width: 50%;
    height: auto;
}

.inner-wrapper{
    float: left;
    width: 100%;
    background-color: #C3D7DF;
}

#Urara{
    background-color: #F1AA90;
}

#Koe{
    background-color: #AADCD2;
}

.inner-wrapper2{
    float: left;
    width: 100%;
    background-color: #C3D7DF;
}

#Hibike{
    background-color: #BEB9AD;
}

#Hinako{
    background-color: #A2B2C1;
}

footer{
    width: 100%;
    border-top: 1px solid #AADCD2;
    background-color: #544B59;
    margin: 0;
}

footer p{
    padding: 5px 0  9px 0;
    text-align: center;
}

footer a{
    text-decoration: none;
    color: #F5F5F5;
}

footer a:hover{
    text-decoration: none;
    color: #7e7782;
}

/*---scaling---*/
@media screen and (max-width: 1000px){
    h2{
        font-size: 150%;
    }
    h3{
        font-size: 125%;
    }
    p{
        font-size: 120%;
    }
    header{
        position: absolute;
    }

    #menu-icon{
        display: inline-block;
    }
    nav ul, nav:active ul{
        display: none;
        z-index: 100;
        position: absolute;
        padding: 20px;
        background: #6991AC;
        right: 20px;
        top: 60px;
        border: 1px solid #ffffff;
        border-radius: 2px 0 2px 2px;
        width: 50%;
    }
    nav:hover ul{
        display: block;
    }
    nav li{
        text-align: center;
        width: 100%;
        padding: 10px 0;
    }
    .banner{
        padding-top: 86px;
    }
    .one-fourth{
        width: 100%;
    }

    article{
        width: 100%;
    }

    aside{
        width: 100%;
    }
}

/*---css cho article---*/

.title{
    width: 100%;
    float: left;
    background-color: #F1AA90;
}

.title h1{
    font-size: 300%;
    font-weight: 900;
    text-align: center;
    color: #F5F5F5;
    padding: 10px 0;
}

.title p{
    text-align: center;
    color: #F5F5F5;
    background-color: #6991AC;
}

.episodelist{
    background-color: #6991AC;
}

.episodelist ul{
    list-style-type: none;
}

.episodelist ul li{
    font-family: "Alegreya Sans", sans-serif;
    font-size: 150%;
    display: inline-block;
    text-align: center;
    width: 7.14%;
    padding: 10px;
    background-color: #6991AC;
}

.episodelist ul li a{
    color: #F5F5F5;
    text-decoration: none;
}

.episodelist ul li a:hover{
    color: #C3D7DF;
}

.bg{
    text-align: center;
    margin: 0 auto;
    background-color: #6991AC;
}

.movieslist{
    background-color: #6991AC;
}

.movieslist ul{
    list-style-type: none;
}

.movieslist ul li{
    font-family: "Alegreya Sans", sans-serif;
    font-size: 150%;
    display: inline-block;
    text-align: center;
    width: 15.5%;
    padding: 10px;
    background-color: #6991AC;
}

.movieslist ul li a{
    color: #F5F5F5;
    text-decoration: none;
}

.movieslist ul li a:hover{
    color: #C3D7DF;
}

@keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

#slider { overflow: hidden; }
#slider figure img { width: 20%; float: left; }
#slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    animation: 40s slidy infinite;
}

Upvotes: 0

Views: 414

Answers (2)

Manpreet
Manpreet

Reputation: 99

In your header.php file you have used the undefined function for nav menus.You can either define the html5blank_nav() in your functions.php or you can use the wordpress wp_nav_menus functions to make menus dynamic.

function html5blank_nav() {
$html = '<ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="movieslist.html">Movies list</a></li>
            <li><a href="aboutus.html">About us</a></li>
            <li><a href="faq.html">FAQ</a></li>
        </ul>';
return $html;

}

Upvotes: 1

dekameron
dekameron

Reputation: 179

<?php wp_footer(); ?>

Write it in your layout, and remove it from footer.php

Upvotes: 0

Related Questions