Remove Category Tag line from posts

Hello @wjb64,

We can remove the category tag line with the help of custom css. Please apply the below given css under Appearance -> Customize -> Additional Css-

.single div.postmetadata:nth-child(4) {
display: none;
}

Kind regards,

Manoj

Hi,

You cannot remove the tags only, by using custom CSS.. you should open theme file content-postmeta-single and remove this part:

<?php if(has_tag() ) : ?>
	<?php echo '|'; ?> <?php printf(__( 'Tag: %s', 'leftside' ), get_the_tag_list('', __( ', ', 'leftside' ) ) ); ?>
<?php endif; ?>

But if you want to remove Categories and Tags (and post format) from a single post, use this custom CSS:

.single .postmetadata {display:none;}

I think the previous response is meant for another theme.

Guido

Thank you both! But I’m a bit lost. My editor doesn’t look like the examples you are showing. Here is what mine looks like in the “Post” portion of the editor:

/* POST */
.post-list {clear:both; margin:0 0 20px; border-bottom:1px solid #ccc;}
.post-single {clear:both;}
.post-title {margin:0 0 20px;}
.post-title a:hover {color:#333; text-decoration:none;}
.post-title-single {margin:0 0 20px;}
.entry-content {clear:both; padding:0 0 20px;}
.sticky-title {margin:0 0 20px; padding:2px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center;}
.postmetadata {clear:both; margin:0 0 20px; padding:5px 10px; background:#f8f8f8; border:1px solid #ccc; border-radius:5px;}
.more {clear:both; padding:0 0 20px;}
a.readmore {float:right; padding:2px 5px; background:#e77776; color:#fff; text-decoration:none; border-radius:5px;}
a.readmore:hover {background:#666; color:#ddd; text-decoration:none;}

Am I in the wrong place to make the edits you are suggesting?

Here is “Post Formats” in my editor

/* POST FORMATS */
.format-aside .post-title, .format-image .post-title, .format-video .post-title, .format-gallery .post-title, .format-audio .post-title {font-size:1.45em;}
.format-aside .post-title-single, .format-image .post-title-single, .format-video .post-title-single, .format-gallery .post-title-single, .format-audio .post-title-single {font-size:1.45em;}
.format-image .postmetadata, .format-video .postmetadata, .format-gallery .postmetadata, .format-audio .postmetadata {font-style:italic;}

I found it, Thank you for the help!

I still have a gray bar where the categories and tags were. Is there a way to remove that bar? Here is what remains in that section of the code

<?php
/*
* Postmeta used by file single.
*/
?>

<div class=”postmetadata”>
<?php $format = get_post_format(); ?>
<?php if (has_post_format() ) : ?>
<?php echo ‘|’; ?> <?php printf( __( ‘Format: %s’, ‘leftside’ ), sprintf( ‘%2$s‘, esc_url( get_post_format_link( $format ) ), get_post_format_string( $format ) ) ); ?>
<?php endif; ?>
</div>

If you want to remove whole section, use this custom CSS to hide it at a single post page:

.postmetadata ~ .postmetadata {display:none;}

Now the first postmetadata section at a single post page remains.

Guido

ps. if you past code again please click the [code] button before and after your code.

Thank you Guido! I’m just a little lost… Am I in the right spot? If so, Where exactly do I place the CSS that you provided? Here is where I am…

Edit Themes
LeftSide: Single Post (single.php)

<?php
/*
* The template for displaying single post.
*/
?>

<?php get_header(); ?>
<div id=”content”>
<?php while (have_posts()) : the_post(); ?>

<div id=”post-<?php the_ID(); ?>” <?php post_class(‘post-single’); ?>>
<h1 class=”post-title-single entry-title”><?php the_title(); ?></h1>

<?php get_template_part( ‘content-postmeta’ ); ?>

<div class=”entry-content”>
<?php the_content(); ?>

<?php wp_link_pages( array(
‘before’ => ‘<div class=”pagelink”>’ . __( ‘Pages:’, ‘leftside’ ),
‘after’ => ‘</div>’,
) ); ?>
</div>

<?php get_template_part( ‘content-postmeta-single’ ); ?>
</div>

<?php comments_template(); ?>

<?php endwhile; ?>

<?php edit_post_link( __( ‘Edit’, ‘leftside’ ), ‘<div class=”edit-link”>’, ‘</div>’ ); ?>
</div>
<?php get_footer(); ?>

You don’t have to change theme file itself, just add this CSS at the custom CSS page in your Customizer.

Guido

ps. if you past code again please click the [code] button before and after your code.

Hi again,

By the way, when I visit the website that you’ve added in your first post, I notice there’s no date and no author in the first postmetadata section. Did you remove that part from my theme?

Guido

Hi Guido,

I used a plugin to remove the date/time stamp as well as the author. I am the only author and my posts are not time sensitive. The information I provide my readers is just as relevant today as it was 10 years ago or 10 years from now. So I didn’t want readers to overlook a post simply because it was written 3 years ago.

I’m still struggling with the

.postmetadata ~ .postmetadata {display:none;}

This is what I did:
`/*
Used to style the post and page TinyMCE editor.
*/

/* RESET STYLESHEET */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, ins, mark,
em, img, q, small, strong, sub, sup, b, dl, dt, dd, ol, ul, li, table, caption, tr, th, td {
margin:0;
padding:0;
border:0;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
vertical-align:baseline;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after, q:before, q:after {
content:”;
content:none;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* BODY */
body {background:none; color:#333; font-family:’Open Sans’, sans-serif; font-size:16px; line-height:1.5; word-wrap:break-word;}

/* HEADINGS */
h1 {clear:both; margin:0 0 10px; font-size:2.2em; line-height:1.25;}
h2 {clear:both; margin:0 0 10px; font-size:1.75em; line-height:1.25;}
h3 {clear:both; margin:0 0 10px; font-size:1.45em; line-height:1.5;}
h4 {clear:both; margin:0 0 10px; font-size:1.2em; line-height:1.5;}
h5 {clear:both; margin:0 0 10px; font-size:1em; line-height:2;}
h6 {clear:both; margin:0 0 10px; font-size:0.8em; line-height:2;}

/* LINKS AND HTML TAGS */
a {text-decoration:none; color:#21759b;}
a:hover {text-decoration:underline;}

strong, b {font-weight:bold;}
small {font-size:0.8em;}
big {font-size:1.2em;}
sub {vertical-align:sub; font-size:0.9em;}
sup {vertical-align:super; font-size:0.9em;}
ins, mark {font-weight:bold; background:none; text-decoration:none; color:#21759b;}
cite, em, abbr, acronym {font-style:italic;}
code, kbd, samp, var {font-family:monospace, monospace;}
pre {margin:0 0 10px; padding:5px 10px; white-space:pre-wrap; border:1px solid #999;}
blockquote, q {margin:0 0 10px; padding:0 0 0 20px; display:block; font-size:1.2em; font-style:italic; border-left:2px solid #999;}
address {margin:0 0 10px; font-style:italic;}
p {margin:0 0 10px;}
hr {height:1px; background:#999; border:0; margin:0 0 10px;}

/* ALIGNMENTS */
.alignright {float:right;}
.alignleft {float:left;}
.aligncenter {clear:both; display:block; margin-left:auto; margin-right:auto;}

/* TABLE AND LISTS */
table {margin:0 0 10px; border-collapse:collapse;}
table, th, td {border:1px solid #999; padding:5px 10px;}
table th {font-weight:bold;}

ul {list-style:square; margin:0 0 10px;}
ol {list-style:decimal; margin:0 0 10px;}
li {margin:0 0 0 20px;}
li > ul, li > ol {margin:0;}
dl {margin:0 0 10px;}
dt {font-weight:bold;}
dd {margin:0 0 0 20px;}

/* IMAGE AND VIDEO */
img {max-width:100%; height:auto;}

.postmetadata ~ .postmetadata {display:none;}

But it didn’t remove the gray bar. I’m obviously still doing something wrong. Any advice?

First, I have already told you that you don’t have to add this in the stylesheet of my theme. Use the custom CSS page in the Customizer in dashboard instead.

By the way, you have now added it in the wrong styleheet (file “custom-editor-style”) becasue that one is being used for the page and post text editor in dashboard.

Guido