Changing post layout…child theme or block editor?

[PolyWogg]

I tried to post a Q the other day, but seems to have disappeared. And I had nice formatting too…Basically I want to change the layout of my site, which seems like a child theme option, but I could do it on a post-by-post basis with blocks.

I have side bars to the right, and my content to the left. I essentially want to create a two-column area for my content with:

a. Narrow column 1 which would have my Featured Image in it (my FIs correspond to the category so it is a way to quickly scan and see what that post is about) + I want to include a stylized date in a box like a classic Google Calendar date

b. Wide column 2 which would be my normal content for the post.

As I said though, I’m not sure if I should be looking to modify a theme, using something like Elementor to play with design and layout, or just do it internally for posts with blocks. Any guidance welcome…

Paul

[scrambler]

If this is for the posts, then you can simply use the existing Theme options for the featured image found in Main Option > Post Specific > Featured Image.

To get the 2 column layout for Featured image and content, use the FI location “Beside Page/Post, No wrap”. Beware you have different setting available depending if it is a blog page with excerpts or a blog page with full posts, or the single post page.

Once you have the base layout setup, we can help fine tune the details and styling. Just give us a link to the page and precise description of what you are after.

[Weaver]

Weaver Xtreme has many options to change a post’s layout, as well as the ability to add custom CSS. Between these two tools, there should be no need at all for a child theme.

But, many many folks are switching to either Elementor or the Block Editor for more creative layout of pages. Mainly, they include a bunch of pre-designed layout features that end up giving a good consistency to site design.

 

[PolyWogg]

Thanks Scrambler, Weaver. You summed up what I thought were my options perfectly. I’d prefer to stay within theme controls without having to go to the block editor or Elementor (or other page builders) to accomplish it.

I played with the styling, moved the FI to the side as Scrambler suggested, and it is pretty close to what I want. The part that confuses me now is what to do about coming up with a “date” to the side as well.

On this page, you can see what I have in mind for putting the FI out to the left:

Deciding if I can use blocks for WordPress editing

I haven’t quite figured out what the default size will have to be for my FIs, but I realized if I don’t do them all the same size, then they will shift my text farther in on larger images. I’ll have to make them more standard (which is a good practice anyway, I’ve just ignored it until now).

Now just above that FI, or just below, haven’t decided, I would like to put the date in a small rectangular layout. Here is a sample image that is close:

https://www.123rf.com/photo_54048368_stock-vector-october-18-vector-flat-daily-calendar-icon-date-and-time-day-month-holiday-.html

This one too comes VERY close:

https://www.sitepoint.com/create-calendar-icon-html5-css3/

I’d like the following in the date:

______________
|    MONTH   |
|============|
|    DAY #   |
| (big font) |
|     Day    |
|============|
|     Year   |
|============|

I would almost consider putting it up beside the Title and moving the FI down, or putting it outside the FI so it would be like three columns — calendar box, FI, Title and content would be below lined up with the Title.

From those other sites though, if I was to try and do it as a block inside the page, it seems to me that I would need either a short cut to calculate the texts or I’d have to do it manually. I don’t see a way to add that function without touching PHP codes.

Is there a way to do it in a theme with just CSS?

Welcome any guidance…

Paul

 

[scrambler]

We can do a lot of customization with CSS, but we need to know exactly what you want and get a link to the post page with the base layout

[PolyWogg]

Hi Scrambler, thanks…apologies for confusion, perhaps my layout info in the last post didn’t show. My “base” post is this:

https://polywogg.ca/deciding-if-i-can-use-blocks-for-wordpress-editing/

I followed your earlier advice and placed the FI “Beside Post/page, no wrap”. I’ll need to play with the consistency of the actual size of my images in what is saved, but that’s what I want for the FI location, so that is done. On many sites, they put the author picture there, but since I’m the only author on my blog, I want to put the FI there. I’m checking that one as “done”.

However, I don’t like the date just being under the title on that post. What I would like is something like this mockup that I just did in PowerPoint to show the placement of a desired date block::

http://polywogg.ca/website-layout-1/

I also resized the block a bit under a larger FI default size, and it looks like this:

http://polywogg.ca/website-layout-2/

But I don’t know if I can “do” that with just CSS, move the date over like that and parse the three fields (month, day of the month, year) into three lines (I used a table in Powerpoint, red background for top row, white for the other two, no border). I’d love to get a bit fancy and make the calendar date look like a keyboard-style push button but that seems like something to play with if I can even get the text over there.

I could do it manually in WP blocks, but if I change the date of a post, not sure how it would update.

Paul

[scrambler]

The basics of using CSS to move and format the date would be with a rule like below, placed in the theme Global; Custom CSS Rule box

