-
Notifications
You must be signed in to change notification settings - Fork 0
Work on baseline theme for WordLand #71
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
Update -- I'm working with Scott Hanson on this. He and I have worked on quite a few projects together over the years, very productively and we know how to share notes with each other. I've asked him to, instead of exchanging emails that we post updates here to GitHub. The overall goal is to attract designers to this effort, because we need them to be successful. ;-) And of course I will post my updates here, or at least links to updates. And if people have comments, questions or suggestions about this work, please speak up. Happy to work in parallel with others too, but Scott will ultimately have the deliverable at the end of the process, which I hope won't last too long (we have a lot of other things to deliver). Scott is @scotthansonde on GitHub. |
Substack as prior artHere's a story on Substack written by one of my favorites, Heather Cox Richardson. I'm going to post some notes about what I see here, and for right now this is really good prior art. |
Notes about what's on a Substack story pageTop of pageTitle == 32px All are sans serif Body of story,font-size: 19px Serif NotesCategories don't show up at the top, or anywhere. Not sure they have the concept of categories. It seems a little nerdy for them actually if you think about it. The problem with categorization is well known. So for now, the categories can go in the footer until we figure out a way to give them more prominence. |
Here's a quick rundown on what we've done so far.
So far the child theme only has a minor update to the footer (text and text color). I haven't worked on WordPress themes in many years, so I'm learning the new block theme format as I go along. Luckily it is well documented, and ChatGPT has a good handle on it as well. 😃 We certainly appreciate any comments, tips, or contributions! |
BTW, the L in WordLand is always capitalized, esp in the product itself. ;-) Please call the theme WordLand Baseline. |
OK, the project is now named WordLand Baseline, the repository is at https://github.com/scotthansonde/wordlandBaseline. That's a good last commit for the day. 😃 |
BTW, when this is done, we'll owe a debt of gratitude to Scott. This is real work. |
I've just implemented Change 4, regarding the fonts for the body text. My notes are on my WordLand blog at https://wordland.shanson.de/2025/04/20/change-4-font-for-post-body/ |
@scotthansonde -- that is exactly how I hoped it would work. much much easier on the eyes. a screen shot. I'm going to add another item to the list, back in a minute. |
I added two new items, 9 and 10 to the list. https://wordland.shanson.de/2025/04/18/changes-to-make-on-scotts-blog/ I wrote a lot about the Posted In near the bottom and wanted to post it here so it could be discussed if people have comments.
BTW, this focus on Categories has made me wonder if we should display categories at all on the story page, but if the author is using categories, you definitely want it there. Another BTW -- a note to Automattic people -- why is there no RSS icon in the theme alongside twitter, facebook and instagram. The open web needs some love there! :-) And that's going to be item 11. ;-) TL;DR on item 10 -- Can we have JavaScript in the theme, if so, I'd like to make the Categories: item be done by JS, and if the JS isn't running, then it should not be there. |
I was able to implement items 10 (category list on a post) and 11 (RSS icon). We can include PHP code in the theme, so for the categories I overrode the default WordPress function. The styles for the categories aren't quite the same as before, but I'll check on that tomorrow, as well as write up my notes on the blog. I've run out of time for today. 😃 |
I've started looking at items 7 & 8 (list top and bottom margins). I haven't adjusted anything yet, but I've put up a post with a simple ordered list, since things might have changed since we increased the font size. @scripting if you get a chance, take a look a see if the changes you want still apply. Tomorrow I'll put up a status summary on all the change items. Since I've doing the easiest ones first and not going in order, it's not so clear what progress has been made. 😃 |
Thanks for sticking with it, and let me know when you need my input. (Seems like we've been here before on other projects!) I'm keeping busy working on learning the hacks you have to go through to get email-sending working reliably across the different email clients. I was flying blind on this stuff until ChatGPT. Now I get the answers. ;-) |
@scotthansonde -- added an item 12 to the list -- there doesn't appear to be a style for blockquote. I'll suggest a style for it in a bit. |
Added an item 13 to the list.
|
Also, a special request for the first item in the list.
I do a lot of reading on my tablet and every time I come to a page on the baseline site, this is the first thing I see. It's just so freaking wrong. Also I need to see the author, next to the date, in the line below the title. Item 3. Also we should experiment with a titleless post in the baseline site. I will do that right now. |
Result of title-less post experiment: https://wordland.shanson.de/2025/04/24/95/ Surprisingly, it looks great as-is. Once we have the author's name next to the pubdate we'll be really flying. Without a title you rely on the author's name even more that with those posts with titles. That's it. The only change I want is already on the list -- the author is even more important for titleless posts. |
You should be able to do that by removing the I should add, while we're mentioning the Twitter icon, that it may be good to update that Twitter icon to an X icon (also available in the Social Icons block used in that template). I'll see that it's done with the Retrospect theme too. |
Added number 14 to the list: https://wordland.shanson.de/2025/04/18/changes-to-make-on-scotts-blog/
|
BTW, this is a screen shot of the title-less demo on daveverse, which has virgin Retrospect theme, and now it's clear why removing all the extraneous stuff was so necessary. See if you can spot the actual post in this screen shot. Too much competition from the ads. We're going to do a totally uncluttered interface. And with that I want to make some bigger changes, will outline in next comment. |
@jeherve Thanks, that works! One question. Since this is a block theme, the proper (and only) way for the user to configure the social links is through the site editor, is that right? (Where, of course, they can add other services as they like.) If I switch Twitter to the X icon, add BlueSky and Mastodon, and activate them all, I get this: |
Corner-turnThis list overrides all previous lists.
Note that the list of previous articles is gone. Not sure about the left and right arrows, but if they stay they are in the footer. Once these are done, I'll do a new version of the master list. |
BTW, a call-out to Automattic people -- the sidebar list doesn't do the right thing with title-less posts. Here's a screen shot of such a list. This is a mistake. You're almost criticizing the author for not putting a title on the post, when we welcome posts without titles. That's true of WordPress as much as it is of WordLand (I've heard this from Matt). It could be interpreted as an error message. A much better approach is to take the first N characters of the body of the title-less posts, remove everything past the last blank, and if you truncated the text add elipses. Prior artIf you want prior art -- look at the blogroll in the right margin on scripting.com, expand some of the blogs in the list, you will eventually see a titleless post. A good place to look are Bluesky feeds, they don't allow titles, so every post is title-less! :-) For this application, you're going to need to set N to a smaller number, but the algorithm is the same. |
I've just uploaded a couple of minor changes:
Now (or more likely tomorrow) I'll start on the corner turn layout changes. |
Yup, correct!
This is something that comes up from time to time, and I think it's a conversation that's coming back now that more and more folks use WordPress for microblogging. Right now, WordPress purposefully leaves the title blank when you don't set one in the editor. Template functions and blocks that are built to display a title, however, only return A work-around you could implement in that theme is a code snippet you'd use to automatically set a post title. In this post, I've shared a snippet to create a post title using the date. If you wanted to pull words from the post content instead, you could do something like this: add_action(
'save_post_post',
'jeherve_add_default_title',
10,
3
);
/**
* Automatically create a post title from the first 20 words of the post,
* when said post does not already have a title.
* This is triggered when a post is saved, regardless of where you are saving.
*
* @param int $post_id Post ID.
* @param WP_Post Post object.
* @param bool $updated Whether this is an existing post being updated.
*/
function jeherve_add_default_title( $post_id, $post, $updated ) {
// If we already have a post title or if we have no content, bail.
if ( ! empty( $post->post_title ) || empty( $post->post_content ) ) {
return;
}
// Build our title. We'll use the first 20 words of the post.
$post_abstract = wp_trim_words( $post->post_content, 20, '' );
// unhook this function so it doesn't get triggered when we will save a hew version of the post with a title.
remove_action( 'save_post_post', 'jeherve_add_default_title', 10, 3 );
// Update post.
wp_update_post(
array(
'ID' => $post_id,
'post_title' => $post_abstract,
)
);
// Re-hook function.
add_action( 'save_post_post', 'jeherve_add_default_title', 10, 3 );
} For reference, here is a Core ticket where we could start that conversation again: |
@scripting talked about
The most distracting extraneous stuff is coming from the default settings of Jetpack (sharing buttons) and WordPress itself (comments active for new posts). I turned all those off on my site even before testing the theme, so that's why they don't show up on https://wordland.shanson.de/ For the baseline theme, we should disable the share buttons and comment forms, but allow the user to turn them back on in the site editor if they so wish, and make sure that's documented. That's very doable. |
I am so familiar with this discussion, I've had it over and over since the mid-late 90s. Programmers tend to want everything to have a title because it's easier for them, they believe this is what users want but overlook the fact that many of those users migrated from blogs to twitter partially because it simpler and didn't require or even allow titles. The only way to resolve this is to handle both approaches equally well and we know how to do that now, and if they ever ask we can help them immediately, but until they do it's pointless to argue, I've found. Much more productive imho to keep driving this project to completion, we're very close now with the work we're doing. This is where we're going to get action quickly because we're on board for it. BTW aren't including a list of surrounding posts in the baseline, for other reasons, so we won't have to change anything here. |
It's worth noting that the sharing buttons will not be active by default on self-hosted sites, but they are indeed added when you launch your site on WordPress.com. I would suggest leaving the comment form in the theme's single post template, though. Folks who want to turn off comments can do so in their site's general settings in Settings > Discussion. If they do so, the form will not be displayed on the site. |
@jeherve -- sorry -- no comments in the baseline theme. lots of thought and experience behind this. |
Scott, I'm going to do a straight HTML page with a story on it and tweak up the CSS just as a demo so we can stop communicating with me saying "try this" and you having to go render it. I want to send you something that I've already pre-tweaked CSS-wise. You have to interpret it. If something is too hard or impossible, I'll come up with something else or we'll give up on perfection and move on. |
Here's the aforementioned playground site. http://scripting.com/code/testing/placetoplay/ I hope it helps. I am going to take a break and come back for a fresh look, but I think it's about as good as we can do, and maybe some of the things can't be done. This is the current CSS. (Caveat -- I continue to tweak, the always current version is here.) body {
background-color: white;
}
.divPageBody {
width: 750px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 400px;
min-height: 400px;
padding: 3px;
border: 1px solid silver;
background-color: white;
font-family: Arial, sans-serif;
font-size: 24px;
}
.divPageTop {
text-align: center;
margin-bottom: 90px;
line-height: 110%;
}
.divPageTop .divSiteTitle {
font-size: 48px;
font-weight: bold;
margin-bottom: 10px;
letter-spacing: -0.04em;
}
.divPageTop .divSiteDescription {
color: rgb(123, 123, 123);
font-size: 14px;
}
.divStory {
}
.divStory .divStoryTitle {
font-size: 36px;
font-weight: bold;
margin-bottom: 2px;
letter-spacing: -0.04em;
line-height: 110%;
}
.divLineUnderStoryTitle {
color: rgb(123, 123, 123);
font-size: 14px;
margin-left: 2px;
}
.divStoryBody {
margin-top: 15px;
}
.divStoryBody p {
font-size: 18px;
line-height: 135%;
margin-bottom: 10px;
}
.divStoryBody h3 {
font-size: 20px; /* a little bigger than paragraph text */
font-weight: bold;
margin-bottom: 0;
}
.divStoryBody ol, .divStoryBody ul {
font-size: 18px; /* controls the size of the numbers or bullets */
margin-top: .5em;
margin-bottom: 1em;
}
.divStoryBody li {
margin-bottom: 3px;
}
.divCategories {
margin-top: 1em;
color: rgb(123, 123, 123);
font-size: 14px;
}
.divFooter {
margin-top: 50px;
border-top: 1px solid silver;
padding-top: 10px;
text-align: center;
font-size: 14px;
}
|
I'm not sure why, but JetPack has disconnected my site from WordPress.com. It's showing me a notification, and clicking asks me to log on to my WordPress.com account. @jeherve Is this perhaps a JetPack issue? This seemed to happen after I
It appears all users have also been disconnected from WordPress.com. @scripting It looks like you have to reconnect just like yesterday. |
I made a few small changes to the prototype for the baseline that I put up yesterday.
The problem with underlining a link is it draws too much attention to it as you scan the document. That discourages you from using links (I really do think about these things when I edit my writing). |
A question -- Would it be possible for the user to insert some custom CSS from the WordLand user interface? In other words via the wpcom API. We did this in Radio and Manila and it made a big difference for design-oriented users, like @zeldman. :-) It would get complicated based on permissions? |
I started a project for the baselinePlayground sub-project. https://github.com/scripting/baselinePlayground This was a big missing piece, made it a lot easier and less labor-intensive to iterate over and tweak the design. And made it easier to work with Scott. Worth preserving as a project, might come in handy for other WordPress-related projects? Couldn't hurt.. |
I just made a bunch of changes relating to line-height. It was a mess. Now the line-height is set in divStory, all the text in the story, title, byline, bodytext, comes under that style. |
One more tweak and now I think it's beautiful. http://scripting.com/code/baselineplayground/ The two new ingredients:
This is it. Finally got the right combo of spacing and font-size. |
Your site needs to be publicly accessible so the Jetpack (lowercase p ;) ) plugin can communicate with WordPress.com, and so third-party services like WordLand can push to the WordPress.com API, that will in turn push to your site. When you eventually push your site options from the local site back to the public site, you may overwrite some of the site options, like the data Jetpack uses to connect to WordPress.com. That may be what happened here. |
Time for my own corner turn. Rather than trying to tweak Retrospect to look like the Mockup, I'll make a new theme from the HTML and CSS from the Mockup and add WordPress fields to it. I've got the first draft working in WordPress locally, here's a screenshot. I'll put it someplace online tomorrow morning, it's getting late here. 😃 |
@scotthansonde -- Happy May Day! :-) |
The reboot of the theme is online at https://baseline.shanson.de/
My next steps will be to implement the WordPress Loop to get posts from the database and create the homepage and the single post page. |
At https://baseline.shanson.de/ I've now implemented the WordPress loop. The home is a list of the most recent posts, the title is a link to a single post. I also added "First basemen and pasta" as the most recent post. This is still a work in progress, but it's got the basic functionality of a WordPress site. |
At https://baseline.shanson.de/ I've added pagination links at the bottom of the home page and made a test post with WordLand. The titles that are links show an underline on hover, like Retrospect. I think next we need to decide what we want to show on the home page. Right now we show the last 10 posts (the exact number is set in the WordPress site settings, but we can override that). Would we rather show something else? |
That's the right thing to put on the home page. There is one other choice, where you put nav links on each page and show the current post on the home page, but it's a lot nicer for the reader imho to just lay out the most recent posts. That's how I've always done it on all my blogs. |
I see what you mean about pagination links at the bottom of the home page. I had not seen that in a blog before, what I used to have on Scripting News was infinite scrolling, which is a lot easier to implement than you might think. Is that an option here? If not, that's a fine approach. Might want to present it a bit differently (CSS and positioning). |
I asked earlier, but want to bring it up again -- is there a possibility of the user providing CSS on the site level or the story level? It's always been a very popular power user feature. Not a huge deal at this point, but if there's something to discuss, now would be a good time. ;-) |
|
It's not on GitHub yet, but here it is if anyone wants to take a look: wordlandBaselineMockup-8.zip. |
@scotthansonde -- i need to re-establish my connection with Scott's WordLand, but I don't remember how to do that, where I need to go. Once there, I'm pretty sure it'll come back to me. |
@scotthansonde -- never mind, i figured it out. for future reference
I think this should be included in the basic WordLand user howto page, yes? |
My notes re the current baseline. https://wordland.shanson.de/2025/05/04/143/ As I read your notes Scott I was relieved that you were doing this and not me. My mind is already overloaded with all the different pieces of the project. Adding PHP and site admin would have made it virtually impossible to work on the WordLand side, and when I switched back to it, I might never get back to where I am now. But I feel like we're getting there now. |
I've made some notes of my own: https://wordland.shanson.de/2025/05/05/151/. Now I have a to-do list for the next couple of days. 😃 |
@scotthansonde -- let me know if there's anything I can help with. I made one change to the CSS, on .divStory I took out the border and padding. Updated in the repo. https://github.com/scripting/baselinePlayground/blob/main/styles.css Visible in the demo. |
@scotthansonde -- other notes.
|
@scripting I made a couple of updates to Scott's WordLand:
|
For feature requests that will take more than a few minutes to implement, I'm going to start making issues on my theme repository scotthansonde/wordlineBaseline so I can keep better track of them. The display of titles will be first one 😃: scotthansonde/wordlandBaseline#6.
|
I was wrong about the display of titles when the title is empty. It did take only five minutes to implement. 😃 It's now active on Scott's WordLand. I still need to make the post title font smaller on the home page than on the story page, so that's a task for tomorrow. |
Background
A few weeks ago I asked for help creating a new theme for my test site, the goal was that this would lead to a baseline theme we could recommend to people getting started with WordLand who may not have much or any experience with WordPress.
It's also a good idea to show people how to get a good result with your product, even if they have plenty of experience with WordPress.
It took a few iterations to define the project, it was complicated because there are two worlds joining up here. I come from another era of web content management systems, it's almost like Klingons meeting Romulans, we have different names for things, and our focus was on writers, so I tend to think in those terms, and as a result so does WordLand.
So I've got a new test site on Scott Hanson's server. I've started by putting together a new list of changes we need as part of the iteration that will get us to the baseline theme.
Here's the list
This is the place where I'll keep the list of things I want changed. Scott will report changes in another post, and I'll add new items at the top? Not sure how that'll work.
https://wordland.shanson.de/2025/04/18/changes-to-make-on-scotts-blog/
We could have done this a lot of different ways. I thought it was best to do the work in the product WordLand + WordPress which is what we're focused on now. I don't think it'll take too long to have a deliverable here.
The text was updated successfully, but these errors were encountered: