I am trying to understand theme creating in WP. And according what I understand wp_footer() includes footer.php in the main page. But what I am don't understand is why wp_footer() is called in footer.php itself like in twentyseventeen footer ?
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="wrap">
<?php
get_template_part( 'template-parts/footer/footer', 'widgets' );
if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
) );
?>
</nav><!-- .social-navigation -->
<?php endif;
get_template_part( 'template-parts/footer/site', 'info' );
?>
</div><!-- .wrap -->
</footer><!-- #colophon -->
</div><!-- .site-content-contain -->
</div><!-- #page -->
<?php wp_footer(); Here?>
wp_footer() in wordpress in not used for including the footer, in fact get_footer() does that.
The wp_footer() is used for outputting data or doing background actions that run just before closing body tag.
Hope that makes it clear!!
As per my knowledge the wp_footer() in footer.php is used for printing scripts or data before the closing body tag on the front end.
Reference Link: http://www.twoclock.com/wp_footer-wordpress-action-hook/
Related
I'm building a website using understrap-child theme.
What I would like to achieve is my navbar logo (added through Appearance -> Customize) to change into another one when scrolling the page.
In functions.php I've already added a section in order to be able to add a second logo, which I've successfully added in the Appearance -> Customize section.
Here's the code in functions.php:
//ADDING NEW LOGO FIELD
function your_theme_customizer_setting($wp_customize) {
// add a setting
$wp_customize->add_setting('your_theme_hover_logo');
// Add a control to upload the hover logo
$wp_customize->add_control(new WP_Customize_Image_Control($wp_customize, 'your_theme_hover_logo', array(
'label' => 'Upload Hover Logo',
'section' => 'title_tagline', //this is the section where the custom-logo from WordPress is
'settings' => 'your_theme_hover_logo',
'priority' => 8 // show it just below the custom-logo
)));
}
add_action('customize_register', 'your_theme_customizer_setting');
get_theme_mod( 'your_theme_hover_logo' );
Now that I have two logos set, I would like to know how to replace the first logo with the second one when scrolling my page.
Here's my header.php section with the navbar:
<!-- ******************* The Navbar Area ******************* -->
<div id="wrapper-navbar">
<a class="skip-link sr-only sr-only-focusable" href="#content"><?php esc_html_e( 'Skip to content', 'understrap' ); ?></a>
<nav id="main-nav" class="navbar navbar-expand-md navbar-dark fixed-top" aria-labelledby="main-nav-label">
<h2 id="main-nav-label" class="sr-only">
<?php esc_html_e( 'Main Navigation', 'understrap' ); ?>
</h2>
<?php if ( 'container' === $container ) : ?>
<div class="container">
<?php endif; ?>
<!-- Your site title as branding in the menu -->
<?php if ( ! has_custom_logo() ) { ?>
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" itemprop="url"><?php bloginfo( 'name' ); ?></a>
<?php endif; ?>
<?php } else {
the_custom_logo();
} ?><!-- end custom logo -->
Please notice that I've already added a Query in order to change the navbar background color when scrolling...and that works!
</script>
<script>jQuery(window).scroll(function(){
jQuery('nav').toggleClass('scrolled', jQuery(this).scrollTop() > 80);
});</script>
with its CSS rules:
#media (min-width: 992px) {
.navbar.scrolled {
background-color: $secondary;
border-bottom: solid rgba(37, 36, 36, 0.055);
I really hope you can help me solve my problem!
THANK YOU SO MUCH!!
I am having problems reducing and/or removing the black space at the bottom of my wordpress webpage. Using inspector the black space seems to go over 2 css divs.
I need to add code in the custom css area to solve this but I dont know what to add.
http://andrewt.com.au/wp1/
this is the footer.php code
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after
*
* #package WordPress
* #subpackage Twenty_Sixteen
* #since Twenty Sixteen 1.0
*/
?>
</div><!-- .site-content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
<?php if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
) );
?>
</nav><!-- .social-navigation -->
<?php endif; ?>
</footer><!-- .site-footer -->
</div><!-- .site-inner -->
</div><!-- .site -->
<?php wp_footer(); ?>
</body>
</html>
Add this code in your footer.php
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after
*
* #package WordPress
* #subpackage Twenty_Sixteen
* #since Twenty Sixteen 1.0
*/
?>
<style>
#media screen and (min-width: 61.5625em){
.content-area .site-main {
margin-bottom: 0px;
}
}
</style>
</div><!-- .site-content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
<?php if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>',
) );
?>
</nav><!-- .social-navigation -->
<?php endif; ?>
</footer><!-- .site-footer -->
</div><!-- .site-inner -->
Your website is broken, or have very-very-very bad coded.
Add this css rules to custom css area( as you mentioned ):
#main{
margin-bottom: 10px;
}
footer{
padding: 5px; //or you can decrease/increase it
}
If after adding and refreshing/deleting cache of page, it doesn't affected, than try to use:
#main{
margin-bottom: 10px !important;
}
footer{
padding: 5px !important; //or you can decrease/increase it
}
or try to write the rules provided to some other stylesheet, such as default customizer of wordpress: Customize => Additional Css.
According to the forum in this article, fixing the read more tag problem, Mark Pasay has the same difficulty as I do in using this code snippet as a solution. <?php global $more; $more = 0; ?> But the author does not elaborate on how to use this properly. I am using a page template that is called in the WP admin. The <!--more--> is added in the text editor. Here is the code for the page template.
/*
Template Name: new template
*/
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_front_page() ) { ?>
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php } else { ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } ?>
<div class="entry-content">
<?php global $more; $more = 0; ?>
<?php the_content('read more'); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #container -->
The tag shows up in the browser but when clicked, it does not show the full post.
On click, the URL changes from localhost/domain.com/page/ to localhost/domain.com/page/#more-481.
The author explains that this is not being used properly because it is calling content of pageX from pageX. "This trick will only work when you are trying to display excerpts of pageX on pageY." Fair enough, but how is this done?
When passing different posts_per_page values in functions.php number of posts shown changes but it doesnt load any other posts on scroll. Changing type to click doesn't do anything.
adding support in functions.php:
add_theme_support( 'infinite-scroll', array(
'type' => 'scroll',
'footer_widgets' => false,
'container' => 'content',
'render' => false,
'posts_per_page' => false,
) );
index.php:
<?php
get_header(); ?>
<div id="content">
<?php if (have_posts):
while (have_posts()) {
the_post();
get_template_part('content', get_post_format());
}
else:
echo '<p>No content found</p>';
endif; ?>
</div>
content.php:
<div class="post clearfix">
<div class="post-heading">
<h2><?php the_title(); ?></h2>
<h3><?php the_subtitle(); ?></h3>
</div>
<div class="post-content">
<?php the_content(); ?>
<?php if (is_single()): ?>
<div class="navigation clearfix">
<?php the_post_navigation( array(
'next_text' => 'Next',
'prev_text' => 'Previous',
'screen_reader_text' => ' '
)); ?>
</div>
<p>Main</p>
<?php endif; ?>
</div>
When I click on any link on my blog the page and URL changes but still shows my recent posts, this is a custom theme I created from the 2010 theme earlier in the year and was working perfectly until recently.
The blog is here my blog
I'm sure it is a fundamental issue, has anyone had the same issue?
I originally thought it was a permalink issue but when I change theme the blog works properly.
Code from the loop.php template:
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="nav-above" class="navigation">
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
</div><!-- #nav-above -->
<?php endif; ?>
<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
<div id="post-0" class="post error404 not-found">
<h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
<div class="entry-content">
<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyten' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .entry-content -->
</div><!-- #post-0 -->
<?php endif; ?>
<?php
/* Start the Loop.
*
* In Twenty Ten we use the same loop in multiple contexts.
* It is broken into three main parts: when we're displaying
* posts that are in the gallery category, when we're displaying
* posts in the asides category, and finally all other posts.
*
* Additionally, we sometimes check for whether we are on an
* archive page, a search page, etc., allowing for small differences
* in the loop on each template without actually duplicating
* the rest of the loop that is shared.
*
* Without further ado, the loop:
*/ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php /* How to display posts in the Gallery category. */ ?>
<?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 <!--class="entry-title"-->><?php the_title(); ?></h2>
<div class="entry-meta">
<?php twentyten_posted_on(); ?>
</div><!-- .entry-meta -->
<div class="entry-content">
<?php if ( post_password_required() ) : ?>
<?php the_content(); ?>
<?php else : ?>
<?php
$images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
if ( $images ) :
$total_images = count( $images );
$image = array_shift( $images );
$image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );
?>
<div class="gallery-thumb">
<a class="size-thumbnail" href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a>
</div><!-- .gallery-thumb -->
<p><em><?php printf( __( 'This gallery contains <a %1$s>%2$s photos</a>.', 'twentyten' ),
'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',
$total_images
); ?></em></p>
<?php endif; ?>
<?php the_excerpt(); ?>
<?php endif; ?>
</div><!-- .entry-content -->
<div class="entry-utility">
<?php _e( 'More Galleries', 'twentyten' ); ?>
<span class="meta-sep">|</span>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-utility -->
</div><!-- #post-## -->
<?php /* How to display posts in the asides category */ ?>
<?php elseif ( in_category( _x('asides', 'asides category slug', 'twentyten') ) ) : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyten' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>
<div class="entry-utility">
<?php twentyten_posted_on(); ?>
<span class="meta-sep">|</span>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-utility -->
</div><!-- #post-## -->
<?php /* How to display all other posts. */ ?>
<?php else : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2 class="entry-title"><?php the_title(); ?></h2>
<div class="entry-meta">
<?php twentyten_posted_on(); ?>
</div><!-- .entry-meta -->
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyten' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>
<div class="entry-utility">
<?php if ( count( get_the_category() ) ) : ?>
<span class="cat-links">
<?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?>
</span>
<span class="meta-sep">|</span>
<?php endif; ?>
<?php
$tags_list = get_the_tag_list( '', ', ' );
if ( $tags_list ):
?>
<span class="tag-links">
<?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
</span>
<span class="meta-sep">|</span>
<?php endif; ?>
<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-utility -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endif; // This was the if statement that broke the loop into three parts based on categories. ?>
<?php endwhile; // End the loop. Whew. ?>
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="nav-below" class="navigation">
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyten' ) ); ?></div>
</div><!-- #nav-below -->
<?php endif; ?>
When you create a wordpress theme you must understand the Template Hierarchy or you'll have trouble setting page content. As you can see in the page I've linked wordpress has some basic rules that it fallows to display content from different template files. If one file is missing from the hierarchy, wordpress will fallback to the next one in hierarchy.In your case if you don't have category-{slug}.php the content displayed for a specific category will be the one generated by the category.php code.If you don't have category.php then wordpress will read archive.php and so on till index.php.If you want to display a specific loop make sure you have the code in the correct file and the file named with respect of the template hierarchy rules so it's code will run when you want it to run.
The reason my blog was showing the top 5 posts on every page was because I has the following line in the header file:
query_posts('showposts=5');
I used this in my main static part of the site so I could show the most recent 5 posts in my footer.
I have moved this code to my blog footer and all is working again.
Thanks for all your relpies.