Skip to content

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

Open
scripting opened this issue Apr 18, 2025 · 76 comments
Open

Work on baseline theme for WordLand #71

scripting opened this issue Apr 18, 2025 · 76 comments

Comments

@scripting
Copy link
Owner

scripting commented Apr 18, 2025

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.

@scripting
Copy link
Owner Author

scripting commented Apr 19, 2025

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.

@scripting
Copy link
Owner Author

scripting commented Apr 19, 2025

Substack as prior art

Here'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.

Image

@scripting
Copy link
Owner Author

scripting commented Apr 19, 2025

Notes about what's on a Substack story page

Top of page

Title == 32px
Author == 11px
Pubdate == 11px

All are sans serif

Body of story,

font-size: 19px
line-height: 1.6em
margin-bottom: 20px

Serif

Notes

Categories 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.

@scotthansonde
Copy link
Collaborator

Here's a quick rundown on what we've done so far.

  • I've been using my self-hosted WordPress site https://wordland.shanson.de/ for my own testing WordLand up to now.
  • I installed the Retrospect theme by wordpress.com. It can't be installed directly from Add Themes page in the WordPress dashboard. You have to download it from https://wordpress.com/theme/retrospect then use the "Upload Theme" button to install it.
  • I created a child theme of Retrospect, tentatively named Wordland Theme, to implement incremental improvements to Retrospect. It's on GitHub at https://github.com/scotthansonde/wordland-theme for anyone who wants to look at it or try it out. It also needs to be downloaded as a zip file and them uploaded to your WordPress site.
  • The updates to the child theme will be visible at my WordPress site.
  • When we're done, we'll be able to merge the child theme with Retrospect to create an independent theme.

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!

@scripting
Copy link
Owner Author

scripting commented Apr 19, 2025

BTW, the L in WordLand is always capitalized, esp in the product itself. ;-)

Please call the theme WordLand Baseline.

@scotthansonde
Copy link
Collaborator

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. 😃

@scripting
Copy link
Owner Author

BTW, when this is done, we'll owe a debt of gratitude to Scott. This is real work.

@scotthansonde
Copy link
Collaborator

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/

@scripting
Copy link
Owner Author

@scotthansonde -- that is exactly how I hoped it would work. much much easier on the eyes. a screen shot.

Image

I'm going to add another item to the list, back in a minute.

@scripting
Copy link
Owner Author

scripting commented Apr 20, 2025

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.

Where it says Posted in Testing, WordLand, WordPress at the bottom, that's a good spot for now, and it's good it's in the same color as the date at the top, but change the wording to this — "Categories: Testing, WordLand, WordPress." I understand why they said it that way because it's probably not easy to have it be Category when there's one item in the list and Categories when there's more than one, and to not display it at all if the only category is Uncategorized. If it were easy to do it, they would do it. I'm going to post this separately in the repo, see if there are any comments. Note that the "Posted in" approach still shows Uncategorized, which is a possible reason to leave out the Category display altogether. Which raises another question — how easy is it to add JS code to the theme? That might be the answer, only show the Categories if we have JS, and I can give you the code that does that, I have it in WordLand.

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.

@scotthansonde
Copy link
Collaborator

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. 😃

@scotthansonde
Copy link
Collaborator

The styling for item 10 (category lists on a post) has now been fixed. Item 5 (next/prev links on single line) has also been implemented.

@scotthansonde
Copy link
Collaborator

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. 😃

@scripting
Copy link
Owner Author

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. ;-)

@scripting
Copy link
Owner Author

@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.

@scripting
Copy link
Owner Author

Added an item 13 to the list.

In the list of icons in the margin, if you haven't configured one of the services, it should not appear in the list. For example, when I click on the Twitter icon, nothing happens.

@scripting
Copy link
Owner Author

Also, a special request for the first item in the list.

The left sidebar should switch to the right side. When the page is viewed on a tablet, that stuff appears before the text of the post, which is ridiculous.

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.

@scripting
Copy link
Owner Author

scripting commented Apr 24, 2025

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.

@jeherve
Copy link

jeherve commented Apr 24, 2025

In the list of icons in the margin, if you haven't configured one of the services, it should not appear in the list. For example, when I click on the Twitter icon, nothing happens.

You should be able to do that by removing the # link value that's in there. If you remove that default value, the icon will not appear.

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.

@scripting
Copy link
Owner Author

Added number 14 to the list:

https://wordland.shanson.de/2025/04/18/changes-to-make-on-scotts-blog/

The Twitter icon in the list of icons must change to X since the service's name has changed.

@scripting
Copy link
Owner Author

scripting commented Apr 24, 2025

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.

Image

@scotthansonde
Copy link
Collaborator

scotthansonde commented Apr 24, 2025

You should be able to do that by removing the # link value that's in there.

@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:

Image

@scripting
Copy link
Owner Author

scripting commented Apr 24, 2025

Corner-turn

This list overrides all previous lists.

  1. Remove the left sidebar.
  2. Create a footer section, use the footer on scripting.com as prior art. Same font-size, layout. A series of lines that have the full horizontal space to grow into.
  3. Move the list of icons to the footer.
  4. The title of the blog moves to the very top of the page, and it's in the biggest font size on the page. People must know they've arrived at a place with a name.
  5. Categories stays in the body, it is not part of the footer. (Please put a period at the end of the list. It's bugging me every time I see it.)
  6. The very last line in the footer, thus the very last line on the page is "Written in WordLand, running on the WordPress platform."

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.

@scripting
Copy link
Owner Author

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.

Image

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 art

If 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! :-)

Image

For this application, you're going to need to set N to a smaller number, but the algorithm is the same.

@scotthansonde
Copy link
Collaborator

I've just uploaded a couple of minor changes:

  • New social icons (X, BlueSky, Mastodon). I haven't yet deactivated the unconfigured services. For this demo we should configure two or three.
  • Period at the end of the categories (because it was easy 😃).

Now (or more likely tomorrow) I'll start on the corner turn layout changes.

@jeherve
Copy link

jeherve commented Apr 24, 2025

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.)

Yup, correct!

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.

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 (no title) when no title is set.

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:
https://core.trac.wordpress.org/ticket/26976

@scotthansonde
Copy link
Collaborator

@scripting talked about

removing all the extraneous stuff

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/

Image

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.

@scripting
Copy link
Owner Author

@jeherve

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.

@jeherve
Copy link

jeherve commented Apr 24, 2025

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.

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.

@scripting
Copy link
Owner Author

@jeherve -- sorry -- no comments in the baseline theme. lots of thought and experience behind this.

@scripting
Copy link
Owner Author

scripting commented Apr 30, 2025

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.

@scripting
Copy link
Owner Author

scripting commented Apr 30, 2025

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;
	}

@scotthansonde
Copy link
Collaborator

scotthansonde commented May 1, 2025

Before attacking the CSS, I added the author name to the top of the post (example). The AI assistant in Studio by WordPress.com was very helpful for writing a filter function for this. 😃

Image

Update: I also removed the arrows for the next/prev links (Commit 32aca31, in case we want to put them back).

@scotthansonde
Copy link
Collaborator

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?

Image

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.

Image

@scripting
Copy link
Owner Author

I made a few small changes to the prototype for the baseline that I put up yesterday.

  • moved the footer down a bit -- i want the author's text to stand out better
  • added some links to the demo text -- realized I left this out of the prototype -- how links displays is important!
  • changed the way links are displayed -- using the same coloring and style conventions I use on other sites
  • added @media style for phone and tablet -- the fixed width made it impossible to view it on a narrower display

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).

@scripting
Copy link
Owner Author

scripting commented May 1, 2025

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?

@scripting
Copy link
Owner Author

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..

@scripting
Copy link
Owner Author

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.

http://scripting.com/code/baselineplayground/styles.css

@scripting
Copy link
Owner Author

One more tweak and now I think it's beautiful.

http://scripting.com/code/baselineplayground/

The two new ingredients:

  1. instead of 18px it's 16px.
  2. the font-family changed to Ubuntu, Arial, sans-serif. Ubuntu is a very readable sans serif font.

This is it. Finally got the right combo of spacing and font-size.

Image

@jeherve
Copy link

jeherve commented May 1, 2025

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

* Downloaded a backup of my site with the [All-in-One WP Migration and Backup plugin](https://wordpress.com/plugins/all-in-one-wp-migration)

* Imported the backup locally into the Studio app

It appears all users have also been disconnected from WordPress.com. @

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.
With that in mind, it is indeed expected to run into issues when running Jetpack on a local site that is not publicly accessible, like a Studio 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.

@scotthansonde
Copy link
Collaborator

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. 😃

Image

@scripting
Copy link
Owner Author

@scotthansonde -- Happy May Day! :-)

