I'm trying to hide the parent element in Wordpress if the child has no tags.
Тhis is the code:
<div id="tags">
<h4 class="tag-title">Tags</h4>
<?php the_tags( '', ' ', '<br />' ); ?>
</div>
I want to hide all div #tags if php string is empty.
You can use the function has_tag() to check if there is a tags.
<?php if(has_tag()) { ?>
<div id="tags">
<h4 class="tag-title">Tags</h4>
<?php the_tags( '', ' ', '<br />' ); ?>
</div>
<?php } ?>
If you use html elements as the $before, $sep, and $after parameters for the_tags, you can hide #tags when there's only one child (the ).
Looking at this post: Selector for when only one child exists in parent I came up with the below example.
<style>
.tags h4:nth-child(1):last-child{
display: none;
}
</style>
<div class='tags' id='tags1'>
<h4>Some nonsense</h4>
</div>
<div class='tags' id='tags2'>
<h4>Some nonsense</h4>
<ul><li>Some</li><li>other</li></ul>
</div>
Related
I have the following ACF-Block (Akkordeon).
<?php
...
$anchor = '';
if (!empty($block['anchor'])) {
$anchor = 'id="' . esc_attr($block['anchor']) . '" ';
}
$class_name = 'accordion-block';
if (!empty($block['className'])) {
$class_name .= ' ' . $block['className'];
}
?>
<div class="<?php echo esc_attr($class_name); ?>">
<h3 <?php echo $anchor; ?> class="accordion-element accordion">
<?php the_field('accordion-title'); ?>
</h3>
<div class="accordion-panel">
<InnerBlocks />
</div>
</div>
I use the InnerBlocks element within the content area of the accordion, there I can insert any Gutenberg block. If I insert a Gutenberg heading within this area, it is displayed in the structure, but not the h3 from the accordion title.
I want to add the h3 (accordion title) to the Gutenberg Detail Site-Structure. (picture)
I combined a slider with the repeater fields.
under the repeater I have 2 subfields. one called “image” and the other “title”
this slider has a class called “selected-item” that dynamically appear when an image is selected. (when this class is on an image the image change it’s size).
How can I define that when the class “selected-item” is on some image also the “title” form the same row of the image will appear?
this is the code the displays the images:
<?php
// check if the repeater field has rows of data
$i = 1;
if( have_rows('carousel_images') ):
// loop through the rows use_cases_fields data
while ( have_rows('carousel_images') ) : the_row();
$title=get_sub_field('image_carousel_discription');
$image = get_sub_field('image_carousel1');
if( !empty($image) ):
// vars
// thumbnail
$thumb = $image;
$i++;
?>
<h1 data-row="< echo $i; >"> <?php echo $title ?> </h1>
<li> <img data-row="< echo $i; >" src="<?php echo $thumb ?>"/> </li>
<?php endif; ?>
<?php
endwhile;
endif;
?>
?>
Keep the title hidden in the beginning and then show the title when selected-item class is applied. If h1 is going to be always next to the image tag then use the + selector.
h1 { display: none; }
.selected-item + h1 { display: block; }
Or you can detect a class change event using jquery.
function checkForChanges()
{
if ($('img').hasClass('selected-item'))
$('h1').css('display','block');
else
setTimeout(checkForChanges, 500);
}
checkForChanges();
$("#click").on('click', function(){
$('img').addClass("selected-item");
});
h1 { display: none; } /* Keep the title hidden in the beginning */
/* Show the title when selected-item class is applied */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/100x100" width="100" height="100">
<h1>title</h1>
<div id="click">click me</div>
I have this class for my menu: .site-header-menu
and I have this class for my content: .content
what should I do to catch .content when .site-header-menu is displayed?
I already tried this but it doesn't work:
.site-header-menu + .content{
opacity: 0;
}
Do you have some suggestion? This kind of things are possible using css?
I'm using Wordpress so this is my php struture in header.php. The idea is to hide the content of my page template when site-header-menu is open:
<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
<!--<button id="menu-toggle" class="menu-toggle"><?php _e( 'Menu', 'twentysixteen' ); ?></button>-->
<button id="menu-toggle" class="menu-toggle" data-title="<?php the_title(); ?>"><?php the_title(); ?></button>
<div id="site-header-menu" class="site-header-menu">
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>" data-title= ''>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
How is .site-header-menu being displayed? Is a class being added to display the menu or is its display property being directly manipulated by JavaScript? There is no indication how you can tell if the menu is displayed?
.site-header-menu + .content{
opacity: 0;
}
The above rule, because of the plus sign, will only apply if the element with class content is immediately following the element with class site-header-menu in the DOM. For example:
<div class="site-header-menu">
... menu stuff ...
</div>
<div class="content">
... content stuff ...
</div>
This might be the problem, but without actually seeing the output HTML it's hard to say.
If you are using PHP or JS to toggle the visibility of the menu you could potentially add/remove an additional class to .content that will hide/show it based on the menu being displayed or not.
/* CSS rule to hide the .content element */
.content.hideMe {
visibility: none;
}
// pseudo-script click event handler (NOT REAL SCRIPT!)
function menuButtonClick() {
if (menuCurrentlyDisplayed) {
// menu is already displayed so hide it and show content
hideMenu;
removeClass(".content", "hideMe");
} else {
// menu is not yet displayed so show it and hide content
showMenu;
addClass(".content", "hideMe");
}
}
If you could post your output HTML, or set up a fiddle for us to take a look, it would be helpful.
I'm using the Sparkling theme on a Wordpress site. The theme uses Flexslider within a div at the top of the page. Each slide contains an image along with a div containing a post title and excerpt.
The slider is built within header.php like in this function:
function sparkling_featured_slider() {
if ( is_front_page() && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
echo '<div class="flexslider">';
echo '<ul class="slides">';
$count = of_get_option( 'sparkling_slide_number' );
$slidecat =of_get_option( 'sparkling_slide_categories' );
$query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count ) );
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
echo '<li>';
if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
echo get_the_post_thumbnail();
endif;
echo '<div class="flex-caption">';
if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
if ( get_the_excerpt() != '' ) echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
echo '</div>';
echo '</li>';
endwhile;
endif;
echo '</ul>';
echo ' </div>';
}
}
endif;
And the resulting HTML looks like this:
<div class="top-section">
<div class="flexslider">
<ul class="slides">
<li>
<img width="1920" height="512" src="http://pathtoslider.jpeg"
class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
alt="slide1"
srcset="pathstodifferentresolutions.jpg"
sizes="(max-width: 1920px) 100vw, 1920px" />
<div class="flex-caption">
<h2 class="entry-title">Tomatoes</h2>
<div class="excerpt">Knowledge is knowing that tomatoes are a fruit. Wisdom is knowing not to put them in a fruit salad.</div>
</div>
</li>
..more slides..
</ul>
</div>
</div>
<div class="container main-content-area">
By default it suppresses the flex-caption on small screens by setting display:none in a media query, but I want to display it, so I set the display to inline in my own media query.
This leads to another problem because the whole top-section div is the height of the image and there isn't necessarily room for the flex-caption.
I would like the bottom of the entry-title to be aligned with the bottom of the image, and the excerpt immediately below the image, which I accomplish like this:
#media (max-width: 768px) {
.flex-caption {
display: inline;
bottom: 0;
}
.entry-title {
position: absolute;
bottom: 0;
}
.excerpt {
position: absolute;
vertical-align: top;
}
}
but this doesn't resize the top-section div, so I'm overwriting the main-content-area.
I've tried lots of different things, including trying height:auto just about everywhere.
I can't figure out how the slider height is set. It seems to be within get_the_post_thumbnail. Is that the issue?
You can try setting image height in functions.php
function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ).
I want to hide the site-title and site-description on IE9 and lower. I've hidden them via the appearance option, so its hidden on Chrome, Firefox, IE10+, but it still appear on IE9 and lower.
I've tried to add all this css, but I can not manage to make it work:
.site-description {
font-size: 10pt;
}
h2 .site-description {
font-size: 10pt;
display:none !important;
}
#title_subtitle{
display:none !important;
}
#site-title a, #site-description a {visibility:hidden !important;}
.site-title a, .site-description a {visibility:hidden !important;}
I've also tried to delete them in the header, but doesn't work:
the part of the header is:
<div id="masterheader"><header id="masthead" class="site-header" role="banner">
<a class="home-link"<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<div id="logo_and_title">
<img class="header-logo" src="http://thibaultrolando.com/vinacotheque/wp-content/uploads/2014/03/logo.png"/>
<div id="title_subtitle">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
I'm currently working with a child-theme of twenty-thirteen. I've tried to do this in the style.css and also ie.css from my child, and also the original theme, but it doesn't seem to work ...
If you want to hide them via php, you should be able to remove them from your theme's header.php file. Try commenting out the lines that generate the text. If that does the trick, you can delete them.
<div id="title_subtitle">
<!--
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
-->
</div>