I added a menu to the footer of my site in functions/footer.php, and it shows up as desired on my home page, but it doesnt show up on any of the Post pages.
here is the website http://www.cultcitychi.com/
Below is my footer.php code
`?>
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
<?php // footer menu
wp_nav_menu( array('container_class' => 'menu-footer',
'theme_location' => 'secondary' ) ); ?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
`
You need to add this code at the bottom of your single.php file in order to display the footer on each post page:
<?php get_footer(); ?>
UPDATE:
I checked your website using the developer tools and the footer is present on the posts page but it's not appearing because of a flaw in your CSS. Please add the following CSS at the bottom of your stylesheet and that should solve the problem:
.single.single-thumbnail .site {
height: auto;
}
.single.single-thumbnail .site-footer {
padding-top: 0px;
}
.site-info {
margin: 0px auto;
padding-bottom: 0px;
}
footer#colophon {
z-index: 999;
}
Related
How Can I delete html tags in excerpts posts on homepage https://ptbo.edu.pl/ ?
I mean only HOMEPAGE (not in categories) because I'm changing this manually in posts editor.
My code looks now:
<?php if ( allium_has_excerpt() ) : ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php endif; ?>
I want to make changes only on the home page
My solution would be to leave the HTML tags but add this CSS to make them unnoticeable:
.home .entry-summary a {
pointer-events: none;
color: #3d3d3d;
}
.home .entry-summary strong {
font-weight: normal;
}
I'm working on a Wordpress theme where when visiting the homepage, a short animated video is played, and once it has finished playing it 'fades' away a reveals a static page of text and the header. I'm not quite sure how to achieve this but I've provided my code below.
home.php
<?php
/*
* Template Name: Homepage
*/
get_header();
?>
<div id="primary" class="content-area offset-md-1 col-md-10">
<main id="primary" class="site-main home-page">
<div id="first">
<video src="http://localhost:8888/myvideo.mp4" controls autoplay></video>
</div>
<div id="second">
<div class="home-menu">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
<p>Lorem Ipsum</p>
</div>
</div>
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php
get_sidebar();
get_footer();
style.css
The video should be on top of the content first, so you can position it the right way using CSS in the style.css of your theme:
#first {
width: 100%; /* full screen width */
height: 100vh; /* full screen height */
position: absolute; top: 0; left: 0;/* stay in place */
z-index: 1; /* sit on top */
opacity: 1; /* it is fully visible */
transition: 0.5s; /* time to move */
}
.leave {
opacity: 0; /* it is invisible */
width: 0; /* it has no width */
}
#first video {
width: 100%; height: 100vh; /* video fit container */
}
We added a leave class for the hidden state after the video is loaded. That is all for the CSS part. Let's now get back to your page template file. We will use javascript to add the leave-class to the video, after it ended playing.
In Javascript you can use the addEventListener() method:
addEventListener("ended", yourScript);
In your html, you give an ID name to the video element: <video id="myVid" src...
With this having set, you can use the method and run a function when the video ends. Put this after your closing content-area div in the page template:
<script>
document.getElementById('myVid').addEventListener("ended", yourScript);
function yourScript(e){
var div = document.getElementById("first"); /* div container */
div.classList.add("leave"); /* add class to div */
}
</script>
This way your video gets the css class when it ended. In the CSS we took away the opacity and the width with a transition of 0.5 seconds. You can adjust it the way to like, this is just pure javascript and CSS.
There are also jQuery functions like fadeOut(500) if you prefer to use that.
Tried to add default-image tag in functions.php but it's not working. It's only work when i upload img from wp dashboard but default img is not working
functions.php
<?php
add_theme_support('title-tag');
add_theme_support('custom-header', array(
'default-image' => get_stylesheet_directory_uri() . '/images/logo.jpg',
));
?>
CSS
#logo{
width: 890px;
position: relative;
height: 200px;
}
HTML
<div id="logo" style="background: url(<?php header_image(); ?>) no-repeat;">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of the text -->
<h1><?php bloginfo('name');?></h1>
<h2><?php bloginfo('description');?></h2>
</div>
</div>
After some digging I found that adding default image path in child theme is quite different.
Keep path like this and it will work.
add_theme_support('custom-header', array(
'default-image' => '%2$s/images/logo.jpg',
));
In parent theme %s should be used while in child theme %2$s should be used.
See examples in this page. https://codex.wordpress.org/Function_Reference/register_default_headers
Did you add the background-image in css file?
Remove the code from functions.php
Make the html code as
<div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of the text -->
<h1><?php bloginfo('name');?></h1>
<h2><?php bloginfo('description');?></h2>
</div>
</div>
Add the style
#logo {
width: 890px;
position: relative;
height: 200px;
background-image:url('../images/logo.jpg');
}
I am trying to create a dynamic website using PHP, but I have encountered a problem - all descendants of <nav>, <footer> and <header> are ignoring their class CSS formatting, but not class-specific CSS is taking effect on them. For example:
This formatting is not affecting elements inside <footer>:
footer section #main-footer-section
{
background-color: #444554;
height: 50px;
width: 100%;
}
<footer>
<section id="main-footer-section">
</section>
<section id="bottom-footer-section">
<p id="copyright-mark"><?php echo date("Y") ?>©</p>
</section>
</footer>
But this is affecting the <footer> contents:
footer section
{
background-color: #444554;
height: 50px;
width: 100%;
}
<footer>
<section id="main-footer-section">
</section>
<section id="bottom-footer-section">
<p id="copyright-mark"><?php echo date("Y") ?>©</p>
</section>
</footer>
Could anyone please advise if I'm doing something wrong?
Your id is attached to the footer so it's
footer section#main-footer-section
{
background-color: #444554;
height: 50px;
width: 100%;
}
Your code snippet is looking for Footer > Section > element with #main-footer-section instead of Footer > Section with #main-footer-section
Using it like that:
footer section #main-footer-section
would require a structure like
<footer>
<section>
<div id="main-footer-section">
</section>
</footer>
Every whitespace in CSS definitions stands for another level down.
Your structure would be matched by this:
footer section#main-footer-section { /* ... */ }
I have made a static blank page that also shows my website's header/sidebar/footer in it. Now what i am trying to do is get rid of the 'style' that my wordpress template css is forcing me to have on the page i am trying to create.
Here is my code:
<?php
/*
* Template Name: My own page!
* Description: I made a page!
*/
require (dirname(dirname( __FILE__ )).'/wp-load.php');
get_header(); ?>
<div id="main-content" class="main-content">
<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( 'featured-content' );
}
?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main">
<!-- MY CONTENT!!! -->
Hello2.
<h1> hello.</h1>
<p>hello</p>
<input type="submit" name="connect" value="CONNECT" style="height:52px ; width:136px"/>
<p>hi</p>
<!-- -->
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->
<?php
get_sidebar();
get_footer();
Any help appreciated.
You will need to overwrite the styles which are already in the theme. For example, you can give an id to your submit button like <input type="submit" name="connect" value="CONNECT" id="submitbutton"> and then style it according to your needs using CSS, for example:
input#submitbutton {
height: 52px;
width: 136px;
background: blue;
color: white;
}
Same goes for the <h1> tags. Give an <id> to your <h1> tag like <h1 id="hello"> hello.</h1> and then style it according to your needs using CSS, for example:
h1#hello {
color: black;
font-weight: bold;
font-size: 20px;
}
Use of Developer Tools over here will help you quite a lot in order to see how an element would look with your desired styles before actually making any changes to its CSS.
you will need to use something like
get_header('custom-header');
And use a custom header file to only load the stuff you want. You may need to create a custom function to override the scripts included by the theme...