WordPress

Contents

New 27Jan2013, updated 16Nov2024 Embed PDF without plug-in. Summaries in English and Norwegian)
This page is in groups Technology and Publishing.

In this page I will jot down some experience with using WordPress. My general impression after many year’s usage is that it is excellent for my needs!

Fold handling with Collapse-O-Matic plugin

Expand All (for browser searching)
Collapse All

Typical fold

This text «1234×6789» will only be found with browser search when the fold is expanded. However, the search field on the top of this page is global for all notes, (expanding) all containing folds during the search. More precise: pages in that case will not have any collapsed state.

WordPress and www.one.com webhotel

January 2013: It was easy to connect the MySQL database and the PHP server, thanks to one.com supplying me with a letter with all the login details. This is not the theme here.

I have experienced some problems with stability and a long response times, including a complete failure with the «Error establishing a database connection» message, with no page being presented, or page with only some pictures. I filled in a support page at one.com about this, attached screen clips with dates and how it looked. Half a day later I got a response where they regretted to have had problems at that time, and that the problem had been resolved. (This was on a Saturday to Sunday, so their 24/7 live support probably did that response.)

However, they added this info (since I am at www.teigfam.net):

Additionally, we also recommend updating the database host that you are currently using in your wp-config.php file. Please edit the wp-config.php file located in the /oyvind/home directory and in it, update:

define(‘DB_HOST’, ‘localhost’);

to

define(‘DB_HOST’, ‘teigfam.net.mysql’);

When I asked them why this, they replied:

We do not recommend using localhost anymore, as its known to cause
erratic connections to the database server. Hence we have developed a
custom hostname for each webspace, in case of your domain, it is:
teigfam.net.mysql. This should result in better connectivity to the
database.

August 2013: I have still had problems on and off with «Error establishing a database connection», spurious or even for hours. To verify such an error, it’s important to clear the browser’s cache if in doubt. One.com replied over some period of time that «Our technicians have confirmed that they have located, and solved the issue on the MYSQL server» and after more problems: «Our technicians are in the process of moving some of the domains to a new database server to reduce the load. It will take few more hours for changes to take affect» and after still persisting problems: «Due to this, we have assigned your domain to use our new database servers, which are more stable. I have checked your website now, and it works well again.» The good thing is that they respond fast. I hope it’s over now. I will update here should I experience problems again.

Changing Size of slideshow

See http://wordpress.org/support/topic/changing-size-of-slideshow?replies=10

IE8 picture scaling

See http://wordpress.org/support/topic/ie8-picture-scaling?replies=11. IE8 simply don’t want too large pictures, it will make them non-proportional if larger than 1200×1200. So, make large pictures (like 1600 width) and set them to 60% (=960 width) then it’s (almost?!) ok. All(?) can see nice pictures, and most can see them full size ok by double-clicking on them. But honestly, IE8 users – install Google Chrome and leave IE8 well behind!

Is a 60% picture downloaded in full?

Yes! WordPress lets the browser do the downscaling. If you want short initial download time and few megabyte but still want to present the viewer with something big, here’s the recipe. This may be especially important if you have a page full of pictures.

Make the pictures for your page just the right size. 1600 width 60% is 960, but WordPress sends the larger 1600 picture. Scale it in your system, out of WordPress (like Preview or GraphicConverter on OSX). Upload two: the 1600 and the 960. Use the 960 in your WordPress page. Edit the biggest picture in the WordPress Media Editor and copy the «Permalink» to it (it does not end in jpg etc.!). Then go into the page and edit it, edit the picture and paste that permalink into the picture’s «Link URL» (example of a permalink: https://www.teigfam.net/oyvind/home/?attachment_id=1149). Then, by pressing the picture you get the the picture viewer, with your full pixel also present. Test it here (where the in-page download is 900 and the full width is 4688): https://www.teigfam.net/oyvind/home/models/046-sbb-ae-3_6-ii-h0-scale/#Selection_criteria

Academic style reference list

Update : see Removing of ol_ref.

To make an academic style reference list with numbers enclosed in [..] and correct left margin, here’s the CSS that needs to be inserted into your «style.css» (which resides in your sub-directory, like «twentytwelve-child»). I have a local copy and edit it, and then ftp it up to my site. (You may of course insert this into any referenced CSS in any HTML you might have, WordPress or not.)

style.css files

Updates

I am having help from css-d@lists.css-discuss.org (About css-discuss) to try to resolve these problems:

1. The newer Safari 15.4 on macOS Catalina10.15.7 smeared the nice «[nn]» field out on the left side, while the older Safari 14.1.2 on macOS 10.14.6 Mojave and newer Safari on iOS did not. This is now solved

2. The layout of the iPhone iOS screens were ruled by this academic list, which took too much width «down there» – causing all other earlier text to have some not nice white space on the right side. This also seems to be rather well solved now. However, with that solution..:
..a new problem arose: the square brackets are gone, only mumbers are seen.

I did try to wrap the <ol class=»ol_href»> element into a table of width 100%, and it certainly helped (from My Beep-BRRR notes). See picture (press for detail). Lowering to 80% or even 50% didn’t seem to help any more. I’ll keep the 100% on this page to observe. iOS 15.4.1 (and earlier versions) – but only on iPhone. On iPad the layout is as on macOS on laptops, no problem. 11Apr2022

Additional CSS

Update with WordPress 4.8.1 on 7Aug2017, which is when I discovered that my «style.css» didn’t work. (either like this..:) It seems they have made this easier. I just found my old «style.css» and pasted its contents into Customising | Additional CSS and bingo! I cannot see (in my ftp client) that «style.css» has been updated or even find where the additional CSS is located. But it works. (Or like this..: I queried about this here: https://wordpress.org/support/topic/style-css-and-additional-css/ and the answer is to Reactivate the child theme) (To test: this paragraph should have a red line to the left of it).

ol.ol_href {
    list-style-type: none;
    counter-reset: section;
    padding-left: 0;
}
ol.ol_href li {
    display: table-row;
}
ol.ol_href li:before {
    counter-increment: section;
    content: "[" counter(section) "] ";
    padding-right: 1em;
    display: table-cell;
}

You may see an example of its use here: https://www.teigfam.net/oyvind/home/technology/072-pike-sutter-concurrency-vs-concurrency/#References

To use it, just make a standard ordered list in WordPress. Then do Text edit on it and replace <ol> with <ol_href>, example below.

This CSS code is entirely courtesy of Chris Rockwell at http://www.css-discuss.org.

I have missed this for years! However, a five years old iPhone 3G from 2008, with iOS 4.2.1 does it wrongly and loses the list style completely. But all other browsers I’ve tried are fine, even IE8. Also, newer iOS does it correctly. I’ll use this from now on, also update in older blogs.

In order to make the links from the references I do something like this (blue HTML is not in scope here, but it shows how I do header referencing. (Update: I now use plugin Table of Contents Plus that also makes anchors for me automatically, so the blue is not needed anymore):

<a name="Chapter1"></a>
<h2>Chapter 1 <a href="#Chapter1">:-:</a></h2>
There are some implicit <a href="#Wiki-refs">Wiki-refs</a> at the bottom
Now <a href="#Ref01">[01]</a> probably appears before <a href="#Ref02">[02]</a>.

<a name="References"></a>
<h2>References <a href="#References">:-:</a></h2>
<a name="Wiki-refs"></a>Wiki-refs: Text..
<ol class="ol_href">
    <li id="Ref01">Reference 1 in here</li>
    <li id="Ref02">Reference 2 in here</li>
    <li id="Ref03">Reference 3 in here</li>
    <li id="Ref04">Reference 4 in here</li>
    <li><a name="Ref05"></a>NOT LIKE THIS! Some urls in here won't be clickable</li>
</ol>

Example [x]

See the example below: [1], [2], [3] and [4]

  1. Reference 1 in here
  2. Reference 2 in here
  3. Reference 3 in here
  4. Reference 4 in here

Update 7Sept2014: I discoved a problem. I reported it as href contents some times removed if anchor inside list element. I repeated it at http://www.css-discuss.org and Chris Rockwell found the answer. I had used the Ref05 form (above), while it’s the style of those above that’s correct! Thanks, again!

Update 12Aug2018 and 31Mar2019: See Gutenberg editor (below). The version 5.3.0 as of 31Mar2019 still destroys my list!

Ordered lists as [N.x], new code based on CSS for [x]

3Nov2017: I made a new thread for this at WordPress support (since I didn’t get any response on css-disuss.org, and the last update there was more than a year ago), see Ordered lists as [N.x], new code based on CSS for [x]

Removing ol_ref

Update 23Sep2024. Since the bottom reference list based on ol_ref seems to require so much width of a mobile’s phone screen that the body of the note appears to fill up like 80% width, instead of 100%. It is possible to remove the ol_ref and instead simply go for a scheme like this. When I do this by hand it’s nice to have a large template to copy/paste from:

<a name="Ref01"></a><span style="color: #ff0000;"><strong>[1]</strong></span> THE REF 1
<a name="Ref02"></a><span style="color: #ff0000;"><strong>[2]</strong></span> THE REF 2
<a name="Ref03"></a><span style="color: #ff0000;"><strong>[3]</strong></span> THE REF 3
<a name="Ref04"></a><span style="color: #ff0000;"><strong>[4]</strong></span> THE REF 4
<a name="Ref05"></a><span style="color: #ff0000;"><strong>[5]</strong></span> THE REF 5
<a name="Ref06"></a><span style="color: #ff0000;"><strong>[6]</strong></span> THE REF 6
<a name="Ref07"></a><span style="color: #ff0000;"><strong>[7]</strong></span> THE REF 7
<a name="Ref08"></a><span style="color: #ff0000;"><strong>[8]</strong></span> THE REF 8
<a name="Ref09"></a><span style="color: #ff0000;"><strong>[9]</strong></span> THE REF 9
<a name="Ref10"></a><span style="color: #ff0000;"><strong>[10]</strong></span> THE REF 10
<a name="Ref11"></a><span style="color: #ff0000;"><strong>[11]</strong></span> THE REF 11
<a name="Ref12"></a><span style="color: #ff0000;"><strong>[12]</strong></span> THE REF 12
<a name="Ref13"></a><span style="color: #ff0000;"><strong>[13]</strong></span> THE REF 13
<a name="Ref14"></a><span style="color: #ff0000;"><strong>[14]</strong></span> THE REF 14
<a name="Ref15"></a><span style="color: #ff0000;"><strong>[15]</strong></span> THE REF 15
<a name="Ref16"></a><span style="color: #ff0000;"><strong>[16]</strong></span> THE REF 16
<a name="Ref17"></a><span style="color: #ff0000;"><strong>[17]</strong></span> THE REF 17
<a name="Ref18"></a><span style="color: #ff0000;"><strong>[18]</strong></span> THE REF 18
<a name="Ref19"></a><span style="color: #ff0000;"><strong>[19]</strong></span> THE REF 19
<a name="Ref20"></a><span style="color: #ff0000;"><strong>[20]</strong></span> THE REF 20
<a name="Ref21"></a><span style="color: #ff0000;"><strong>[21]</strong></span> THE REF 21
<a name="Ref22"></a><span style="color: #ff0000;"><strong>[22]</strong></span> THE REF 22
<a name="Ref23"></a><span style="color: #ff0000;"><strong>[23]</strong></span> THE REF 23
<a name="Ref24"></a><span style="color: #ff0000;"><strong>[24]</strong></span> THE REF 24
<a name="Ref25"></a><span style="color: #ff0000;"><strong>[25]</strong></span> THE REF 25
<a name="Ref26"></a><span style="color: #ff0000;"><strong>[26]</strong></span> THE REF 26
<a name="Ref27"></a><span style="color: #ff0000;"><strong>[27]</strong></span> THE REF 27
<a name="Ref28"></a><span style="color: #ff0000;"><strong>[28]</strong></span> THE REF 28
<a name="Ref29"></a><span style="color: #ff0000;"><strong>[29]</strong></span> THE REF 29
<a name="Ref30"></a><span style="color: #ff0000;"><strong>[30]</strong></span> THE REF 30
<a name="Ref31"></a><span style="color: #ff0000;"><strong>[31]</strong></span> THE REF 31
<a name="Ref32"></a><span style="color: #ff0000;"><strong>[32]</strong></span> THE REF 32
<a name="Ref33"></a><span style="color: #ff0000;"><strong>[33]</strong></span> THE REF 33
<a name="Ref34"></a><span style="color: #ff0000;"><strong>[34]</strong></span> THE REF 34
<a name="Ref35"></a><span style="color: #ff0000;"><strong>[35]</strong></span> THE REF 35
<a name="Ref36"></a><span style="color: #ff0000;"><strong>[36]</strong></span> THE REF 36
<a name="Ref37"></a><span style="color: #ff0000;"><strong>[37]</strong></span> THE REF 37
<a name="Ref38"></a><span style="color: #ff0000;"><strong>[38]</strong></span> THE REF 38
<a name="Ref39"></a><span style="color: #ff0000;"><strong>[39]</strong></span> THE REF 39
<a name="Ref40"></a><span style="color: #ff0000;"><strong>[40]</strong></span> THE REF 40
<a name="Ref41"></a><span style="color: #ff0000;"><strong>[41]</strong></span> THE REF 41
<a name="Ref42"></a><span style="color: #ff0000;"><strong>[42]</strong></span> THE REF 42
<a name="Ref43"></a><span style="color: #ff0000;"><strong>[43]</strong></span> THE REF 43
<a name="Ref44"></a><span style="color: #ff0000;"><strong>[44]</strong></span> THE REF 44
<a name="Ref45"></a><span style="color: #ff0000;"><strong>[45]</strong></span> THE REF 45
<a name="Ref46"></a><span style="color: #ff0000;"><strong>[46]</strong></span> THE REF 46
<a name="Ref47"></a><span style="color: #ff0000;"><strong>[47]</strong></span> THE REF 47
<a name="Ref48"></a><span style="color: #ff0000;"><strong>[48]</strong></span> THE REF 48
<a name="Ref49"></a><span style="color: #ff0000;"><strong>[49]</strong></span> THE REF 49

It would look like the below. For readability, add an empty line between the entries. Not done here:
[1] THE REF 1
[2] THE REF 2
[3] THE REF 3
[4] THE REF 4
[5] THE REF 5
[6] THE REF 6
[7] THE REF 7
[8] THE REF 8
[9] THE REF 9
[10] THE REF 10

The first note I used this on was 072:[References]. As of 08Nov2024 I have removed on several notes, including this first one.

HTTPS and SSL

New 1Sep2013, updated 9June2019

New 8June2019: My WordPress site now runs SSL and HTTPS (see iOS screen clip above with abbreviated URL and a ? secure lock). I simply activated the Really Simple SSL plugin. I followed the recipe at my ISP’s page here (in Norwegian). I also needed to relate to How to setup Google Analytics and Google Search Console/Webmaster Tools at the Really Simple SSL’s home page. «SSL is enabled by default on all domains hosted with One.com» (according to them), so no other action was needed to get HTTPS up and running.However, it seems like there is another way to do this: to make an .htaccess file, see Always use HTTPS on your Website Builder site.

According to Manually insert .htaccess redirect http to https then an SSL test page is, for my domain, available here.

I used One.com’s file handler and also an FTP (not safe yet) client and saw that there were two .htaccess files. One at my site’s top node (see below) and one in the WordPress top node. But none of them had been modified by the introduction of HTTPS, they were the original versions. So I guess this is solved differently with Really Simple SSL’s present, or by WordPress.

Maybe I can use this for the non-WordPress parts (see iOS screen clip above with abbreviated URL and «Ikke sikkert» = «Not Secure«). I am at www.teigfam.net with several paths, but WordPress is at www.teigfam.net/oyvind/home only. (Solved: see here:)

Update 12June2019: I have queried at the Really Simple SSL forum here: WordPress with HTTPS is a subdirectory, how to config the rest to HTTPS?. I was certainly helped with an update for my top level .htaccess file. This is more than one could expect for free software. I must look at the PRO version, and see what that adds for my case.

Test of top level .htaccess file

Thanks to Really Simple SSL support:

# -FrontPage-
IndexIgnore .htaccess */.??* *~ *# */HEADER* */README* */_vti*
order deny,allow
deny from all
allow from all

order deny,allow
deny from all

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://www%{HTTP_HOST}%/$1 [R=301,L]
<IfModule/pre>

However, there is still something that will not resolve. And inside the file referenced below, pressing both old http links will also fail (point 2 and 4). This also causes some problems with the standard WordPress editor when the picture is a reference to a http picture, like the Resizing pictures vs. thinner and thinner? picture (below). The standard editor (I did not test the Gutenberg editor) just shows an empty frame.

  1. https://www.teigfam.net/oyvind/blog_notes/061/test_http_https.html – OK
  2. http://www.teigfam.net/oyvind/blog_notes/061/test_http_https.html – FAILS (OK with .htaccess v3 (below). Independent of «Enable 301 .htaccess redirect»

However:

  1. https://www.teigfam.net/oyvind/home/publishing/061-wordpress/#https_and_ssl – OK
  2. https://www.teigfam.net/oyvind/home/publishing/061-wordpress/#https_and_ssl – OK. This is written as http:// in the WordPress note, but Really Simple Plugin changes it to https!

.htaccess v2

When the red www was added in .htaccess then, in test_http_https.html, point 4 was fixed («http to here») but (1) link 2 still fails («http to itself»). And above here (2) point 2 still fails («http out to https»). The standard WordPress editor, a (3) http-picture still is not resolved to https, so only the empty frame is seen. But it displays ok when in the online WordPress page.

.htaccess v3

The below is my present .htaccess file on the top level

I asked support at one.com and they said that «if those pages are not using WordPress, you can use this guide to have them change to https» (Always use HTTPS on your Website Builder site) and that «this should work even if you are not using website builder.»

#Rewrite everything to https
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

With this top level .htaccess everything above seems to work. Also the four urls in the test_http_https.html. Also, during WordPress editing of an old http-picture it is resolved to https!  No empty frame. So I guess this is it!(?) I have not checked wether this makes all use of Really Simple SSL not needed. I assume not, after all it was one.com who suggested use of Really Simple SSL. I guess it’s needed (or at least nice to see) for the url’s that WordPress generates internally.

Vertical line to the left of the paragraph

I asked about this at http://wordpress.org/support/topic/vertical-line-to-the-left-of-the-text-in-twenty-twelve. It was resolved: I added this to my style.css (see Additional CSS above):

/* Thanks to WPyogi 2013 11 18 */
p.p_vline_left_gray {
   border-left: 1px solid #C0C0C0;
   margin-left: 10px;
   padding-left: 10px;
}

And this usage in the text:

<p class="p_vline_left_gray">Text</p>

Here is a text that uses this class (from Wikipedia):

The exhibition halls and galleries expand over the restored ground floor of two antique buildings: Palazzo Gamucci (which later became the Sisters of Saint Catherine Convent) and Palazzo Ficarelli. The museum highlights the historical and artistic aspects that concerned the city during the Middle Ages.

How to include an excerpt text in an index Post or Page?

Jan-Feb. 2016: See https://wordpress.org/support/topic/how-to-include-an-excerpt-text-in-an-index-post-or-page?replies=3#post-7970261

Collapse-O-Matic plugin

Aside: update 5Apr2022: Observe the html <details> element. See Wishes for a folding editor.

This is the «fold handling» plugin that I use:

Remove _underscore:
[_expand title="Collapse-O-Matic plugin example" tag="h3"]
Text
[/_expand]

The code added below looks like in the picture.

Collapse-O-Matic plugin example

I did a topic on Expand/close all and auto-expand on printing on the WordPress forum.

Update: Even if I did do a search in the documentation, that’s where the answer was! I’m using it first at Towards a taxonomy(?) of CSP-based systems.

Sidebar in multi-column table after text?

See https://wordpress.org/support/topic/sidebar-in-multi-column-table-after-text-2/

I am using the Twenty Twelve theme. When I have short notes the sidebar (on the right side) creeps down to far below the text. Is there a way to put it in a multi-column table when it reaches the end of text? Or, perhaps have only a multi-column section at the bottom? I see that for the mobile version it comes as list at the end. If not Twenty Twelve supports it, is there a WordPress.org theme that does?

An example is here: https://www.teigfam.net/oyvind/home/etc/137-eggekartong-i-to-etasjer/

Multiple menus

I am using the Twenty Twelve theme. I see that it supports one menu only. I can make several, but I can only set up one (Primary) to be used at a time. That’s how I understand it.

I installed Max Mega Menu plugin (here) and made a second menu. Then I was told that my theme supported two menus. Great! But I thought I should be able to maneuver from a menu element in the Primary menu to that new secondary menu. I found no way whatsoever to do this. Was this still because I use Twenty Twelve? So then, since I’m doing my personal blog only (as opposed t being a company), and now simply wanted to make a domain of it for a rather different content – without having to resort to annual payments and peculiarities of the menu system – I deleted Max Mega Menu. I don’t think I was a Pro menu blogger. And besides, the looks and feel of the Twenty Twelve menu is rather nice.

But then I am on square one. But now I know of some questions to ask:

  1. Is there a nice standard WordPress theme that looks and feels like Twenty Twelve that supports multiple menus? I haven’t found any. But then, how would I find it?
  2. Is it possible to see it all upside down? From any Page or Post, might I in some installment of WordPress set the menu that’s going to appear above it? If not set it’s the Primary menu.
  3. Is there a nice recipe to add php to what I have, to get what I want – with Twenty Twelve? Not that I’m really certain of what I want!

(4Sept2017: I posted this to https://wordpress.org/support/topic/multiple-menus-8/)

Not having Featured image of Boardwalk Theme

Initial query of Not having Featured image (Oct2017):

Is it possible to go directly from the nice Boardwalk Theme front page, press a picture there and go directly to the blog post, but avoiding that blog post to “repeat” the front page picture?

We want the blog post to immediately show a slideshow gallery on the top of the page.

We want to avoid vertical scrolling as much as possible, and repeating that picture is felt like an unnecassary replication. One could include that picture in the slideshow gallery anyhow, f.ex. let it always be the first picture by some design default.

Another question from aclassifier: I see that there is no “Editor” tab in Appearance tab, so I assume it’s not possible to make a Child of the Boardwalk theme? That could in case have been used to handle the question above?

The difference between WordPress.com and WordPress.org

The above post also clarified this. It’s good to have it written down, the more places the better. I also wrote the below text at my own free WordPress page: https://aclassifier.wordpress.com

By the way: pages with wordpress.com in the address are free. On the other hand, https://wordpress.org is where you can download the core software that wordpress.com is built on and run on some other host. As wordpress.org isn’t itself a host, one wouldn’t be able to set up a site like aclassifier.wordpress.org (From here)

Adding an external pitch to a blog note

I asked about this at https://wordpress.org/support/topic/adding-an-external-pitch-to-a-blog-note/ (Nov2017)

Remove underline on certain links

See https://wordpress.org/support/topic/remove-underline-on-certain-links/#post-9709810 started in Nov2017. I addded my query, since the suggested solution didn’t work for me, on 22Nov2017. Thanks to paulwpxp for suggesting using the tags text-decoration (for Twenty Twelve) and border (for Twenty Fifteen). So, it’s a good idea to put it in the child theme’s style.css file:

Here’s the facit. I added this in style.css:

a.a_link_no_underline {
    border: none; /* For Twenty Fifteen etc. */
    text-decoration: none; /* For Twenty Twelve etc. */
}

and I used it like this in the text:

<a class="a_link_no_underline" href="https://www.teigfam.net/oyvind/home/nokkelversene/144-nokkelverset">Nøkkelverset</a>

Like this: Nøkkelverset (see, there is no underline! If it’s still there, clear your browser’s cache. For Safari, see here)

Plugin Collapse-O-Matic tighter headings

(Nov2020) Testing ‘goto anchor’

(Dec2017) With a little help from Twinpictures (thank you, plugin Collapse-O-Matic author!) I replaced a heading in the text, looking like

[expand title="My heading" tag="h3"]..[/expand]

with

[expand title="My heading" tag="h3" trigclass="narrow_h3"]...[/expand]

(aside: to make WordPress escape the expand sequence I have entered double square brackets like [[full-line-in-here]] at the beginning and end of the two lines above. See The Shortcode API chapter Escaping. Thanks, twinpictures for also supplying the answer to this on Code example snippets with “expand” not expand!)

.. and added this to the theme TwentyTwelve’s cascaded «style.css» file

h3.narrow_h3 {margin-top: 0em; margin-bottom: 0em}

See example in https://www.teigfam.net/oyvind/home/technology/162-me-relying-on-relaying-ble/#me_relying_on_relaying_ble

Plugin Collapse-O-Matic wanting Google to index also contents of folds

A quote of the answer by twinpictures:

Correct, the browser’s text search (actually called find on page) just does a text match on all parts of the visible DOM. Logically: what is hidden, should not be found.

But rest assured, when google indexes the site, it’s spiders are looking at the entire page content–before any collapse items are hidden via javascript once the page is fully loaded.

(Dec2017) See https://wordpress.org/support/topic/wanting-google-to-index-also-contents-of-folds/

Increasing the relative size of <tt> for in-line code

(Feb2018) See https://wordpress.org/support/topic/increasing-the-relative-size-of-for-in-line-code/

Infinite scroll for Twenty Twelve Child

Instead of having to click a link to get to the next set of posts, infinite scrolling pulls the next posts automatically into view when the reader approaches the bottom of the page. (Jetpack)

I thought infinite scrolling (or infinite scroll) would have been nice to have, but did have to learn some before I got it up and running. Thanks to Jetpack support people at WordPress / Automaticc for all their help!

In need of Categories to Pages!

  • Infinite Scroll does not work for individual Page-type or Post-type pages. It works on traditional «taxonomy» pages. So for example example.com/category/food will display all WordPress posts in a list which have been categorised as food. In other words, the infinite scroll feature is meant for Category, Tag, or Archive pages. i.e. pages which contain a list of posts or pages
  • I use the TwentyTwelve theme, but as TwentyTwelve-Child. However Jetpack → Settings only said «Theme support required. Learn more». But after I got a url to click from Jetpack support (or was it that I cleared the cache in my browser?) then “Load more posts as the reader scrolls down” option appeared. So I ticked it. However,
  • I have only one Post-type page but lots of Page-type pages – where Category may not be set! So I had no categories!
  • I went to Creating an Archive Index and made a file called archive.php and ftp’ed it onto my ../wp-content/themes/twentytwelve-child/archive.php. It then appeared in my WordPress Dashboard -> Appearance -> Editor. So I could edit it there. Save and then this appeared in my Menu structure as: https://www.teigfam.net/oyvind/home/site-archives/ (*). Perfect! Except, it only reflected the fact that I didn’t have any categories. I have also made one by hand to try to understand what’s going on: Site archives (ordered)
  • So I read some of the Jetpack document over again, but it did not help much. Page-type pages were still a problem. So I found a plugin
  • (*) This is a html file built by WordPress, with JavaScript  code, pictures, procedures, frames, sockets and style sheets – exactly like the file that has been created by WordPress that you are reading now. It is not this text, it contains it. When the WordPress plugin BackUpWordPress takes backups every night for me any of these files are not present. The PHP WordPress code takes data from my SQL data base and builds these files and sends them to the browser. (Correct me if I am rong on any of this)

Category to Pages WUD plugin

Update 10Dec2019: This plugin has been las signed by AccountClosed (here). Also, it did not seem to work any more, and urls referred to in the plugins page were dead. So I disabled it. I then had to remove this from archive.php since there now is no categories:

 <h2 >Archives (by subject: wp_list_categories) </h2 >
 <ul >
     <?php wp_list_categories(); ? >
 </ul >		
 <br/ >
  • I searched for a plugin that could have me add categories to Page-type pages, and found one that looked fine and had been updated recently and worked with my version of WordPress. It was the Category to Pages WUD plugin by Danny WUD at https://wud-plugins.com/home/. I installed and activated it and now a Categories menu appeared! It had me pick from «All Categories» or «Most Used». Of course, my Menu structure is a hidden category structure! So it was only to go over all of my blog notes and do it. The results appeared in a growing site-arhives file that showed more and more category list files, like https://www.teigfam.net/oyvind/home/category/tech/
  • Now, how do I know that inifite scroll works? Scroll the above url and see that down there https://www.teigfam.net/oyvind/home/category/tech/page/2/ appears! See: /page/2/ and on some /page/3/ and so on. QED.
  • By the way, page numbering also appears on search pages. Test this: https://www.teigfam.net/oyvind/home/?s=aquarium. Using infinite scroll technique!

I did have a question for the author since blogs and collection categories seemed to pop up by themselves:

Gutenberg editor

I tried it on 8Aug2018, probably with the version just before 3.5.0  I had some problems (that I filed to them) and did not dare to continue. So I deactivated it and reactivated the standard editor.

In addition, after I had used it I discovered garbling of my Academic style reference list. I reported this on Github. Read at Academic style numbered list changed to many individual lists. It was caused by Gutenberg. I tried it again with 5.3.0 on 31Mar2019 and I still have the same problem. Here is the code change that Gutenberg 5.3.0 did with this page, and how this looks:

Resizing pictures vs. thinner and thinner?

16Aug2018. I assume that resizing changes the size of an image while keeping the same height to width ratio. Here is an example that does not resize but instead gets thinner and thinner:

However, the below resizes correctly, with the class

<img class="alignnone" src="..." .../>.

This wasn’t set correctly once I did this add picture with WordPress, but then again it was. Check this if it fails. Anyway, this is fine:

My problem is that if I use an external url like the above I haven’t figured out how to use the WordPress IDE to set it up so that it resizes correctly! However, uploading the picture to my WordPress domain and refer it from there then it’s fine. See the final result at CPA 2018 «fringe» presentation (in Dresden, Germany).

html “input” field “update” from my home machine (or similar)?

See what I’d like at Aquarium and the question html “input” field “update” from my home machine (or similar)? on the WordPress.org forum.

Search field also in non-sidebar template

I use the Twenty Twelve theme. When I use a template without the sidebar, the search field is not there. I guess it’s because it’s considered that there is no space for it. I would still like to have it there, like at the top or bottom of the page. I use pages only, no posts (except the top post). Is there a way to solve this?

See Search field also in non-sidebar template (4Jul2019)

I did get this resolved. Thanks to @sterndata:

It was to add a /twentytwelve-child/functions.php with this contents:

<?php add_shortcode('wpbsearch', 'get_search_form'); ?>

and then add this shortcode in my blog note at the place where I want the Search field:
[wpbsearch] as seen not for real here (if I publish it two times in the same note both would come on the top).

Anti-spam filter

A nice reader mailed and told me that commenting did not work (10Jul2019). I soon discovered that Spam Free WordPress was four years old! So I installed Aksimet (4.1.2) by Automaticc instead. I needed a subscription and an API key and then was qualified for the Aksimet Basic (Free) scheme. All about this at Testing commenting. So now:

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I could also have used Jetpack with a paid subsription. It’s also by Automaticc. But I did not see I could get anti-spam for free through that channel. However, in the Dashboard Aksimet Anti-Spam appears as an entry in the Jetpack menu.

I just learned a new word: ham. It’s about the opposite of spam. But it hasn’t got to Wikipedia yet.

Portrait mode movies

See WordPress forum at Portrait movies poster image on wide screens (15Sep2019)

I had a problem just generating a portrait movie, but managed in a way using MacOS with no paid apps, basically just an editor like Pages, Preview and iMovie – that all come bundled with MacOS – plus the free HandBrake app. See My aquarium holiday automatic fish feeder (for granules) (chapter Feeder feeding twice).

You may see that there is a problem with this tall movie when it’s viewed on a wide screen. The tall 9:16 poster picture also has to be tall, and some times I would have to scroll down on it since it fills more than a page. However, when seen on a high screen like a mobile it looks really nice.

But since the frame that the browser reserves for the movie is 9 wide and 16 high the poster picture has to have the same 9:16 ratio. In the WordPress movie function there of course is no switch to turn to make it any other way. Here is the code from the url above:

[video width="1080" height="1920" mp4="https://www.teigfam.net/oyvind/home/wp-content/uploads/2019/09/193_fig10_feeder_feeding_twice_by_oyvind_teig_2019.mp4" poster="https://www.teigfam.net/oyvind/home/wp-content/uploads/2019/09/193_fig10_feeder_feeding_twice_by_oyvind_teig_2019_x900.jpg"]] [[/video]

I use the standard editor, not Gutenberg. And the Twenty Twelve theme. I guess that WordPress php or JavaScript would know that the window is wide and that it would look nicer to downscale the area fro the 9:16 frame so that it would fit into a wide screen. But I guess, this is probably only dreaming..

Because when it plays it either automatically fills into the screen with nothing not seen, or I may press the full screen button to get this effect. This is nice. Running the movie is no problem but viewing the poster with surrounding text does not like nice on a wide screen.

WordPress 5.3 big_image 2560 threshold not wanted!

I don’t blog from my mobile, and I often need large pictures, so for me this was a great relief. Like this picture.

Nov2019. WordPress 5.3 introduced automatic downscaling (into a copy) of max width 2560 pixels. Nice for most who blog from their mobiles. It is described here. That’s where the Disable «BIG image» Threshold plugin by Jonathan Desrosiers was also mentioned. It is here, but the plugin editor of WordPress found it, so I installed it from there. It works. But so does the prescribed recipe:

ATTENTION! When I updated my functions.php like the below I was NOT able to log on via ../home/wp-admin! I had to go in via ftp and restore functions.php to the original version. I did get an error message pointing to that file, which helped.

However, when I queried about this at the WordPress’ page (here) I also got a reply from mintWP that I should put the override code the in child theme’s functions.php, like this:

In Twenty Twelve Child: Theme Functions (functions.php)
<?php add_filter( 'big_image_size_threshold', '__return_false' );?>

When I did this WordPress 5.3 issued this error message:

Something went wrong. Your change may not have been saved. Please try again. There is also a chance that you may need to manually fix and upload the file over FTP.

I checked over ftp, and the file had indeed been saved. However, the tab in the WordPress edit window did not include add_filter before I pressed another file and then this one again.

When I disabled the Disable «BIG image» Threshold plugin the add_filter addition worked. However, see above: the log-on failed. So I ended up with the Disable «BIG image» Threshold plugin enabled and now add_filter stuff.

Page white-only after pressing Update, but update done

See Page white-only after pressing Update, but update done – Ticket #48686 at trac

Code with horisontal scrolling

Update 1Jul2020: With Enlighter – Customizable Syntax Highlighter (4.2) its now possible to control the wide line behaviour at the Setting page: Appearance. Text overflow → Breake line or Add scrollbar:

Then, the rest of this chapter I assume is not that interesting.

I write code with long lines. The times when 80 characters was the norm was, in my head, over around 1985. That’s the time when we went from Intel MDS boxes (like PCs) running ISISI II operating system with the edit line editor, to real PC’s running DOS and then Windows 3, with the PC-Write editor. It became easier to write longer lines. But it took off when I started with the Inmos F folding editor, where a block’s leading spaces just disappeared. For the transputer. But later I used the Winf32 editor. Until I retired in 2017. I am not afraid of long lines.

Except, they still pose a problem on narrow screens, like mobile phones. Should one want to view code on them. It would be nice to! But then I need

  1. A code window that does not wrap code
  2. I discovered that a raw </pre> is not too bad, it certainly also does horisontal scrolling

But I would like a plugin to get more. I did find SyntaxHighlighter Evolved and also the EnlighterJS Syntax Highlighter that may help.

Enlighter

Only with Enlighter 3.0 plugin. Next version is 4.0 and will be incompatible.

I have added a question on WordPress plugin support: Plugin seems to behave like preformatted on the same page.

Plugin

I first had to install TinyMCE and then read this description: Enlighter Visual Editor Tutorial. Observe that after (4.0) (above) this example will not show the behaviour I did not want:

[[combinable]]
void client_task (
        client worker_if_t i_worker[NUM_WORKERS],
        in port inP1_button,
        out buffered port:4 outP4_leds,
        chanend c_cnt) {

    timer    tmr;
    time32_t time_ticks; // Ticks to 100 in 1 us
    bool     expect_notification_nums = 0;
    unsigned random_seed = random_create_generator_from_seed(1); // xmos. Pseudorandom, so will look the same on and after each start-up
    unsigned random_number;
    log_t    log;
    bool     allow_button = false;
    bool     button_current_val = BUTTON_RELEASED;
    unsigned led_bits; // Init below..

    led_bits = BOARD_LEDS_INIT; // ..here to avoid "not used" if "null" used instead
    log.button_pressed = false;

    debug_print ("%s", "client_task\n");

    tmr :> time_ticks;
    time_ticks += (1 * XS1_TIMER_HZ); // 1 second before first timerafter

    while (true) {
        select { // Each case passively waits on an event:
            case (expect_notification_nums == 0) => tmr when timerafter (time_ticks) :> void : {
                random_number = random_get_random_number (random_seed); // Just trying to start randomly

                // Start as [0,1,2,3], [3,0,1,2], [2,3,0,1], [1,2,3,0]:
                for (unsigned ix=0; ix < NUM_WORKERS; ix++) {
                    unsigned random_worker = random_number % NUM_WORKERS; // Inside [0..(NUM_WORKERS-1)]
                    i_worker[random_worker].async_work_request(); // Now log.log_started in random sequence
                    random_number++; // Next (but modulo NUM_WORKERS above)

                    log.log_started[ix] = random_worker;
                }
                expect_notification_nums = NUM_WORKERS;
                // === Do something else while all worker_task work ===
            } break;
            case (expect_notification_nums > 0) => i_worker[unsigned index_of_server].finished_work() : {

                // Server async_work_request entries are protected by code and scheduler until this is run:
                log.log_worked_ms[index_of_server] = i_worker[index_of_server].get_work_result();
                // async_work_request is not allowed again before the above line is run, by compiler and code

                expect_notification_nums--;

                log.log_finished[expect_notification_nums] = index_of_server;
                if (expect_notification_nums == 0) {
                    select { // Nested select
                        case c_cnt :> log.cnt: {} break;
                    }
                    do_print_log (log, NUM_WORKERS); // Only if DEBUG_PRINT_TEST is 1
                    do_swipe_leds (outP4_leds, led_bits, BOARD_LED_MASK_MAX); // led_bits may be "null"
                    // === Process received log.log_worked_ms, or just.. ===
                    tmr :> time_ticks; // ..repeat immediately
                    allow_button = (log.cnt >= 10);
                } else {}
            } break;
            case allow_button => inP1_button when pinsneq(button_current_val) :> button_current_val: {
                // I/O pin changed value
                // Debouncing not done (best done in separate task, with its own timerafter)
                log.button_pressed = (button_current_val == BUTTON_PRESSED); // May not reach do_print_log
            } break;
        }
    }
}

Tag <pre> only

// -----------------------------------------------------------------------------
// main
// Starts 1+NUM_WORKERS tasks, running on 2 or 1+NUM_WORKERS logical cores
// -----------------------------------------------------------------------------

int main() {
    worker_if_t i_worker[NUM_WORKERS];
    chan c_cnt;
    par {
        [[combine]] // NUM_WORKERS(4) = [cores,timers,chanends]->[3,3,11], if no [[combine]] then ->[6,6,11]
        par (int ix = 0; ix < NUM_WORKERS; ix++) {
            worker_task (i_worker[ix], ix);
        }
        client_task (i_worker, inP1_button, outP4_leds, c_cnt);
        round_cnt_task (c_cnt);
    }
    return 0;
}

Tag <pre> and some elements that terminate <pre>

<em> and <strong> blocks cannot be used inside <pre>. 

Correct

[[combinable]]
void worker_task (
        server worker_if_t i_worker,
        const unsigned index_of_server) {

    timer       tmr;
    time32_t    time_ticks; // Ticks to 100 in 1 us
    bool        doCollectData = false; // no em around doCollectData here
    worked_ms_t sim_work_ms = 0;
    unsigned    random_seed = random_create_generator_from_seed(index_of_server); // xmos
    unsigned    random_work_delay_ms;

    debug_print ("worker_task %u\n", index_of_server);

    while (true) {
        select { // Each case passively waits on an event:
            case i_worker.async_work_request () : {
                doCollectData = true; // no strong around doCollectData here
                random_work_delay_ms = random_get_random_number (random_seed) % 100; // [0..99]
                sim_work_ms = random_work_delay_ms;
                tmr :> time_ticks; // Immediately
                time_ticks += (sim_work_ms * XS1_TIMER_KHZ); // Simulate work
            } break;
            case (doCollectData == true) => tmr when timerafter (time_ticks) :> void : {
                // Now we have simulated that picking up log.log_worked_ms took random_work_delay_ms
                doCollectData = false;
                i_worker.finished_work();
            } break;
            case i_worker.get_work_result (void) -> worked_ms_t worked_ms : {
                worked_ms = sim_work_ms;
            } break;
        }
    }
}

How bad it became

Added one of each:

  • <em> then </em>
  • <strong> then </strong>

This caused <pre>..</pre> to become wrapped around them, and break up the original <pre>..</pre> block into several:

[[combinable]]
void worker_task (
        server worker_if_t i_worker,
        const unsigned index_of_server) {

    timer       tmr;
    time32_t    time_ticks; // Ticks to 100 in 1 us
    bool

doCollectData

 = false; // em around doCollectData here
    worked_ms_t sim_work_ms = 0;
    unsigned    random_seed = random_create_generator_from_seed(index_of_server); // xmos
    unsigned    random_work_delay_ms;

    debug_print ("worker_task %u\n", index_of_server);

    while (true) {
        select { // Each case passively waits on an event:
            case i_worker.async_work_request () : {

doCollectData

 = true; // strong around doCollectData here
                random_work_delay_ms = random_get_random_number (random_seed) % 100; // [0..99]
                sim_work_ms = random_work_delay_ms;
                tmr :> time_ticks; // Immediately
                time_ticks += (sim_work_ms * XS1_TIMER_KHZ); // Simulate work
            } break;
            case (doCollectData == true) => tmr when timerafter (time_ticks) :> void : {
                // Now we have simulated that picking up log.log_worked_ms took random_work_delay_ms
                doCollectData = false;
                i_worker.finished_work();
            } break;
            case i_worker.get_work_result (void) -> worked_ms_t worked_ms : {
                worked_ms = sim_work_ms;
            } break;
        }
    }
}

PDF Embedder url does not survive Google translate

Embed PDF without plug-in

Nov2024: I have started to replace the PDF Embedder, since it seems not to be fully working any more. I have seen pages come up with some read error message at the place.

However, one can embed a (single page?) PDF like this without any plug-in (from Beep-BRRR using smart home to extend its functionality where I don’t embed it like this, just with a download link as here, though. It is more scalable and zoomable when downloaded than when embedded as the below.). Test the two cases on mobile and laptop:


The code to insert looks like this (but the WordPress editor also adds a <span>..</span> field for the looks of the frame, not shown here), with some new lines added:

<iframe src="https://www.teigfam.net/oyvind/blog_notes/261/
drawing_45_beep_brrr_blinker_knocker_output_controlled_from_plejd_spr_01_on_off.pdf"
width="100%" height="600px"</iframe>

PDF Embedder when used

19Mar2020. However. I also see that some times urls attached to graphics won’t resolve either. This reply from wp-pdf seems very reasonable. Thanks!

Glad to hear that you are enjoying the PDF Embedder plugin! Unfortunately we do not have a way to resolve this issue. Google Translate doesn’t know how to pass the HTML elements within the URL instead of passing the URL as text, resolves the elements as their encoded versions. As you have noted, this also happens with other media links.

I have checked. The original here in English and the translated here into Norwegian. Languages don’t matter. All pictures except those by PDF Embedder are visible ok. When I press pictures and go to the links, either to the «resource page» or directly to the url to a larger size of the picture, then even those are resolved by Google translate. Even the audio file. What it complains about are two pictures that point to PDF’s, which it tells me is «too large to translate».

So maybe PDF Embedder should have a second look. I’ll mail them again (20Mar2020). However, they are not any «worse» than the links to pictures made by Wikipedia:

A German original is here, and it’s translated to English here. Pressing the first picture causes an error message. The others are just silent.

I use PDF embedder like this, see https://www.teigfam.net/oyvind/home/hobby/193-my-aquarium-holiday-automatic-feeder-for-granules/#implementation
Remove the underscore:
[_pdf-embedder url="https://www.teigfam.net/oyvind/blog_notes/193/193_fig2_design_fish_feeder_for_granules_by_oyvind_teig_2019.pdf"]

Fix to the SUB-MENU problem on MOBILE DEVICES: Revisited

20Mar2020. I did exactly as it says on Fix to the SUB-MENU problem on MOBILE DEVICES: Revisted. I have theme TwentyTwelve with TwentyTwelve-Child.

But before this I had removed all sub-menus, since the menu list had become too long on mobile devices. Now I go to branch-pages instead.

Single menu button instead of menu list?

20Mar2020: https://wordpress.org/support/topic/single-menu-button-instead-of-menu-list/

My menu list with sub-menus became too long on my mobile. So I removed the sub-menus and now go directly to sub-menu-pages instead. Just today I updated as specified in [above chapter] just in case. It didn’t help because I now did not have that problem. But it didn’t hurt either.

But is there a way to have a menu BUTTON appear in the top, right part of my mobile screen, instead of the list, on TwentyTwelve? Like on “all other” web pages these days?

(I did not find any such question here(?))

Max number of revisions

Max number of revisons (2) (Nov2020)

30Nov2020. See https://wordpress.org/support/topic/max-number-of-revisions-2/#new-topic-0 only to learn that nothing has changed, it’s still he wp-config.php file that needs to be edited (not wp-admin.php).

Max number of revisions (Apr2020)

1Apr2020. See https://wordpress.org/support/topic/max-number-of-revisions/#new-topic-0

Recipe is at https://wordpress.org/support/article/revisions/#revision-management

../oyvind/home/wp-config.php at the root of my WordPress installation (not in twentytwelve-child) were modified like this:

/**
 * wordpress.org/support/topic/max-number-of-revisions/#new-topic-0
 * Teig 1Apr2020
*/
define( 'WP_POST_REVISIONS', 5);
/* That's all, stop editing! Happy blogging. */

Don’t paste in the define... line. Type it in! To me it looked right in two editors, even the ‘quotes‘ were right. It was only when I typed the full line in that did not get:

Warning: Use of undefined constant �WP_POST_REVISIONS� - assumed '�WP_POST_REVISIONS�' (this will throw an Error in a future version of PHP) in /customers/f/c/9/teigfam.net/httpd.www/oyvind/home/wp-config.php on line 76

Now my revision number 281 to 282 became revision number 6!

Thanks to Steve Stern!

WP-Optimize plugin

Steve Stern (above) advised me to install the WP-Optimize plugin. I did. See here:

WP-optimize
I did! Fantastic!
The dB-file (by UpdraftPlus) was 381 MB before optimize and 6,7 MB after! (!!??)
The site now responds in a flash!

Some English

Some characters

» « &nbsp; Non-breaking space (here)
≈ &asymp; Almost equal
≡ &equiv; Equivalence, identical to (here)
~~~~ four tildes Date and signature in Wikipedia edits (here)
--~~~~ two lines and four tildes –»–
→ &rarr; Right arrow
← &larr; Left arrow
▢ &#x25a2; White square with rounded corners
° &deg; Degrees
⅔ &frac23; Two thirds (Only some fractions exist, this is not a generic &fracXY; formula). But 1/3 is here:
⅓ &#x2153; https://graphemica.com/%E2%85%93
ϕ &Phi; phi or diameter
‰ &permil; pro mille
π &pi; pi
⚡ &#x26A1; spark
µ &micro; micro
Ω &ohm; Ohm
? &#128512; Smiley
∞ &#8734; Infinity (eternity)
OE «overline» Line above, like logical «not»:
<span style=»text-decoration: overline;»>OE</span;>

Some of my ways

Me worry?

  • Links to note nnn reference [yy] as nnn:[yy], like 208:[1]. Also like 208:[Handling button presses] goes
    072:[18] («Bell Labs and CSP Threads” by Russ Cox)
  • Table standard cells or rows:
    <td style="vertical-align: top;">..</td>
    <td style="width: 50%; vertical-align: top;">..</td>
    Must be added by hand since the Table menu has no entry for it
  • Also, I try not to touch the vertical borders of a table so that the (standard) WordPress editor will not add the precise width:
    <td style="width: 53.82695507487521%;">..</td>
    Some times I want this, but if I don’t (try undo first!) I would cut the whole table from WordPress Text mode and paste into a text editor and remove the formatting (with search /replace to take a full column at a time), and copy/paste it back. If there are three columns I’d have to search/replace three times
  •  14  -14  is made from 
    <strong>
<span style="color: #ffffff; background-color: #ff0000;"> 14 </span>
<span style="color: #ffffff; background-color: #0000ff;"> -14 </span>
</strong>

    Some times I need to use &nbsp; non-breaking space to force spaces to be visible, even if the WordPress editor converts them to some kind of spaces that look like standard spaces.

  • Also observe the <mark>html text element causes this text to become highlighted with a yellow pen</mark>. It takes no parameters! Or do it <span style=»background-color: aqua;»>with any color</span>, as seen at https://www.computerhope.com/jargon/w/w3c-color-names.htm

HTML description list

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

The example is taken from here. I have used it, like here and this file is full of them. The above would look like this:

Coffee
Black hot drink
Milk
White cold drink

Plugin «Simple Download Monitor»

Update 17Jan2023: I have uninstalled this as I am more aware of problematic plugins. I don’t know if this is ptoblematic, but I only used it at one place:

I have a download page at https://www.teigfam.net/oyvind/home/sdm_downloads/poster-download/ that I think has a too narrow text layout:

Plugin Collapse-O-Matic and goto anchor at another page

Upadet 3Apr2021: If I set the Initial pause preload time from 1000 ms to 0 then an external link into a page works!

17Nov2020. I just have a feeling this has tp do with Collapse-O-Matic, but I don’t know:
Testing ‘goto anchor’

Text to ASCII Art Generator

Nice for code headings. It even takes the Ø in my name. From https://patorjk.com/software/taag/#p=display&f=Big&t=Øyvind%20Teig:

/*
  _____             _           _   _______   _       
 / __//            (_)         | | |__   __| (_)      
| | // |_   ___   ___ _ __   __| |    | | ___ _  __ _ 
| |//| | | | \ \ / / | '_ \ / _` |    | |/ _ \ |/ _` |
| //_| | |_| |\ V /| | | | | (_| |    | |  __/ | (_| |
 //___/ \__, | \_/ |_|_| |_|\__,_|    |_|\___|_|\__, |
         __/ |                                   __/ |
        |___/                                   |___/
*/

Free sticky/floating menu/button to the top of the page

See my WordPress forum post at https://wordpress.org/support/topic/free-sticky-floating-menu-button-to-the-top-of-the-page (1Jul2021)

Theme Twenty Twelve readability

7Jul2021: I had a complaint about readability and the font colour. I have now used TwentyTwelve for years and seen my blog on many machines, but have not discovered any problem. But I want to address it, since if he has a problem, then others will too.

I changed background from the default #060606:

to white #ffffff. This completely removed the left and the right side edges. However going to the least gray possible #fefefe:

took the left and right edges back again, which looks ok.

Then the font color. Picking it I see it’s 0x444444:

I cannot find 0x444444 in TwentyTwelve style.css and I don’t know how to override it in TwentyTwelveChild style.css.

I queried about this at the WordPress forum Global font color/colour.

Collapsing from the bottom of the fold

On the JQuery Collapse-O-Matic forum:

See https://wordpress.org/support/topic/collapsing-from-the-bottom-of-the-fold/#new-topic-0 (10Sep2021)

The author (twinpictures) did provide a reply that works! I have used it here: 219:[main.c config code (0106)]. It goes like this (remove ‘_’ in «_expand»):

[_expand title="main.c config code (0106)" id="0106_main_c_code" tag="h5"]
...text
<span id="bot-0106_main_c_code" class="collapseomatic colomat-close">Read less...</span>
[/_expand]

Also see https://pluginoven.com/plugins/collapse-o-matic/documentation/shortcode/

Failing plugins (Nov2021)

I got a complete crash in Nov2021, showing only a crash log or what it was.

FAQ Troubleshooting

I found the FAQ Trobleshooting and used my FTP client Cyberduck and renamed the /wp-content/plugins to plugins.hold. (Not wp-contents as suggested, I did file a report on it. See content vs. contents here). Then I followed the recipe and found that the following plugins caused all my pages to crash (even if they are not used all over):

  • Easy Code Manager (version 10) (crash)
  • Page Specific Menu Items (Version 1.6.5) (gave error page when saving a Post edit, but saved ok)
  • Slideshow (Version 2.3.1 ) (crash)

I deactivated these. I disabled automatic update for them as well, which on a second thought is not so smart. I have now enabled this again, sp that I don’t have to poll for their updates.

But then, to test if any new or updated version of these is working I need to do the quite bleeding procedure to activate them and risk a new crash. It’s then nice to have a print of the plugins dashboard page before the crash, because I have to activate all again after the crash.

After some time I got a mail from WordPress / Jetpack with these words (excerpt):

Your Site is Experiencing a Technical Issue

«Since WordPress 5.2 there is a built-in feature that detects when a plugin or theme causes a fatal error on your site, and notifies you with this automated email. In this case, WordPress caught an error with one of your plugins, Easy Code Manager. If your site appears broken and you can’t access your dashboard normally, WordPress  now has a special «recovery mode». This lets you safely login to your dashboard and investigate further (link that times out after 24h). When seeking help with this issue, you may be asked for some of the following information: WordPress version 5.8.2. Current theme: Twenty Twelve Child (version 1.0.0 2021.04.22). PHP version 8.0.12.»

Colour palettes

Have a look at https://coolors.co by Fabrizio Bianchi. It might just be of some help, I’d assume:-) But first: Palette (computing) on Wikipedia.

Web audit (Google Lighthouse)

  1. Google Lighthouse (Wikipedia): «Google Lighthouse is an open-source, automated tool for measuring the quality of web pages.»
  2. https://developers.google.com/web/tools/lighthouse – home page
  3. https://googlechrome.github.io/lighthouse/viewer/ – how to use it..
  4. https://web.dev/measure/ – ..with any browser

UpdraftPlus – Backup/Restore backup of database fails

See https://wordpress.org/support/topic/backup-of-the-database-fails/ (24Jan2022) where I have the following text:

My download of my DB update has started to NOT contain the database, but a short text file with some lines, including this:
# Site info: sql_mode=ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION
(Update: I guess this just is some info..)
But the log file contains (in addition to the above) at the end, this line:
0001.968 (0) The backup apparently succeeded and is now complete
If I go to my site provider (one.com) and do the phpMyAdmin and download the DB, it was 19 MB. After I cleaned it it was 15 MB. However, in both cases the UpdraftPlus WordPress Backup Plugin seemed to fail on this file.
one.com us using the latest stable PHP, which now is “PHP 7.4, but it will soon be updated to 8.0”. UpdraftPlus – Backup/Restore is Version 1.22.1. WordPress is 5.8.3. The theme Twenty Twelve is 3.5.
Even if I have older backups stored, where the DB file is fine, I cannot tell when this first happened.

The solution was to untick the Open «safe» files after downloading in the macOS Safari browser. The database is the only one that’s packed in gz format, everything else is in zip. See What format are backups made in? Is it nasty and proprietary? For some reason Safari has started (?) to unpack this wrongly (?) (In Norwegian: skru av instillingen Åpne «sikre» filer etter nedlasting.)

Cross-site tracking

New 28May2022. See Cross-site tracking

Some pics some times sporadically show the frame only

New 5Jul2022. See Some pics some times sporadically show the frame only. It’s jetpack who delivers the pictures for me. I just updated the Jetpack plugin, and so far it looked like this solved the problem! Thanks @threadi!

Organic Themes plugin

New 5Sep2022. See https://wordpress.org/support/topic/organic-themes-plugin/

Logged-in menus not visible on many pages (so editing not possible)

New Jan2023. See https://wordpress.org/support/topic/logged-in-menus-not-visible-on-many-pages-so-editing-not-possible/

  • Advanced Editor Tools (previously TinyMCE Advanced)
  • Akismet Anti-Spam
  • Classic Editor
  • Collapse-O-Matic
  • Disable «BIG image» Threshold
  • Jetpack
  • Jetpack Boost
  • Jetpack Protect
  • PDF Embedder
  • Really Simple SSL
  • Table of Contents Plus
  • UpdraftPlus – Backup/RestoreWP-Optimize – Clean, Compress, Cache

Fold handling without Collapse-O-Matic plugin

Table of Contents Plus

New 18Oct2024. See https://wordpress.org/support/topic/anchor-when-quotes/#post-18080742. Here is the text:

I see that at some version change the link to
iOS «Sound Recognition»
was
#ios_8220sound_recognition8221
but now it is
#ios_laquosound_recognitionraquoWhen using these internally in the text it’s a nuisance that this changes. Is there some way to keep to the old way?The page I need help with: https://www.teigfam.net/oyvind/home/technology/219-my-beep-brrr-notes</a

I also now see that there is a vulnerability with this plugin. See https://wpscan.com/vulnerability/641e4fc3-4214-4c2e-8245-15e9dcdd37b4/

Summaries in English and Norwegian

<a name="english"></a>(<a href="#norwegian">English</a>) <em>Text</em>

<a name="norwegian"></a>(<a href="#english">Norwegian</a>) <em>Tekst</em>

I did this the first time in Beep-BRRR using smart home to extend its functionality. The idea is to let the English reading people also be able to read the much shorter summary in Norwegian. This makes them point to each other.

 

Leave a Reply

Dette nettstedet bruker Akismet for å redusere spam. Lær om hvordan dine kommentar-data prosesseres.