Tag: WordPress

Blogging/Misc/WordPress

blog redesign

1 Comment

I’ve done another redesign of thingschange.blog! It’s not the first redesign I’ve done – probably the fourth or fifth change since I started with WordPress almost 10 years ago. Before then I used Google’s Blogger and I probably changed the design a few times using that blogging platform. The current change is more fundamental as I’ve gone from having a blog to having a web site with a link to the blogging pages. There’s no real reason for this change – I just like tinkering.

When I used to write software programs I was always tinkering, improving the code, adding new features. It’s a fun thing to do, if you’ve got the time.

The web address thingschange.blog now points to the main web page, whilst the blog pages can now be accessed through links on this page and from the top menu.

Computers

Tinkering with line height

Leave a comment

I’m very fond of tinkering with the format and layout of my blog! My previous post is somewhat rambling and I wasn’t too happy with the line spacing – it just seemed too spaced out. The solution was straightforward. Simply wrap the text of the post in the following:


<div style="line-height: 130%;">
blah blah blah........
blah blah blah........
blah blah blah........
</div>

For comparison, see below for how the line spacing of the main paragraph would look if it was given the same treatment.

I’m very fond of tinkering with my blog. My previous post is somewhat rambling and I wasn’t too happy with the line spacing – it just seemed too spaced out. The solution was straightforward. Simply wrap the text of the post in the following:

For blogs which use a different font and font size, the 130% may need to be revised. Interestingly, when I look behind the scenes, the original text has a line height of 1.75em whilst the formatted text has a line height of 130%. Now “em” is a typographic unit of measurement that is harder to understand than Einstein’s Theory of Relativity, so I’m happy to stick with using a percentage to alter line height.

[As an aside, I had to tinker with the height of the robot image in order to make it a square image (don’t ask) so this post is about height in more than one way.]

WordPress

Displaying posts using a WordPress shortcode

Leave a comment

Every now and again I like to change the look of my blog by using a different WordPress theme. Inevitably there’s tinkering required, but I’m a sucker for tinkering! My latest theme change (to the Apostrophe 2 theme) was to a magazine-style blog. Anyone landing on the home page has to click individual posts to see the contents of the post, then return to the home page, and then click on the next post. My son was critical of this but I did point out that followers of my blog don’t normally visit the home page as they simply get notified of a new post and go directly to the post and its contents.

But having previously investigated WordPress shortcodes, I knew there was a way of answering my son’s criticism. So now he can simply select from the blog menu the menu item “Most recent blog posts”. This opens up a blog page listing the 5 most recent posts, in full and one after the other.

To create this solution, all that’s necessary is for the blog owner to create a new page, give it a title like ‘Recent posts’, and then add the new page to the blog menu. The new page needs to contain the following text on the page:

[ display-posts include_date=”true” include_content=”true” wrapper=”div” posts_per_page=”5″ ]

This will display in full the 5 most recent posts. Of course you can change 5 to whatever number you like up to a maximum of 100 (WordPress limitation).

In reality I wasn’t too happy with the results produced by this simple code. I wanted to alter the format of the displayed date and time and I also wanted to separate the individual posts in a more pronounced way.

The solution involves adding code to display the most recent post, followed by a separator, followed by the next most recent post, followed by a separator, etc etc. Here is the code, without further explanation, to display the 5 most recent posts with a separator between each post.

[ display-posts include_date=”true” date_format=” (D, j M Y @ g:i a)” include_content=”true” wrapper=”div” posts_per_page=”1″ offset=”0″ ]

< hr style=”width: 80%; height: 8px;” / >

[ display-posts include_date=”true” date_format=” (D, j M Y @ g:i a)” include_content=”true” wrapper=”div” posts_per_page=”1″ offset=”1″ ]

< hr style=”width: 80%; height: 8px;” / >

[ display-posts include_date=”true” date_format=” (D, j M Y @ g:i a)” include_content=”true” wrapper=”div” posts_per_page=”1″ offset=”2″ ]

< hr style=”width: 80%; height: 8px;” / >

[ display-posts include_date=”true” date_format=” (D, j M Y @ g:i a)” include_content=”true” wrapper=”div” posts_per_page=”1″ offset=”3″ ]

< hr style=”width: 80%; height: 8px;” / >

[ display-posts include_date=”true” date_format=” (D, j M Y @ g:i a)” include_content=”true” wrapper=”div” posts_per_page=”1″ offset=”4″ ]

Good luck!

Computers/WordPress

Still tinkering

Leave a comment

I used to be a computer programmer and I haven’t lost the pleasure to be had from figuring out how to alter or fix anything related to software. Nowadays this is likely to be exploring web design using HTML and CSS rather than writing computer code.

Using CSS within WordPress it’s possible to alter the design of a blog (providing you’ve paid a little extra for the upgrade). It can sometimes be quite a challenge. Here is an example of before and after screenshots of some recent changes I made to how an image gallery is displayed. I wanted to remove the Comment area, the view full-size option, as well as to centre the description text and to emphasise the ‘close gallery’ icon at the top. For the really curious, a screenshot of the CSS code is also shown.

Before CSS edits

After CSS edits

The CSS code!