@scotthansonde
Copy link
Collaborator

The reboot of the theme is online at https://baseline.shanson.de/

  • I started a new theme from scratch using the HTML and CSS from the baselinePlaygound.
  • The baselinePlayground has boilerplate in the head that imports jquery, bootstrap, fontawesome, and basic code and styles from scripting.com. I'd like the theme to be self-contained, so I am leaving those out (but we can reach back to the basic styles later if we need to).
    • I noticed this caused the link styles to not be picked up in the footer, but that's a quick fix.
  • I'm starting with classic theme instead of a block theme, since that is the quickest way to implement the layout. I'm sure Automattic will want us to convert to a block theme before we are done.
  • The content the page is static for now.
  • For now I am the only author. I want to be able to break it without affecting anyone else's access. 😃

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.

@scotthansonde
Copy link
Collaborator

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.

@scotthansonde
Copy link
Collaborator

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?

@scripting
Copy link
Owner Author

@scotthansonde --

Right now we show the last 10 posts

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.

@scripting
Copy link
Owner Author

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).

@scripting
Copy link
Owner Author

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. ;-)

@scotthansonde
Copy link
Collaborator

scotthansonde commented May 3, 2025

  • It looks like we get infinite scrolling with Jetpack for free. 😃 Since we know WordLand users will have Jetpack installed, maybe we can just use that. If not, I'm sure there are other solutions. (ChatGPT offers a couple of alternatives. AI seems to work very well for WordPress themes, since the technology is so well established.)

  • Site admins can edit the CSS file style.css in the WordPress dashboard, at least for self-hosted sites. I'm not sure about WordPress.com, it might only be available in the business plan or higher.

@scotthansonde
Copy link
Collaborator

  • I've implemented infinite scrolling on the home page. I wrote my own, so it doesn't use Jetpack.
  • I've loaded the fonts into the theme so the browser doesn't need to get them from Google.
  • I think the theme is complete enough for others to try out, so I installed at Scott's WordLand so we can try it out with some new posts from WordLand.

It's not on GitHub yet, but here it is if anyone wants to take a look: wordlandBaselineMockup-8.zip.

@scripting
Copy link
Owner Author

@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.

@scripting
Copy link
Owner Author

scripting commented May 4, 2025

@scotthansonde -- never mind, i figured it out.

for future reference

  • to turn it back on after a configuration change (I think) go here.

  • You will be asked to sign on, and you'll be on the Jetpack configuration page.

  • In the Connection section, click on the sign-on link next to "Unlock more of Jetpack."

  • Then click on Connect your user account button. And one more button to authorize it somewhere else.

  • Now in WordLand the name of this site should appear in your Sites menu.

I think this should be included in the basic WordLand user howto page, yes?

@scripting
Copy link
Owner Author

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.

@scotthansonde
Copy link
Collaborator

My notes re the current baseline. https://wordland.shanson.de/2025/05/04/143/

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. 😃

@scripting
Copy link
Owner Author

@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.

http://scripting.com/code/baselineplayground/index.html

@scripting
Copy link
Owner Author

@scotthansonde -- other notes.

  • if a post has a title, it must be shown on the home page. however it should be in a smaller font than it is on the story page.

  • if a story doesn't have a title, the byline should take the place of the title and instead of being in gray it should be black. (caveat, until we see how it looks, i'm not sure about this).

  • the <title> in the <head> section has to be set. on the home page it's the title of the blog, on the story page it's the title of the story. if the story doesn't have a title, on the story page fall back to the title of the blog.

@scotthansonde
Copy link
Collaborator

@scripting I made a couple of updates to Scott's WordLand:

  • Updated to the latest baselinePlayground CSS.
  • Activated the default WordPress <title> tags. Home is 'site title + site description', story is 'store title + site title'. It's not exactly what you suggested, but might be good enough.

@scotthansonde
Copy link
Collaborator

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.

@scotthansonde -- other notes.

  • if a post has a title, it must be shown on the home page. however it should be in a smaller font than it is on the story page.
  • if a story doesn't have a title, the byline should take the place of the title and instead of being in gray it should be black. (caveat, until we see how it looks, i'm not sure about this).
  • the <title> in the <head> section has to be set. on the home page it's the title of the blog, on the story page it's the title of the story. if the story doesn't have a title, on the story page fall back to the title of the blog.

@scotthansonde
Copy link
Collaborator

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.

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants