Acessing HTML element with no specific tag on it [closed]

Your <h3> isn’t closed.

The Proper Way:

The real way to fix it would be fixing the PHP. In one of your template theme files you’ll have

<div class="post-header">
    <?php echo get_the_date(); ?>
    <h3 class="title"> <?php the_title(); ?> <h3>
</div>

You’ll want to delete the get_the_date() line.

If your theme is from an author that updates regularly, and you don’t want your changes overwritten by an update – you might want to explore child-themes, as this is often a use of them.

The Cheesy CSS Way:

You can’t select the text of an element, however you can just layer the h3 on top of the text – effectively hiding it. Since it’s a date, you know the text isn’t going to be crazy different from post to post so it’s not that hard to cover

.post-header {
  position: relative;
  z-index:1;
}
.post-header .title {
  display: block;
  position: absolute;
  top:-20px;
  left:0;
  width: 100%;
  background: white;
  z-index:2;
}

It’s somewhat fragile, and definitely an ugly approach – you’ll have to make it a bit more compatible with your theme – but it does solve the problem of the unwanted date.

The Javascript Way:

Probably the better way to do things (if you can’t edit the php theme files) would be with Javascript:

const hideMyDates = document.querySelectorAll('.post-header');
for (i = 0; i < hideMyDates.length; i++) {
    hideMyDates[i].childNodes[0].nodeValue="";
}

I used vanilla JS instead of jQuery because it makes small changes like this faster.

If you wanted to throw that in functions.php, you’d do:

<?php
add_action( 'wp_footer', function(){
    ?>
    <script>
    //.. the js here
    </script>
    <?php
});

Regardless of which method you choose, you should contact the theme author and let them know your need of a element on that date text! They might of simply forgotten it and may appreciate your contribution.

The Proper Way:

The Cheesy CSS Way:

The Javascript Way:

Related Posts: