WordPress

New 27Jan2013, updated 16Aug2018
This page is in groups Technology and Publishing.

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

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: http://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): http://www.teigfam.net/oyvind/home/models/046-sbb-ae-3_6-ii-h0-scale/#Selection_criteria

Academic style reference list

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

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 CustomisingAdditional 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: http://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):

<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: See Gutenberg editor (below). The version as of 8Aug2018 most probably destroyed 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]

SSL HTTP login

New 1Sep2013, updated 2Sep2013

I probably shouldn’t shout this too load, but the villains probably know it already. The “Smashing WordPress” book by Thord Daniel Hedengren (3rd ed. page 25) tells me that I can add this line to wp-config.php:

define('FORCE_SSL_ADMIN', true);

But Hedengren also states that “SSL won’t work without support from your host”. I asked one.com and they quickly  and concisely replied that “SSL/HTTPS is not supported on our servers. It’s not possible to enable this on our servers.” I don’t think that was the answer I wanted to hear. Update 2Sep2013: In the acknowledgement (bottom) one.com state that they are looking at the possibility of supporting SSL/HTTPS on their servers.

That being said, one.com sent a letter two days ago with this text (translated from Norwegian):

If you are using WordPress on your domain teigfam.net at One.com, we would like to inform you about what we do to ensure your safety when using WordPress.

Over the last few weeks we have seen an increase in attacks on WordPress blogs and websites, not just at One.com, but also from other web hosting providers in the world.

This type of attack, also known as “brute force” attack, focus on getting unauthorized access to your WordPress page, by testing your credentials against a variety of commonly used user name and password “admin” and “123456”.

Since this is important to us, and because we want to protect our customers’ data in the best possible way, we have begun to introduce measures to fight against these attacks. We can already see a decrease in the amount of “brute force” traffic we get, which means that WordPress installation is already much safer.

Make sure your WordPress installation is always up to date. You should also choose a secure password consisting of uppercase and lowercase letters combined with figures.

If you experience any problems when you log into your WordPress page, you are welcome to contact our customer service to help you find a solution.

www.one.com / chat

Also other support (mentioned in this blog note) makes me rather satisfied with their service. But I would like to know why they don’t support encrypted connections between my machine and their servers, so that nobody could listen on it and manipulate – even if I personally don’t think I have experienced that it’s needed. Maybe it isn’t?

I have informed one.com about this blog note 1Sept2013,  and they have acknowledged (with new information, see “Update 2Sep2013” above).

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

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: http://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="http://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

(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 http://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: http://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

  • 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 http://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 http://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: http://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 most probably caused by Gutenberg.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

*

* Copy This Password *

* Type Or Paste Password Here *

19,548 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>