how to remove metadata from the posts of my blog?

Question

I have a blog powered on Wordpress platform and hosted by Altervista; I purchased the second-level domain .com, so I should be able to improve and modify my blog however I want. I'm on the ComicPress theme (not pre-installed) and the current URL is still "name_of_my_blog.altervista.org", but theoretically I may turn it into "name_of_my_blog.com".

I created a post and I want to hide metadata such as: author name, date of publication and status (private/public). In other words, I just want the content and the title of the post to be the only visible objects when the user surfs the blog. I've been trying modifying the style sheet style.css but it didn't work. More specifically, what I've been trying so far is:

• I selected from the menu Appearance -> Editor -> Stylesheet (style.css) and I found the line .comment-meta { and edited the display function by writing none instead than inline, see pictures below ->

• It didn't work, so I also added the string <?php remove_meta_box( 'authordiv', 'post', 'normal' ); ?> at the bottom of the sheet, see picture below ->

• It didn't work, so I substituted the previous line with the following:

  .post-author, .posted-on{display:none!important;}

In all cases I uploaded the .css sheet and opened the permalink of my post, but I still see the author name and the date of publication.

How may I remove these metadata from my posts?

Answer 1

You should modify the page templates directly or as a child theme in order to remove the items you don't want visible.

CSS could hide some portions visible to the user but the data is still written to the page by PHP. Google will still see it.

Another thing to note is PHP doesn't render in a .css file - so adding code to a stylesheet will only give your CSS errors. If you want to use hooks, add code functions.php

Answer 2

That's the way I solved the issue:

• I opened the .css file from Appearance -> Editor -> Stylesheet (style.css);
• then I opened the permalink of the post I wanted to modify on Chrome browser ;
• I right-clicked on the items I wanted to hide and selected "Inspect element"->

• By inspecting elememts, Chrome opens a developer tools window: here I may find the objects I wanna hide from my blog page->

:

in this case I want to hide the slogan "Hosted by Altervista" on the bottom of my page. By right-clicking and selecting "Inspect element" a yellow label appears and shows "av-credit-link": that's the coded name of the phrase I want to hide.

• So I go back to the css file and write the following string on the bottom of the page->

  .av-credit-link, .posted-on { display:none !important;}

• I upload the file for saving.

In other terms, I have to substitute the first part o the string above with the name of each one of the items I want to hide from my blog page and then copypaste on the .css sheet.

For instance: I succeded in hiding the author-name, the date, the time of publication, the tags, the copyright info (name of the template, etc..) and the title by writing the following->

Now when I open the permalink of my post I just see the items I want to be visible there.