[Resolved] How I can do this on post page?

[Anonymous]

Hello,

I would like to make some changes in my post page that would be the following: (first url on textbox bellow)

1. I would like to show excerpt text after title
2. Show Category and Tag
3. After excerpt text would like to show “Author name” like on this page place on textbox bellow the second url
4. Then show postdate and show avatar image on the left side of both like on page on point 2 and on the right side would like to show category on same row of author name and tag on the same date row
5. Would like to show images full width on post

Thanks,

Sara

[Leo]

Hi there,

Are you referring to single posts or the posts/blog page here?

[Anonymous]

I am referring to single post page, where post are publish as you can see on first url on textbox.

[David]

Hi there,

lets deal with a couple at a time.

1. Create a new Hook Element:

Add this to the content:

<p class="entry-subtitle"><?php echo get_the_excerpt(); ?></p>

Select the after_entry_title hook
Check: Execute PHP
Set the Priority to 5.

Set the Display Rules to Single Posts

3 & 4 This example explains:

https://docs.generatepress.com/article/entry-meta-style/#example-2

5. Are you using the Block Editor? – if so, you can select the image and in the toolbar select the Wide width option.

[Anonymous]

Hello David,

I manage to do steps you mention

1) Its showing excerpt just want to give a <br> of space between title and excerpt

2) Pending

3) It is showing just would like to add static text => “Published $postdate” and under it “By $authorname” and if possible remove authorname link

4) Mention on point 3 and they seem to show backwards should be first date and second author name

5) Yes I am using block editor but, I don’t seem to find the option you mention

[David]

1. Add this CSS:

.entry-subtitle {
    margin-top: 1em;
}

2. Pending

3. Use this CSS – instead of the CSS provided in the Meta example document:

.entry-meta, .entry-meta .meta-data {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.entry-meta .meta-data {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column-reverse;
    margin-left: 0.75em;
}
.entry-meta .meta-gravatar img {
    width: 40px;
    border-radius: 50%;
}
.entry-meta .meta-data .posted-on:before {
    content: 'Published';
    margin-right: 0.5em;
}
.entry-meta .meta-data .byline:before {
    content: 'By';
    margin-right: 0.5em;   
}

Remove link for Author:

https://docs.generatepress.com/article/generate_post_author_output/#remove-link

5. This images shows what the alignment toolbar icon looks like – click that and select Wide:

http://devsite337160.apps-1and1.net/wp-content/uploads/2020/07/Screenshot-2020-07-19-at-11.29.02.png

[Anonymous]

Hello David, yes its seems to be working just a few more points to finish:

1) Done

2) a) On single post to create category on top before title with same style as on site: https://todateen.uol.com.br/novo-filme-da-netflix-estrelado-por-lily-collins-e-amanda-seyfried-tem-primeiras-imagens-divulgadas/ but, with this pink color as background color #FF5481.
b) Show tag like on sane site as 1 at the bottom where it says “Related topics” with black font and # at beginning of nametag
c) Would like to remove folder icon for category and tag icon for tag

3) There is an extra space between tagname “By” and “author name” and same with “Publish” and “postdate” how I can remove that extra space?

4) Under “By $authorname” would like also to add “Latest updated” and as variable use “latest post revision date”? using same date format as on publish.

5) Yes your solution works but, not as feature image this option shows when adding image from media library, would like to do this for feature image on post if possible.

Thanks again David!

[Tom]

Hi Sara,

2. To move the categories, let’s do this:

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
    return array_diff( $items, array( 'categories' ) );
} );

add_action( 'generate_before_content', function() {
    if ( is_single() ) {
        generate_do_post_meta_item( 'categories' );
    }
} );

For the tags, let’s try this CSS:

.tags-links:before {
    font-family: inherit;
    content: "Related Topics:";
    width: auto;
    font-weight: bold;
    text-transform: uppercase;
}

.tags-links a:before {
    content: "#";
}

To remove the folder from categories, do this:

.cat-links:before {
    display: none;
}

.cat-links a {
    padding: 5px 10px;
}

3. These spaces are controlled by your CSS. For example:

.entry-meta .meta-data .byline:before {
    content: 'Por';
    margin-right: .5em;
}

Adjust the margin-right until it’s good.

4. You want the updated date below the author, or below the published date?

5. Un-checking the “Display padding around featured images” option in Customize > Layout > Blog may do the trick.

[Anonymous]

Hello Tom,

Thanks a lot for the reply almost everything is working, just need the following:

1) Done

2) a) Missing style for category like on site I mention
b) Done
c) Done

3) Done

4) I would like to place update date on top of publish date, also I would like in both also the time was updated and publish but, I need to add this text “a las” between date and time in both like happens on this site: https://es.ign.com/ea-access/167026/news/ea-eliminara-origin-en-pc-a-cambio-de-una-nueva-aplicacion

5) Done

Thanks again!

Sara

[Tom]

2 a) Try this:

.cat-links a {
    background: #ff005b;
    color: white;
    transform: skewX(-15deg);
    display: inline-block;
    font-size: 15px;
    margin-bottom: 5px;
}

4. You can learn how to add the time to the date here: https://wordpress.org/support/article/formatting-date-and-time/

Then remove this CSS:

.entry-meta .meta-data .posted-on:before {
    content: 'Publicado';
    margin-right: 0.3em;
}

And add this:

.posted-on .updated {
    display: inline-block;
}

.posted-on .updated:before {
    content: "Updated on ";
}

.posted-on .published {
    display: block;
}

.posted-on .published:before {
    content: "Published on ";
}

[Anonymous]

Hello Tom, almost done just 2 last things please:

1) Done

2) a) This is showing correctly the only thing I would like to change font style on it like on top menu which is the following style:

color: #ffffff;
font-family: "Roboto", sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 18px;

b) Done
c) Done

3) Done

4) This is showing great just would like to remove link from post date and update date.

5) Done

Thanks!

Sara

[Tom]

2a) Have you tried adding those values to the existing CSS I provided? Should work.

4. This should help: https://docs.generatepress.com/article/generate_post_date_output/#remove-link-from-date

[Anonymous]

Hello Tom,

2a) Yes I did just need to change font style like I mention all other styles are correct.

4) I will check it and get back to you tomorrow.

Thanks

Sara

[Tom]

You just need to replace the existing block of code I shared with this:

.cat-links a {
    background: #FF5481;
    transform: skewX(-15deg);
    display: inline-block;
    font-size: 15px;
    margin-bottom: 5px;
    color: #ffffff;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
}

It combines the existing stuff with the additional styling 🙂

[Anonymous]

Hey Tom,

I manage to make all changes just one last question, the only thing I did not manage to do is to remove author link, I have check link you provided: https://docs.generatepress.com/article/generate_post_author_output/#remove-link

The only thing I don’t understand is where I place that code? Is it on functions.php or do I create a phpsnippet like before?

Thanks again! 🙂

[Author]

Posts