I use a WP 5.3 Twenty Seventeen child theme, but I don't want to edit templates, so I added a needed second (in fact it became the first in the displaying order) div wrap section to the top navigation menu with the bellow function. The problem is that I lost after this the fixed position of the menu (it is not sticky anymore now). How to remediate this? I played with the CSS code, but without success. The site in discussion is here.
function my_navigation_top( $slug, $name ) {
if( $name == 'top' ) { ?>
--- some content here ---
</div> <!-- wrap closed -->
<div class="wrap"> <!-- wrap opened -->
<?php }
}
add_action( 'get_template_part_template-parts/navigation/navigation', 'my_navigation_top', 10, 2 );
UPDATE
If instead of a second div wrap section I add a simple div section inside the wrap, the problem doesn't appear.
I am looking at the script file that sets the fixed class (that makes the top nav sticky when scrolling down). (File: twentyseventeen/assets/js/global.js)
And It seems the fixed class is not set if the height of the nav is too tall:
// Set properties of navigation.
function setNavProps() {
navigationHeight = $navigation.height();
navigationOuterHeight = $navigation.outerHeight();
navPadding = parseFloat( $navWrap.css( 'padding-top' ) ) * 2;
navMenuItemHeight = $navMenuItem.outerHeight() * 2;
idealNavHeight = navPadding + navMenuItemHeight;
navIsNotTooTall = navigationHeight <= idealNavHeight;
}
// Make navigation 'stick'.
function adjustScrollClass() {
// Make sure we're not on a mobile screen.
if ( 'none' === $menuToggle.css( 'display' ) ) {
// Make sure the nav isn't taller than two rows.
if ( navIsNotTooTall ) {
// When there's a custom header image or video, the header offset includes the height of the navigation.
if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
} else {
headerOffset = $customHeader.innerHeight();
}
// If the scroll is more than the custom header, set the fixed class.
if ( $( window ).scrollTop() >= headerOffset ) {
$navigation.addClass( navigationFixedClass );
} else {
$navigation.removeClass( navigationFixedClass );
}
} else {
// Remove 'fixed' class if nav is taller than two rows.
$navigation.removeClass( navigationFixedClass );
}
}
}
I am not entirely certain what the solution would be. One idea (which is not ideal) is to adapt the .js file and put true between the ( ) instead of navIsNotTooTall on this line:
if ( navIsNotTooTall ) {
If you want to add this change to the child theme, instead of the main theme: Put the changed global.js file in your child-theme directory here: twentyseventeen-child/assets/js/global.js
Then add this to functions.php of the child-theme:
add_action( 'wp_enqueue_scripts', 'override_globaljs_script', 100 );
function override_globaljs_script()
{
wp_dequeue_script( 'twentyseventeen-global' );
wp_deregister_script( 'twentyseventeen-global' );
wp_enqueue_script( 'twentyseventeen-global-child', get_stylesheet_directory_uri() . '/assets/js/global.js' );
}
It will unregister the main theme global.js and register it for the child theme. This is the 'proper' Wordpress way to do it as far as I am concerned.
Related
I would like to add a logo ( get_custom_logo() ) in the Genesis navigation bar but when it's blank, there's to be text. I've achieved this in a similar fashion for the header but cannot for the primary nav. The end result DOES work but when the user goes to the "customize" part of "site identity" the change is not visible, until you hit "publish" then refresh the actual page.
I need the change to be seen in "customize" mode as the logo is being changed. Here's the code the semi-functions...
add_filter( 'wp_nav_menu_items', 'prefix_add_menu_item', 10, 2 );
/**
* Add Menu Item to end of menu
*/
function prefix_add_menu_item ( $items, $args ) {
if( $args->theme_location == 'primary' ) {
if (( has_custom_logo())) {
$thelogo = get_custom_logo();
$items .= '<li class="menu-item">' . $thelogo . '</li>';
} else {
$items .= '<li class="menu-item">Theme Name</li>';
return $items;
}
return $items;
}
}
Ideally, I'd like to apply this method throughout the site for other hooks. If anyone can point to what I'm doing wrong, that would help.
Cheers.
It won't refresh in preview unless you add a custom setting to $wp_customize for your image or you add a new PHP class for the site logo. Either way, it's not an easy fix.
I have a twenty-seventeen child theme, which i want to switch colour scheme per category, (from colors-custom to colors-dark - eventally it will have more color schemes)
but this isn't working
add_filter( 'body_class', function( $classes ) {
if ( is_category( 'x cateorgy' ) )
{
foreach($classes as $key => $class) {
if( $class == "colors-custom" )
{
unset($classes[$key]);
}
}
}
$classes[] = 'colors-dark';
return $classes;
}, 1000);
I've initially tried it with out the first conditional if (is category()) and it adds color-dark but the css doesn't change.
Simply target the body element css classes for specific categories. The twenty seventeen theme uses the body_class() function and outputs class names for everything.
Just write css styles for background colors for every category class.
I'm attempting to replace a hook name so that my breadcrumb is removed from one location and added to another spot in the page. I'm using a child theme and I'd like to accomplish this within the functions.php of my child theme. What happens is that the function is removed from one location, and added to the new location, but it fires twice, so I have two breadcrumbs stacked on top of each other.
The parent theme function looks like this:
/*-----------------------------------------------------------------------------------*/
/* Breadcrumb display */
/*-----------------------------------------------------------------------------------*/
add_action('woo_main_before','woo_display_breadcrumbs',10);
if (!function_exists( 'woo_display_breadcrumbs')) {
function woo_display_breadcrumbs() {
global $woo_options;
if ( isset( $woo_options['woo_breadcrumbs_show'] ) && $woo_options['woo_breadcrumbs_show'] == 'true' && ! (is_home()) ) {
echo '<section id="breadcrumbs">';
woo_breadcrumbs();
echo '</section><!--/#breadcrumbs -->';
}
} // End woo_display_breadcrumbs()
} // End IF Statement
And this is what I have in my functions.php file of the child theme.
add_action( 'woo_main_before', 'remove_woo_display_breadcrumbs', 0 );
function remove_woo_display_breadcrumbs() {
remove_action('woo_main_before','woo_display_breadcrumbs',10);
}
add_action('woo_content_before','woo_display_breadcrumbs',10);
By the way, this is the Mystile theme by Woo Themes. I'm really new to Hooks, so if you do have the answer, a short explanation of why would be really helpful.
OK, so first, to fix the problem you need to do the following:
remove_action('woo_main_before', 'woo_display_breadcrumbs', 10); // Removes from the original location
add_action('woo_content_before', 'woo_display_breadcrumbs', 10); // Adds to the new location
The '10' is the priority that a function runs for a particular action. Think of it like a slot.
So slot 0 is completely independent from slot 10.
All we're doing in the code sample above is taking woo_display_breadcrumbs out of one slot and inserting it into another.
I hope this helps.
I have a client site running on WordPress. It uses WooThemes Canvas as its base theme (with a customized child theme), and utilizes the Time.ly All-in-one-Event Calendar. It can be viewed here.
The design I came up with required me to move the page/post titles outside the main content area. I followed the instructions on this WooThemes customization document, and made modifications based on the comments so that it would also work for posts and the Time.ly event postings. The entries in my functions.php file looked like this:
add_filter( 'the_title', 'woo_custom_hide_single_post_title', 10 );
function woo_custom_hide_single_post_title ( $title ) {
if ( is_singular( array( 'post', 'ai1ec_event' ) ) && in_the_loop() ) { $title = ''; }
return $title;
} // End woo_custom_hide_single_post_title()
add_filter( 'the_title', 'woo_custom_hide_single_page_title', 10 );
function woo_custom_hide_single_page_title ( $title ) {
if ( is_page() && in_the_loop() ) { $title = ''; }
return $title;
} // End woo_custom_hide_single_page_title()
// Add Titles above Content Area on all Posts & Pages
add_action( 'woo_content_before_singular-post', 'woo_custom_add_title', 10 );
add_action( 'woo_content_before_singular-ai1ec_event', 'woo_custom_add_title', 10 );
add_action( 'woo_content_before_singular-page', 'woo_custom_add_title', 10 );
function woo_custom_add_title () {
if ( ! is_page_template(array('template-biz.php', 'template-brewpub.php')) ) {
global $post;
$title = '<h1 class="page-title">' . get_the_title( $post->ID ) . '</h1>' . "";
echo '<div id="title_container"><header class="col-full">';
echo $title;
woo_post_meta();
echo '</header></div>';
}
} // End woo_custom_add_post_title()
This produced some undesirable results, which can be seen on the DEV site I setup for this post (dev.thebrewworks.com):
Since the Time.ly event calendar also uses the_title to display it's events, in the three instances I used the calendar inside a page loop (the homepage and the two restaurant location pages), the event titles don't show up. This was confirmed by creating a Test Page (dev.thebrewworks.com/test-page), where you can see two instances of the calendar inside the loop, and one outside (in the sidebar). The two instances in the Loop have no titles, while the sidebar does.
Supressing the_title in the Loop didn't suppress the Post Meta, which still shows up in the main content area, but I want it under the title in the new DIV, so reposting woo_post_meta outside the Loop leaves me with two instances of the Post Meta.
In order to get the site live I had to make some concessions in my functions.php file:
// Hide Titles on All Posts & Pages
add_filter( 'the_title', 'woo_custom_hide_single_post_title', 10 );
function woo_custom_hide_single_post_title ( $title ) {
if ( is_singular( array( 'post', 'ai1ec_event' ) ) && in_the_loop() ) { $title = ''; }
return $title;
} // End woo_custom_hide_single_post_title()
add_filter( 'the_title', 'woo_custom_hide_single_page_title', 10 );
function woo_custom_hide_single_page_title ( $title ) {
if ( is_page() && in_the_loop() && is_page_template( array('page.php', 'template-contact.php' ) ) ) { $title = ''; }
return $title;
} // End woo_custom_hide_single_page_title()
// Add Titles above Content Area on all Posts & Pages
add_action( 'woo_content_before_singular-post', 'woo_custom_add_title', 10 );
add_action( 'woo_content_before_singular-ai1ec_event', 'woo_custom_add_title', 10 );
add_action( 'woo_content_before_singular-page', 'woo_custom_add_title', 10 );
function woo_custom_add_title () {
if ( ! is_page_template(array('template-biz.php', 'template-brewpub.php')) ) {
global $post;
$title = '<h1 class="page-title">' . get_the_title( $post->ID ) . '</h1>' . "";
echo '<div id="title_container"><header class="col-full">';
echo $title;
woo_post_meta();
echo '</header></div>';
}
} // End woo_custom_add_post_title()
// Disable Post Meta
function woo_post_meta() {}
?>
Note the changes:
I disabled the post_meta completely. Not exactly what I was looking for, but better than having it show up twice.
I modified the function that disables the page title so that it only works on pages that use certain templates (the three instances I mentioned above use the Business Template in Canvas that already suppresses the page title). This would require me to go in and add each new page template that I want to suppress the title on, though...and on top of that, it's not working. Take a look at the live site. The page title is showing up twice on static pages. Once inside the white content area and once outside in the yellow header.
I'm no PHP-developer...I'm more of an Design/HTML/CSS person. I know enough to be dangerous...how to modify existing code, etc., but not necessarily how to write my own from scratch. I have no idea if the way I came up with things is even the best/most elegant way to go about it. Now that you have all the facts, here are my questions:
In an ideal world, the Post Meta would ONLY show up on the blog entries (not on the calendar entries...no need for them there, really), and OUTSIDE the main content area underneath the page title that I moved. How can I achieve this? I'm guessing it's going to be some sort of conditional statement that removes the woo_post_meta from all instances inside the loop, and adds it to the woo_custom_add_title ONLY if it's a standard post, but how to get there I have no idea.
How can I suppress the_title that shows up at the top of the content area on ALL static pages, regardless of template, but have it not affect instances of the_title that appear elsewhere in the loop (like the calendar syndication). In my head there has to be a way to indicate that you ONLY want to disable the_title if it's in a certain div/id, etc., but again...only enough to be dangerous, unless I see it done elsewhere, I can't come up with the solution on my own.
Thanks in advance for your input.
I need to hide the "Home" link that's generated from Wordpress main menu on the homepage, and show it on the rest of the site.
I tried creating my own menu with no "Home" link and adding the "Home" link manually on the header.php file but it goes to the end of the menu and does not look like a pretty solution.
Any ideas? Using latest Wordpress 3.2
If you only want to hide it to the users, i suggest using the following CSS:
body.home a[title="Home"] {
display: none;
}
Explanation: Wordpress generates several classes for the body tag. The home class is used to hide all links with the title Home on the homepage.
Working Example (code taken from the default theme): http://jsfiddle.net/yJVyK/1/
Note: The attribute selector does not work in IE6
There is an another solution with PHP which more correct way in my opinion.
add_filter( 'wp_nav_menu_objects', 'amc_filter_menu', 10, 2 );
/**
* Filters to remove Home Link on Front Page
*/
function amc_filter_menu( $objects, $args ) {
// Return Default Value if the Menu isn't Main Menu
// Replace "Navigation_location" with your target location
if ( 'Navigation_location' !== $args->theme_location ) {
return $objects;
}
// Detect the Menu which equeal site URL
foreach ( $objects as $key => $object ) :
if ( get_site_url( null, '/' ) === $object->url && is_front_page() || get_site_url() === $object->url && is_front_page() ) :
unset( $objects[ $key ] );
endif;
endforeach;
// Return the menu objects
return $objects;
}
Source