.entry-meta {position:absolute;
width:80px;
margin-left:-120px;
margin-top:100px;
text-align:center;
background-color:grey;
padding:5px;
border-radius:10px;
font-family:arial;
font-weight:bold;
}

Now with the default Info line, there is no way to target the various pieces of the date individually, I can try using Plus Custom Info lines, but need to know if you have the Plus Plugin.

Note we can restrict that styling to the blog page by changing the selector from

.entry-meta

to

.blog .entry-meta

 

[scrambler]

If you do have the plus plugin, you can put the HTML below in main Options > Post SPecifics > Custom post Info lines > Top Post Info line box, so that we can target and style each piece separately.

<div class="mymeta">
<span class="mymonth">%month%</span>
<span class="myday">%day%</span>
<span class="myyear">%year%</span>
</div>

Then change the CSS I gave you previously to

.entry-meta .mymeta {position:absolute;
left:100px;
margin-top:100px;
text-align:center;
font-family:arial;
font-weight:bold;
border:2px solid black;
background-color:white;
}

.entry-meta .mymonth {background-color:red;color:white;clear:both;padding:5px;display:block;}
.entry-meta .myday {clear:both;display:block;font-size:150%;}
.entry-meta .myyear {clear:both;display:block;}

 

You can adjust the position with the “left” and “margin-top” values.

NOTE:

That layout does not look good on mobile as the text portion becomes too small.
You can change it by moving the right portion under the featured image using the rules below
You would have to decide where the Date stamp should go. The rules below place the featured image and the date stamp side by side, but we can do different things

 

.blog.is-mobile .post-area {clear:both;position:relative;overflow:visible;}
.is-mobile .entry-meta .mymeta {left:auto;right:10px;top:-150px;}

 

If you only want the layout to change on phone (not small tablets) replace .is-mobile by .is-phone

[PolyWogg]

I don’t have plus anymore, but I may upgrade just to do this! 🙂

.entry-meta-gicons .entry-date::before {display:none;}

I added a single line to get rid of the little icon before it, using inspect element. So before I get too much farther, I should decide on the appropriate width of my FIs.

When I share things to FB now, sometimes it takes my FI, sometimes my header, sometimes my first big image, all of which I understand is because in the cascade, it is jumping over my featured image in some cases because they are too small. Do you know what the default FI size should be for sharing to FB? Do you know if 150 px for my FIs is enough?

I also need to figure out how to get it to display on pages too, for some reason, the meta info never shows on pages. Hmm…

Paul

 

 

[PolyWogg]

Sorry, I didn’t explain that size question very well. When I share to FB, I want the small FI to be to the left of the content that is being shared (almost like an profile pic for the post, rather than header).

[scrambler]

The theme has no way of handling FB sharing. Plugins like Yoast SEO might

Not sure what you mean by

I also need to figure out how to get it to display on pages too, for some reason, the meta info never shows on pages. Hmm…

What pages? please provide a link to these pages to clarify

[PolyWogg]

Thanks Scrambler, I wasn’t looking for the theme to handle the FB sharing, sorry for confusion, more thinking out loud. Sometimes when I share my posts, it uses the FI if it is big enough; for the smaller FIs, it doesn’t. There’s a trigger size for FB to take it, if not it defaults to header image or main image in the post. No worries.

For my pages, I would do the same thing as I am doing to posts. Except I noticed on my pages that the metadata isn’t showing (no date, author, comments link). For example:

http://polywogg.ca/tv-reviews-series/

Now on to look at Plus for the other part!

Paul

[scrambler]

The presence of the meta info line is set in a few places.

Globally in Main options > Post Specifics > Post Meta Info Area > Hide Top Info and Hide bottom Info

Then on each post editing page Post Blog / Archive tab.

Check what you have in both these  locations

[PolyWogg]

Found the post specific stuff, none of it was hidden. The only thing checked was hiding the author bio, name, etc. since there is only one author: me.

For the page specific stuff, nothing checked there either. I over-rode the “blog page default FI” and moved the FI manually for the page to the same place (beside page), but no page meta info. I also don’t see page meta info in the customization either, just post meta.

Paul

[scrambler]

I did not realize you were speaking about a page and not a post.

There are no page meta info line

[PolyWogg]

Doh! regarding page meta info. I just assumed I’d someone blocked it. Sigh.

On the other hand, is it rude to shout “WOOHOO!”. Your code snippets + Plus worked perfectly. I’m not sold on how it looks on mobile yet, but it’s functional for now. Now I just have to make sure all my FIs are 150 wide so that the date lines up properly. It’s a bit of work to fix, but I know how at least. 900+ posts are done in one go, another 180 will likely require me to do it manually, but I already need to edit those posts anyway.

Thanks a million! 🙂

Paul

[Author]

Posts