I created a page using the page builder. The content is not showing fully. Because I cannot scroll the page to see the whole page. There are 3-page codes I include in here. How to fix this error. Anyone can help me?
my header-test.php page code
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package test
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'test' ); ?></a>
<header id="masthead" class="site-header">
<nav id="site-navigation" class="main-navigation">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
</div>
my footer-test.php page code
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package test
*/
?>
<footer id="colophon" class="site-footer">
<div class="site-info">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'test' ) ); ?>">
<?php
/* translators: %s: CMS name, i.e. WordPress. */
printf( esc_html__( 'Proudly powered by %s', 'test' ), 'WordPress' );
?>
</a>
<span class="sep"> | </span>
<?php
/* translators: 1: Theme name, 2: Theme author. */
printf( esc_html__( 'Theme: %1$s by %2$s.', 'test' ), 'test', 'Underscores.me' );
?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
Here is my created customfullwidth.php page code
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* #link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* #package test
*/
?>
<footer id="colophon" class="site-footer">
<div class="site-info">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'test' ) ); ?>">
<?php
/* translators: %s: CMS name, i.e. WordPress. */
printf( esc_html__( 'Proudly powered by %s', 'test' ), 'WordPress' );
?>
</a>
<span class="sep"> | </span>
<?php
/* translators: 1: Theme name, 2: Theme author. */
printf( esc_html__( 'Theme: %1$s by %2$s.', 'test' ), 'test', 'Underscores.me' );
?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
Related
im fairly new in php and mysqli and trying to make some basic website.
basically i want to make a looping statement in php to create cards in the same row with same size and col without myself creating the cards manually in html.
using bootstrap, php and mysqli
the code is successfully running, but the output doesnt match the bootstrap cards, and they refuse to be in the same row
can anyone help me ? thank you
<?php include("conn.php"); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="img/ArdiantaPargo.png" />
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap/css/style.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
</head>
<body>
<header>
<?php include("header.php"); ?>
</header>
<nav class="navbar navbar-default"><?php include("menu.php"); ?></nav>
<article>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<!-- article ------------------->
<?php
$query = mysqli_query($koneksi, "SELECT * FROM article ORDER BY datae DESC");
// looping Artikel
while($artikel = mysqli_fetch_array($query)){
echo "<div class='card-body'>";
echo "<a class='card-title' href='artikel.php?id=".$artikel['id']."' />".$title['title']."</a>";
echo "<p class='article-date'>Oleh <b>".$author['author']."</b>, pada ".$article['date']."</p>";
echo "</div>";
}
?>
<!-- END article --------------->
</div>
</div>
</div>
</div>
</article>
<footer>
<?php include("footer.php"); ?>
</footer>
</body>
</html>
I think you left part of your card out of your loop. I'm guessing you've got one <div class="card"> containing many <div class="card-body">s.
I would leave the <div class="row"> out of your loop, but everything inside that should be part of the loop.
<div class="row">
<?php
$query = mysqli_query($koneksi, "SELECT * FROM article ORDER BY datae DESC");
// looping Artikel
while($artikel = mysqli_fetch_array($query)){
echo "<div class='col-12 col-md-4'>";
echo "<div class='card mb-4 shadow-sm'>";
echo "<div class='card-body'>";
echo "<a class='card-title' href='artikel.php?id=".$artikel['id']."' />".$title['title']."</a>";
echo "<p class='article-date'>Oleh <b>".$author['author']."</b>, pada ".$article['date']."</p>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
</div>
I am making a web with information from a MySQL database and I want pictures to appear after clicking a buttom.
echo "<img align=\"left\"src=\"".$path[$y]."\" alt=\"error\">";
echo "<img align=\"right\"src=\"".$path_edit[$y]."\" alt=\"error\" id=\"$id[$y]\" style=\"visibility:hidden\">";
echo "_____________________________________";
echo "<script type=\"text/javascript\">";
echo "function showImage() {
document.getElementById(\"$id[$y]\").style.visibility=\"visible\";
}";
echo "</script>";
echo "<br><br>";
echo "<input type=\"button\" onclick=\"showImage();\" value=\"Show Picture\"/>";
echo "<p>";
I want the second image(The one with $PATH_edit[$y]) to appear after clicking in its buttom. (The buttom appears after each couple of images).
I have all with echo because It's all in the loop and I want it all to display as many times as number of entrances the database has.
I know I can not use the php variables in Javascript, I tried everything but I can't fix it. I am new with php, html and I have no idea ofJavaScript.
This is how it looks like without clicking the buttom
I know I can put an id to the image but that will only work for the first one.
This is how it looks like after clicking
I have also tried this:
echo "function showImage() {
var id_id = \"$id[$y]\";
document.getElementById(id_id).style.visibility=\"visible\";
}";
This is the whole code:
<!DOCTYPE html>
<!--- basic page needs
================================================== -->
<meta charset="utf-8">
<title>Base de Datos ATLAS</title>
<meta name="Una gran base de datos de microscopía" content="">
<meta name="Pablo Cruz" content="">
<!-- mobile specific metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="style.css">
<!-- script (I tried to put the function here, bu tit does not work either)
================================================== -->
<script src="js/modernizr.js"></script>
<!-- favicons
================================================== -->
<link rel="shortcut icon" href="logo.jpg" type="image/x-icon">
<link rel="icon" href="logo.jpg" type="image/x-icon">
<!-- preloader
================================================== -->
<div id="preloader">
<div id="loader" class="dots-fade">
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- header
================================================== -->
<header class="s-header header">
<div class="header__logo">
<a class="logo" href="index.html">
<img src="images/logo_sin.png" alt="Homepage" >
</a>
</div> <!-- end header__logo -->
</div> <!-- end header__search -->
<a class="header__toggle-menu" href="#0" title="Menu"><span>Menu</span></a>
<nav class="header__nav-wrap">
<h2 class="header__nav-heading h6">Navigate to</h2>
<ul class="header__nav">
<li class="current">Inicio</li>
<li class="has-children">
Base de Datos
<ul class="sub-menu">
<li>Microscopía Electrónica</li>
<li>Microscopía Óptica</li>
</ul>
</li>
<li class="has-children">
Almacén
<ul class="sub-menu">
<li>Mitocondrias</li>
<li>Núcleo</li>
<li>Lisosomas</li>
<li>Vesículas</li>
<li>Aparato de Golgi</li>
<li>Microtubulos</li>
<li>Retículo Endosplamático Rugoso</li>
<!--
<ul class="sub-menu">
<li>Video Post</li>
<li>Audio Post</li>
<li>Standard Post</li>
</ul>
-->
</ul>
</li>
<li>USAL</li>
<li>Contacto</li>
</ul> <!-- end header__nav -->
Close
</nav> <!-- end header__nav-wrap -->
</header> <!-- s-header -->
<!-- s-content
================================================== -->
<section class="s-content s-content--top-padding s-content--narrow">
<article class="row entry format-standard">
<div class="entry__header col-full">
<h1 class="entry__header-title display-1">
Galeria de Mitocondrias.
</h1>
</div>
<?PHP
require "connect.php";
$x=0;
$y=0;
$autosuma = 222;
$database = "tfg";
$db_found = mysqli_select_db($db_handle, $database);
if ($db_found) {
$SQL = "SELECT * FROM id_organulo WHERE mitocondria = 1";
$result = mysqli_query($db_handle, $SQL);
while ( $db_field = mysqli_fetch_assoc($result) ) {
$id[$x] = $db_field['id'];
$comentario[$x] = $db_field['comentario'];
$nombre_de_foto[$x] = $db_field['nombre_de_foto'];
$autor[$x] = $db_field['autor'];
$path[$x] = $db_field['PATH'];
$path_edit[$x] = $db_field['PATH_edit'];
$ruta_perfil_foto[$x] = $db_field['ruta_perfil_foto'];
$x = $x+1;
echo "<div class=\"col-full entry__main\">";
echo "<div class=\"entry__author\">";
echo "<img src=\"".$ruta_perfil_foto[$y]."\"alt=\"\">";
echo "<div class=\"entry__author-about\">";
echo "<h5 class=\"entry__author-name\">";
echo "<span>$autor[$y]</span>";
echo "$nombre_de_foto[$y]";
echo "</h5>";
echo "</div>";
echo "</div>";
echo "<br>";
echo "</div>"; // <!-- s-entry__main -->
echo "<center>";
echo "<img align=\"left\"src=\"".$path[$y]."\" alt=\"error\">";
echo "<img align=\"right\"src=\"".$path_edit[$y]."\" alt=\"error\" id=\"$id[$y]\" style=\"visibility:hidden\">";
echo "_____________________________________";
echo "<br><br>";
echo '<input type="button" onclick="showImage('.$id[$y].');" value="Show Picture"/>';
echo "<p>";
print $comentario[$y];
echo "</p>";
echo "</center>";
$y++;
}
}
else {
print "Database NOT Found ";
}
mysqli_close($db_handle);
?>
<script type=\"text/javascript\">
function showImage() {
var id = <?php echo (json_encode($id[$y])); ?>;
document.getElementById(id).style.visibility="visible";
}
</script>";
<div class="row pagination-wrap">
<div class="col-full">
<nav class="pgn" data-aos="fade-up">
<ul>
<li><a class="pgn__prev" href="s_mitocondrias_result_3.php">Prev</a></li>
<li><a class="pgn__num" href="s_mitocondrias_result_1.php">1</a></li>
<li><a class="pgn__num" href="s_mitocondrias_result_2.php">2</a></li>
<li><a class="pgn__num" href="s_mitocondrias_result_3.php">3</a></li>
<li><span class="pgn__num current">4</span></li>
>
</ul>
</nav>
<hr>
</div>
</div>
<p> <h5>Codigo de rotulación:</h5> </p>
M: Mitocondrias <br>
dM: Doble membrana <br>
cM: Cresta Mitocondrial <br>
R: Ribosomas <br>
N: Nucleo <br>
eu: Eucromatina <br>
Nu: Nucleolo <br>
Mtu: Microtúbulos <br>
Ec: Esterocilio <br>
</p>
</center>
<?php $y++; ?>
</article> <!-- end entry/article -->
Thank you in advance.
first a little advice, separate php, javascript and html. Together it is difficult to read and maintain. Otherwise you create a function at each pass of the loop. It doesn't bother me that nothing works like that. Try it like this:
Send the id of your image as a parameter to the function. A single function, which will be after the loop.
function showImage(id) {
document.getElementById(id).style.visibility="visible";
}
and at each passage of the loop send to the function the id of the image like this :
<input type="button" onclick="showImage(\"$id[$y]\");" value="Show Picture">
Finally it will give something like that :
<?php
while(...){
echo '<img align="left" src="'.$path[$y].'" alt="error">';
echo '<img align="right" src="'.$path_edit[$y].'" alt="error" id="'.$id[$y].'" style="visibility:hidden">';
echo '_____________________________________';
echo '<br><br>';
echo '<input type="button" onclick="showImage('.$id[$y].');" value="Show Picture">';
echo '<p>';
}
?>
<script type="text/javascript">
function showImage(id) {
document.getElementById(id).style.visibility="visible";
}
</script>
Use ' for echo and not " when displaying html, it's more practical.
Good luck for the future
I would like my header to be replaced by my slider made with the Master Slider widget. I want the slider to be full size, just like the header image is right now.
This is the header code:
<?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<?php get_template_part( 'template-parts/header/header', 'image' ); ?>
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->
<?php
// If a regular post or page, and not the front page, show the featured image.
if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :
echo '<div class="single-featured-image-header">';
the_post_thumbnail( 'twentyseventeen-featured-image' );
echo '</div><!-- .single-featured-image-header -->';
endif;
?>
<div class="site-content-contain">
<div id="content" class="site-content">
The shortcode for my slider is:
[masterslider id="1"]
PHP function:
<?php masterslider(1); ?>
How can I insert this image slider to replace the header image on the front page only without affecting the rest of the page?
Thanks.
I started with modifing the header on my site, and have a hard time to make it worked as i wanted.
I want, header background to change background color to white, when scroll down 100-150px, exactly like is on this site.
I found this JS:
$(function(){
$('#header_nav').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0) {
if($('#header_nav').data('size') == 'big') {
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
}
}
else {
if($('#header_nav').data('size') == 'small') {
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
}
}});
what i inserted into custom JS plugin in my WP site.
Also have this JS:
<script>
$(window).on("scroll", function() {
if ($(this).scrollTop() > 100) {
$("header").css("background","#252525");
}
else {
$("header").css("background","#fff");
}
});
</script>
Is maybe this better sollution, then previous code?
How to use this JS to make the effect on demo site i posted before in this post?
use following code snippet, working fine in the demo website
jQuery(document).scroll(function(){
if(jQuery(this).scrollTop() > 300)
{
jQuery('#navigation').css({"background":"red"});
} else {
jQuery('#navigation').css({"background":"transparent"});
}
});
Try this code.
$(function() {
var bgcolor_navigation = function(){
var bg_offset_top = $(window).scrollTop(); // our current vertical position from the top
if ((100 > bg_offset_top) &&(150 < bg_offset_top)) {
$('#navigation').addClass("bgcolorheadnav");
} else {
$('#navigation').removeClass("bgcolorheadnav");
}
};
// run our function on load
bgcolor_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
bgcolor_navigation();
});
});
css
.bgcolorheadnav{
background-color:#000;
}
This is just for websites made by WordPress:
Create a child theme for your theme.
Activate your child theme.
Copy your header.php file to the child theme folder by FTP client
Replace the code in the child’s header.php with this code:
<?php
/**
* The Header for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Fourteen
* #since Twenty Fourteen 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></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(); ?>/js/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).bind('scroll', function() {
var distance = 50;
if ($(window).scrollTop() > distance) {
$('.header-main').addClass('scrolled');
}
else {
$('.header-main').removeClass('scrolled');
}
});
});
</script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</div>
<?php endif; ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
</nav>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
</header><!-- #masthead -->
<div id="main" class="site-main">
Put following code to your Child Theme style.css file or install the Simple Custom CSS plugin and put the code there.
.header-main {
transition:top 0.5s ease;
box-shadow:0 0 10px black;
transition: background-color 0.5s ease;
}
.scrolled {
background: #bada55!important;
}
If you don't do the CSS this way and put the code to themes -> style.css, you will loose all changes you made when you update your theme in the future.
The site you referred uses bootstrap framework.
You can see what is done on that site by right clicking on the site and say inspect element. The following code was found for the navbar: This way you do not need to write custom js, jut follow the industry the best practice.
<nav class="navbar navbar-dark navbar-fixed-top top-nav-collapse" role="navigation">
<div class="navbar-container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="/">
<span class="logo hidden-xs">
<img src="img/logo-santa.svg" alt="">
</span>
<span class="logo hidden-sm hidden-md hidden-lg">
<img src="img/logo-notext.svg" alt="">
</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden active">
</li>
<li class="page-scroll">
Pricing
</li>
<li class="page-scroll">
XenoPanel
</li>
<li class="page-scroll">
Multicraft
</li>
<li class="page-scroll navbar-borderbtnn">
Client Area <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
i am building a wordpress site, twenty eleven theme. I want a widget area to be shown only on a certain page.
so added a javascript function to the <head> which is called by <body onload="show_collection_area">
The function called, since the console.log(obj.id) writes "text-2" to the console (which is the right id). But when i set visibilty to none in this function:
function show_collection_area(){
if (document.location == "http://dutchmountaineer.com/wp/?page_id=116"){
obj = document.getElementById('text-2');
obj.style.visibility = 'visible';
console.log(obj.id)
console.log(obj);
} else {
document.getElementById("text-2").style.visibility = 'none';
}
}
nothin happens. I tried calling the function from the page itself by using a button but the result is the same.
What am i doing wrong?
Thanks a lot!
PS the whole code:
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Eleven
* #since Twenty Eleven 1.0
*/
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
</head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("button").hide();
});
});
function show_collection_area(){
if (document.location == "http://dutchmountaineer.com/wp/?page_id=116"){
obj = document.getElementById('text-2');
obj.style.visibility = 'visible';
console.log(obj.id)
console.log(obj);
} else {
document.getElementById("text-2").style.visibility = 'none';
}
}
function display_gallery(id)
{
//first we set all displays to none
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body onload = "show_collection_area()" <?php body_class(); ?>>
<div id="page" class="hfeed">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><?php bloginfo( 'name' ); ?></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php
// Check to see if the header image has been removed
$header_image = get_header_image();
if ( ! empty( $header_image ) ) :
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php
// The header image
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; // end check for featured image or standard header ?>
</a>
<?php endif; // end check for removed header image ?>
<?php
// Has the text been hidden?
if ( 'blank' == get_header_textcolor() ) :
?>
<div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
<?php get_search_form(); ?>
</div>
<?php
else :
?>
<?php get_search_form(); ?>
<?php endif; ?>
<nav id="access" role="navigation">
<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
</header><!-- #branding -->
<div id="main">
The value for "visibility" should be "hidden" when you want it to be hidden. The "none" value works for "display".