WordPress – Updates

Needed to Update the version of WordPress to 4.6. Well technically didn’t need to, but thought it best to. There are two routes to updating:

  1. Online using ftp to download the updates
  2. Offline using http GET to download the compressed file to disc and then manually updating at you leisure.

Option 1 seemed good – so gave it a try. Everything start OK then failed with the message ‘Could not create directory’. Slightly worrying as I thought I had full permissions across the WordPress directory. Also a bit annoying that it didn’t say which directory it could not create, however as always Google is your friend. Several web pages on this topic. The one that I found most useful was how-to-solve-wordpress-could-not-create-directory. From the web page about the only issue I could see was that root was the group owner of the directory that owned the WordPress directory. Changed that, retried, and everything went like clockwork. Did have a slight pause for concern when it seemed to be stuck on step six or seven (cannot remember which one), but it was just a case of waiting and letting it run

Updated to 4.7.3. With the ownership problem solved as above the whole process was straightforward. It does pause for a while on step 6 ‘Disabling Maintenance mode…’ which is when it is actually doing the installation, as this is the last step, but wait just a few minutes, then up comes the shiny new 4.7.3 logo.


It has been a while since I visited the Web Site, and even longer since I added to the blog. Reason – I started a new contract in Belfast – Great place btw – but it has meant that my focus has been on getting things together there, as opposed to setting up the web site. However back now.

The first thing I had to do was a refresher course on my Dev env set-up, passwords and state of the whole web site when I had left. Second thing was to register and delete the fifty or so SPAM ‘likes’. They are an annoyance, but that is all. The final thing was decide what my priorities were.

  1. Improve the blog visuals. Made a couple of small improvements. Need to run through the WordPress templates to get a better layout and text font.
  2. Bring everything up to date version wise.
  3. Investigate (and better still solve) the layout problem with the Web pages on certain devices
  4. Merge my Site with WordPress, including getting WordPress pages on the Quintic site menu and getting the theme for the WordPress pages aligned with the Quintic styles.

First part of the about. Start learning how WordPress sites are organised and work. Am starting with Themes.

WordPress themes are under …/wp-content/themes/<theme_name>. WordPress comes with a small number of standard themes named after the year they were published.  (eg twentysixteen).

With each theme directory are two important files:

  • styles.css
  • functions.php

As you can probably guess, these are the bootstrap files for loading the themes CSS and PHP functions.

Child Themes

Have created my first ‘Theme’. The easiest way to create a Theme is to sub-class from an existing theme, which is what I did. I sub-classed twentysixteen and then set the background of all <p> elements to a very light grey. Worked a treat. The instructions on the WordPress site are great and easy to follow.


Landscape vs Portrait

Back on the perennial problem. Thought I had the solution. Re-did the Portrait background image. Much happier with the latest version. It keeps the whole of the abacus in the background, much more balanced. However, for some reason, the information that is supposed to overlay on top of the image is now appearing below the image. need to resolve this, but the problem is, everything looks correctly configured.

Interesting Landscape/Portrait dilemma which I have now resolved. The problem I was encountering was getting both style and Javascript parameters set-up correctly. I had been using the @media css mechanism for selecting the styles, and the ‘window.matchMedia’ events to set the Javascript/non-style attributes. Problem was I could not guarantee that these would in sync. Indeed they generally were not. I have now reverted to a single mechanism – that of ‘window.matchMedia’ (It has to be that route, because from JavaScript you can set styles. You cannot set non-style elements/attributes from css.)

The effect is now almost perfect. Image and left and right text margins vary depending on orientation. The only slight issue revolves around text height on the iPad / iPhone in landscape mode. Text is relatively too large and text writes off the bottom of the image. The effect is fine on PC (at least with reasonable landscape ratios). Somehow I need to adjust text point size for screen width. I need 128 chars in 60% of screen width in Landscape mode.

However what all the above goes to prove is that I cannot use this style of screen for general web pages. For fixed/known content pages, it is possible to manually construct the page. However it is completely disregarding the flow nature of the content. To retain that, I have to go down a more traditional route page construct. Which means to make them interesting I need to include graphical content, and a bit of ‘style’

On Width and Text size. There are, in addition to the traditional size measurements of:

  • px -Pixels
  • pt – Points
  • in – inches
  • cm – centimeters
  • mm – millimetres
  • pc – picas
  • em – One current font size
  • ex – width of lower case ‘x’
  • % – % of em

We now also have:

  • vw – Viewport width
  • vh – Viewport height
  • vmin – Smaller of Viewport width and height
  • vmax – Larger of Viewport width and height

The re-factoring that I undertook as part of rationalising the javascript and styles meant that I could easily move the Quintic font styles into Landscape and Portrait specific css style sheets. Then it was only a case of determining the best ‘vh’ settings for the orientations.

Pleased to say  I now have exactly what I want, on PC, iPad, & iPhone. OK the text is small on the iPhone, but then it always is.


About Page

Tried a few variations on the About page, just to see what they looked like.

  1. Replaced the transparent image on the About page, with the non-transparent version (on the home page) . Set the transparency of the <nav> <aside> to clear and <div class=content>  to various values. Hope was that it might bring out the background image more at the sides, yet still leave it faint behind the text and the text still legible. Not a great success.
  2. Similar to above but set the transparency of <nav> <aside> <div class=content>  to various equal values, but the effect is not the same as having a faded background, on which you layer semi-transparent content.

End result – reverted back to original idea.

Generated much better Portrait images.

Web Page Dynamics. Problems and Solutions

Case 1

So I have a problem. The Web Site look pretty good as long as the visible area is approximately the same size as the background image. However re-size the viewable area and we get a couple of problems:

  1. The text (certainly of the About page) extends below the image and encroaches on the footer. (Not sure why the footer does not move down).
  2. Even if the footer did move down, we would be a situation of a having a ‘GAP’ between the background image and the footer.

Need to think about this one.

Oh and have decided to rename Blogs – Blog. It seems to be an agreed ‘standard’ and add it to the menu bar at the top of the pages. The easiest way to achieve this was to add a soft link (ln -s) from blogs to blog, and then under Settings>General change both urls to point to blog. So far this seems to be working a treat.


So the pages on the site are a known ‘Fixed’ size (Home, About, Contact) can retain a fixed size screen structure, with a single background image.

For dynamic pages (Blog and all topic pages) I will have to forego the background image, and will need to come up with a theme/scheme instead.

Replaced the images on the About with half size ones – looks much better.

Narrowed the central area to 60%, and increased the Nav and Aside areas to 20% each. has improved the look, and means that when reading (at least in landscape) your eyes are not having to scan.


WordPress – Blog Posts not found

Case I

So this was, on the surface, a real disaster. Went to look at my Blogs and decide what to add today – and the response from WordPress was –  “Oops! That page can’t be found”.

Now given that I am self-hosting and not that familiar with WordPress and its configuration that was a bit of a worry. The good news was that all the blogs were listed on the rhs, and all the WordPress links were there and active. I could log-in to the site and once logged in the posts were all there and intact. Looked on the Server and everything seemed to be in the correct location. So it looked like a configuration issue.

Now Google is usually your friend, the problem was when I Googled this issue all the links were about people using the WordPress service direct, or using it through their respective ISPs.  Eventually though did manage to get an idea that it could be caused by the index.php file no longer being found.

Well that file was there and in the correct location. Then I remembered that yesterday I was looking at the Settings>General and changed the Web Site url home page from quintic.co.uk/blogs to just quintic.co.uk. That was the problem. As far as I can tell I did follow the instructions correctly, and whilst the main site did display correctly, and I could log-in and execute all admin functions, the Blog posts would not display. Still don’t know what the issue was, but I have reset the url and all is fine. That will have to do for now.

Update: All is not fine. The blog is listing as one continuous blog. If I click on the individual links though, it comes up page not found. Strange. When editing the blogs presented individually. When viewing though that does not seem to be the case.

Case II

A second case of No Blogs –  Only this one was worse. No WordPress access at all!. WordPress could not access the database.The initial issue was the blog link on the Header bar stopped working. The error being reported was a “500 – Server Error”. Not a lot of help. Luckily, in the browser history, there was a link to wp-admin, and this reported WordPress could not access the database. Now this was worrying because:

  1. I had just uploaded a new version of the web site from the Windows env.
  2. I had added my own tables to the MySQL database
  3. I had updated the user profiles to match those of the Windows env.

and I had no idea which of the above had caused the problem – if any.

However ‘Panic Not’ as  Frankie Howerd would have said. Google is your friend. It pointed me to the wp-config.php file, which details the User and Password used by WordPress. That was when I discovered the problem. We have two sets of Users.

  1. MySQL Users
  2. WordPress Users

To keep things simple (and indeed I thought required) I made the user names the same. However the passwords were subtly different. I had manually changed the passwords on the MySQL accounts to match those of the WordPress accounts, but that change was not reflected in the wp-config.php file. Once reverted, and my own php files updated to reflect the correct passwords all was OK.

Layout and Template

So a bit more reading, a bit more understanding and I think I am finally there with what I want. In my previous post I mentioned what it was I wanted from my Web Site.. Problem I was getting was positioning, flow and general layout.  What I have arrived at that works is the following:

  1. <header>, <div id=”mainBody”>,<footer> as the first order layout. Nothing special about that, and using default position  and display options these elements will line up in row order.
  2. Within <div id=”mainBody”> I added an <img> element. This will be the background. The src attribute is set by JavaScript depending on orientation / aspect ration of the window. Within the style sheet I set the width to 100%, and zindex to -10 to ensure it will be behind any other  elements that are included in <div id=”mainBody”>.
  3. All other elements that are added to the <div id=”mainBody”> have position:absolute and display:inline-block.  This allows me to position them where I want, and ensures that they will flow in row order. (See https://www.w3schools.com/css/css_inline-block.asp for explanation of display: options)
  4. For the template page for the main subject content I have, from left to right:
    1. <nav> with width=15% height=100% – Selection of items on the topic
    2. <div> with width=70% height=100% left=15% – Main content
    3. <aside> with width=15% height=100% left=85% – Any aside notes.
  5. The height=100% ensures that the elements fill the full area from <header> to <footer>
  6. The background for these three content elements will be white, slightly transparent. In order for the three columns to visually appear separate, I will have to play around with width percentages, and borders. Lets see what makes for a good visual impact.

Next step is PHP and how to populate a template page from information from a d/b. Because what I am not going to do is produce a separate static page per subject per topic. Rather there will be a template page, as described above populated via PHP.

A bit premature about the ‘Next step is PHP’ . As it transpires getting the visuals and layout to work well with Landscape and Portrait took a lot of trial and error. A couple of pointers:

  1. Where the background image dictates the ‘active’ size of the page, we need:
    1. header
    2. image
    3. footer
  2. With any text needing to have position:absolute above the image
  3. We don’t need the <nav> and <aside> elements on these pages. What we want is the text centred, and spaced inset as needed.
  4. On non-background image pages we need <nav> and <aside>.
  5. <nav> is position:fixed
  6. Both <div class=content> and <aside> need to be moved left to avoid <nav> (<nav> as fixed does not enter into the document flow)
  7. <aside> somehow needs to be aligned with the main text to which it relates (don’t know how to do that yet)
  8. The colours and visuals on these pages needs some thought.

Just about there with a template. Couple of issues:

  1. With <nav> fixed, we have to move both <mainContent> and <aside> left the same width as <nav>. In itself, not an issue, except the maths didn’t quite work, and if <mainContent> and <aside> attempted to occupy all the remaining width (ie. all widths totalled 100%), then a slight resize could trigger a complete loss of the <aside> element. Solution was to reduce total width to be just 99%.
  2. By default inline-block <div> elements align at the baseline. Reset vertical-align:top. Solved this.
  3. I also need to create an element that has an Image with an overlaid Title, as that combination looks like playing a significant part in my content pages.

I think the first main content page though is going to be a ToDo page.

Astonished that after so long there is still no ‘HTML Include’ facility as standard. There is an RFC in with W3C, and it probably will be accepted, but then its still a wait until the Browsers support it. Difficult to believe. I was working round that problem 20 years ago. Look on the web and there are a huge number of ‘Work around solutions’

Today I installed WAMPServer for managing the installation. Two problems:

  1. WAMPManager will not start-up. Reason: Unknown. The app is there in task manager, but nothing is coming up. Tried starting as Admin, no difference. Then uninstalled and re-installed as Admin. No difference. Am now searching the logs.
  2. The WAMP Server starts up, so Apache is installed and running. Cannot find the php config files. Two reasons for this. The first is that I need to install as Admin. The second is that I need to ensure the hosts file under <system32>/devices is open for reading. Executed these two, and everything now looks good.
  3. So problem with WAMPManager resolved. What I had not realized was that WAMPManager starts up as a Tool Tray ICON/App. Once I realized that and started it under Admin everything was fine. I then went on to implement/test an env whereby I can inject HTML into the output supplied by php. I now have an env whereby I can request a page, and the <head>, <header>, and <footer> elements are supplied from snippets. Brilliant

Web Page Templates, Dynamics and php

The first problem to try to solve was one I had encountered several years earlier – how to inject html snippets into an html page? I was expecting that by now HTML would have had this feature. No! There are a number of solutions on the internet using JavaScript, but all have their own quirks and issues. I dropped back to using server-side construction via php and MySQL. Solution I devised was:

  1. A common php page that took a single parameter.
  2. Parameter was an index into a table in d/b. Table had an text column containing html
  3. Within the html we could include filenames, encased in escape chars, to indicate html to inject. This mechanism was recursive – ie the injected files could also include escaped filenames to inject.
  4. Variables in the html, encased in different escape chars to the filenames, defined names pointing to a (page.name):value pair table in the d/b from which the values were retrieved and substituted. These were also recursive in implementation. ie The injected text could also include variable name (and file names) to substitute.

The whole provides, what at the moment feels like a light-weight, but workable mechanism for allowing me to have multiple pages of similar structure, but differing content.

Little Changes, Big Issues:

So this entry is about keeping changes isolated. The problem  I am encountering is, again, one I had back in the 1990’s, where changes are not isolated. I made a change to the style of a class for the template page, and it worked well. The problem of course is that the class is used on none templates pages and these no longer displayed correctly. That in itself is annoying. What makes the problem several degrees worse is that the cause and effect are not associated.  The change to the class style was made on day ‘n’. The adverse effect on the none template pages was not noticed until day n+m., at which point a large number of changes have been made, and we do not know which changed caused the adverse effect.  So it’s important during web site development that you managed / control changes to CSS styles.

One way would be to differentiate between Released CSS files and Development / Release Candidate files. Changes to Released files would trigger a full site test.

Another way would be to ‘know’ which pages use a particular style, so that when a style is changed you know which pages to test.

As an aside – Released files can, and should be consolidated, to eliminate file bloat.

Absolute vs Relative – more on this topic.

possibly, absolute dictates page width / height



Background Image and Landscape / Portrait

For the web-site I had a few concepts that I wanted to put into place.

  1. <header> and <footer> in a gradient colour. Opposite direction of gradient for <header> to <footer>.
  2. Background Image filling rest of page. Image would be opaque where necessary.
  3. Image would switch from Landscape to Portrait as aspect ratio of window changed. (i.e. Mobile device re-oriented, or Browser window on PC re-sized.)
  4. The Background image would dictate the size of the content area. All content would either fit inside this area, or would be scrolled within its containing element, which would fit within the area.

Issues implementing the above.

  1. As I did not want the <header> and <footer> to intrude on the background image I could not set the <body> background attribute to the image. Initially I tried using a <div id=”MainContent”..> and setting its background to the image required. Except that didn’t work because the background attribute does not contribute to the size of an element, hence the <div id=”MainContent”..> element was invisible unless given content, and even then its size was never going to be governed by the background image. Instead I included a specific <img> element and used that as the background. However that in itself brings up two issues
    1. The src attribute on <img> is not a style attribute and so cannot be set using CSS via the @media pseudo command.
    2. To use an <img> it as a ‘backdrop’ meant setting position:absolute  to remove it from the document flow and allowing all the other content to sit on top.
  2. As we were unable to use the @media pseudo command to switch images between landscape and portrait I had to write a bit of JavaScript to undertake the same task. This was OK, as until I had read about @media, that is what I was expecting to have to do.

HTML5, CSS3 and JavaScript

HTML5, CSS3 and JavaScript

Just a few notes on HTML5, CSS3 and JavaScript.

HTML5, CSS3 and JavaScript are not actually optional technologies. If you do dive into HTML5 then you need CSS3 and JavaScript. You can use plain old HTML without CSS and JavaScript, and everything will work fine. But if you do delve into HTML5 then you will need CSS3 and JavaScript.

Best description I have read about these three technologies is:

  • HTML5 – Defines the content
  • CCS3 – Defines the appearance
  • JavaScript – Defines the behaviour


Necessary basics for beginners.

Learning all of the various HTML tags and there attributes is obviously required, and I am not going to detail those here. However there is one over arching piece of information that is important when designing and that is understanding the document flow, the HTML elements that participate in document flow and those that do not. (Indeed to make it even more confusing, that elements that normally participate in document flow can be removed from the flow by setting their display attribute).

Document Flow defines how HTML elements order and present themselves when displayed. For example you may want an image to appear in-line in a sentence, or have the image appear to the side with the words flowing around, or even the image acting as a background.

So first thing which elements / tags do NOT – EVER impact document flow.

  • <head> –  and any elements that are included in the Head section
  • <style>
  • <span>

The way that other element participate in document flow can be affected by their display attribute, which can have a host of values, (see: https://www.w3schools.com/CSSref/pr_class_display.asp), but those most commonly used to affect document flow are:

  • none – removes the element from participating in the document flow.
  • inline – Displays an element as an inline element (like <span>). Any height and width properties will have no effect
  • block – Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width
  • inline-block – Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values

DIV & Positioning

I did have a problem positioning and sizing <div> elements. When I was last into HTML, to get the layout you needed you used tables and tables within tables. Today, quite rightly, tables are used for what they where intended, and layout is all about <div>. So what are the positioning and sizing problems?

  1. <div> is a block element. The width of a block level element, unless set explicitly, is 100% of its containing element. Similarly its height, unless defined explicitly, is defined by its content. No content -> no height -> nothing visible. So if you are wondering why when you have set the background of your <div> element (to say an <img>) and the <div> element is not displayed, it is possibly because the <div> has no content and hence no height or width. Judging by the Web, this seems to be a common mistake.
  2. Second is the position attribute, or rather the relative value of position. With position:relative the <div> element (indeed any element) is still participating in the document flow. So regardless of where it is moved to (i.e. displayed), it still leaves the space where it was in the flow. With position:absolute that is not the case. The element is removed from the document flow. That change in behaviour between position:relative and position:absolute does make a huge difference as to when you use one over the other. The choice of which to use is not just about the reason you want an element located where you do, but also how you want it to behave.

Loading HTML snippets

One omission in HTML that I am amazed has not yet made it into the standard, is the ability to inject HTML snippets into a document. You can inject javascript from files. You can inject CascadingStyleSheets (and in both of these files you can inject other files to whatever depth suits).  However you cannot inject HTML into an HTML document. There are several web sites out there detailing techniques for using javascript to achieve (possibly) what you want, but for there not to be a mechanism to inject HTML yet seems inconceivable.

I remember when I was developing web pages back in the late 1990’s one issue was that standard Headers and Footers had to be either manually copied to every page (and updated on every page!), or else loaded dynamically using server-side programming. Guess what? We are still in that situation today. I notice that an RFC for this functionality has been submitted to the W3C. I haven’t read the RFC, so cannot comment on its suitability, but I do hope that, if not this proposal, then something that supplies this functionality is approved soon  – and then implemented in the Browsers in short order.


The title bar on the Quintic pages have the ‘Q’ in Quintic displayed in a larger font than the rest of the text. Originally I did this manually, that is ‘Q’ and ‘uintic’ were separate words, and I manipulated the fonts, margins and alignments to get the effect I wanted.

I then came across CSS Pseudo-Classes and Pseudo-Elements https://www.w3school.com/CSS/css_pseudo_elements.asp . Specifically the first-letter pseudo-element.  At first glance this was exactly what I needed. So I:

  • Created a CSS .LogoText::first-letter definition (.LogoText being the class for the ‘uintic’ text).
  • Changed ‘uintic’ to ‘Quintic’
  • Deleted the stand-alone ‘Q’

and …. – it didn’t work. Why not? Because the first-letter pseudo element only applies to the first word in a block. In my case the block started with the Quintic logo (image file), and so first-letter did not apply to Quintic. Instead I had to:

  • Wrap ‘Quintic’ in its own <p></p> tag (although any block element would have done) and then set this <p> tags display attribute to inline-block so that it continued to flow after the image, but was still a new block as far the first-letter was concerned. This works a treat and has simplified my HTML.


Development Environment

Quick word about the development environment I have chosen. The site itself is running on a Raspberry Pi 3. Superb piece of kit. Configured as a headless server, it just sits there consuming not a lot of power (around 3 Amps when working, and that includes the external hard drive) and is quite capable of running WordPress, Apache2, PHP and MySQL. At least to the level of traffic that I am expecting.

It is not, though, a development environment. For the moment I have chosen VS-2015. It is an IDE with which I am familiar, albeit predominantly in a C#/Desktop app development mode. However I am finding it extremely good for Web Development. It has good intelliSense for HTML, CSS and JavaScript, even keeping track of HTML element IDs, and Class attributes, and offering them up when working on the style sheets. Also test and debug facilities are good, allowing you to test in any Browser that is installed on your PC.

To upload to the Raspberry Pi I am using WinSCP. Brilliant little free app for moving files and directories to/from Windows/Linux. Recommend checking out their web site:  WinSCP

GIT for version control


  1. WinSCP is great for file transfer. However it does mean that it is up to me to keep everything in Sync. Not a problem at the moment, might be later as the site grows.
  2. Some point soon, I am going to be getting into PHP and MySQL. MySQL is not be an issue with VS2015, but the PHP aspect is a whole new ball game. You can get PHP language plug-ins for VS2015, but I don’t think that extends to the Visual Studio Development Server.  Two possible solutions:
    • Install WAMP on PC and use Apache as the VS Debug Server.
    • Move over to MAC and start using Eclipse (another blast from the past for me)

Have now installed WAMP on the Laptop. I would say is that it does feel like an Add-on, but it does work well. I am able to run PHP and MySQL, test the MySQL d/b creation scripts, and fully test the site with the exception of the WordPress blog.

Do have to watch out for case sensitivity issues, both with filenames (Windows vs Linux) and with MySQL. I am used to SQL Server not only are object names (databases, tables, views, columns etc) all case insensitive but the default setting (which most people seem to retain) is that even data comparison is case insensitive.

Issues / Differences between WAMP and LAMP

  1. When constructing the template page I omitted the <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> element. This didn’t affect the pages on the PC. On the RasPi the page was missing a  number of elements and of those that were displayed the text fonts were incorrect.
  2. Database object names are case sensitive  on Linux.