Categories
Create A Blog

WordPress Themes – Testing New Themes & Pardon the Mess

As part of moving this blog and setting it up again I’m testing various WordPress themes. Please pardon the mess and the visual intensity as I adjust a few things.

Review of PopularFX Website Templates WordPress Themes

I initially started with the base selection offered by default to a new Bluehost hosting account and selected a very nice WordPress theme and from the “PopularFX Website Templates” plugin.

The PopularFX Website Templates does have some very nice WordPress themes and a lot of them are structured to fit specific small business or small website verticals and that could be really helpful for a lot of people. I also enjoyed how those themes used some really nice improvements on the content blocks for things like the WordPress index page.

The WordPress theme I chose also prompted me to download some temporary stock photos to fill out the design and it has some warnings about the licensing of the images it wanted to download. I didn’t want those images so I chose not to download the stock photos and images. The theme I chose looked *really* nice in the sample but ended up being very plain when I tested it and applied it to my website. That was a little disappointing that it did not look as good with fake stock graphics.

I also got in to the Theme Files editor for that particular PopularFX Website Template WordPress theme and I found that the PopularFX Website Templates theme files themselves were laid out in a very straightforward and clear file structure. The files themselves had simple naming convections and followed most of the best practices and common file locations. The more complex PHP functions and methods, including things like content tags, were easily found and edited and the code itself was concise.

I Didn’t Try Pagelayer

The new Bluehost WordPress hosting came bundled with a plugin called “Pagelayer” which I have not yet tried 🙁 Sorry Pagelayer. As a software engineer I prefer a more hands on approach to complex layouts for blog articles and pages so that I can control the HTML, Javascript, and CSS. I disabled the Pagelayer plugin.

I eventually wanted a more simple WordPress theme and started activating and deactivating the themes.

Activating, Deactivating, Changing or Switching WordPress Themes

It is very easy to change or switch themes in WordPress, go to “Appearance” and then click on “Themes”. Hover over any theme and click “Activate”.

Default WordPress Theme Review

I tried a number of different themes looking for something that would easily & tastefully fit a few of the existing WordPress posts I already have. I tried all of the default WordPress themes from “Twenty Fifteen” all the way up to “Twenty Twenty Three”

As of the time of writing this article I disabled PopularFX Website Templates and I have currently chosen the default WordPress theme of “Twenty Twenty” because I like the look of the <hr> and I also like how the <code> tag style looks inline. I am not a fan of how that style looks when broken up in blocks. The previous iteration of this blog used WordPress 2015 (yikes!) so I also have had good experience with the longevity of the built-in WordPress themes. Once I pick a permanent WordPress theme for this blog I probably will not want to change it for many years.

WordPress Themes and Better Styling of Code Blocks

I will probably be looking for a better CSS solution for WordPress themes with multi-line code blocks.

The Internet’s Original Under Construction GIF

If you are looking for the original “Under Construction” GIF from the early days of the Internet in the 1990’s here it is. The Original Under Construction GIF From the early Internet in the (the GIF of a person shoveling on a yellow sign):

Original Under Construction GIF, Animated Image ofRoad Sign of Person Shoveling

Categories
Software Engineering

Apache + Ubuntu + CORS + Multiple Subdomains + PHP Session Cookies + XHR Credentials

Overview:

I recently had to do a little hunting around for an issue related to everything you see in the title.

It was frustrating because I wanted to allow * domains to be able to send requests and the Stack Overflow comments are mostly about IIS servers or the ones with Apache directives as examples don’t seem to work or don’t handle full wildcard.

I should mention that allowing full wildcard Access-Control-Allow-Origin with XHR credentials enabled can be a security risk.

Here’s how to get a CORS request working with Ubuntu Apache and PHP across multiple subdomains and have the PHP session ID cookie send correctly on every request and how to handle some of the errors you may encounter.

Situation:

I was making an AJAX request from one subdomain (https://subdomain1.example.com) to a different subdomain on the same root domain (https://subdomain2.example.com).

I had already called a PHP session_start(); for the user on a page on the subdomain I was making the request to. This means the user has an active PHP $_SESSION on https://subdomain2.example.com.

I had set the PHP $_SESSION to use cookies at the root domain.

I had Header set Access-Control-Allow-Origin "*" in my .htaccess file.

I was using the following setup for calling session_start() on top of the PHP defaults. Be careful setting cookies at your root domain, they will be sent along with *all* futures requests to *all* subdomains:

ini_set('session.use_cookies', 'On');
ini_set('session.use_trans_sid', 'Off');
ini_set('session.cookie_domain', '.example.com');
session_set_cookie_params(0, '/', '.example.com');
session_name('example_session');
session_start();


Expected:

When making an AJAX CORS request the cookies, (and therefore the PHP $_SESSION session_id() being passed as a cookie) the should be sent along correctly with the HTTP request.

Actual:

All cookies, including the PHP $_SESSION session_id(), are not being passed along as part of the request.


Errors:

You may see this situation manifest as number of errors in your Javascript Developer Console.


Error:  The 'Access-Control-Allow-Origin' header contains multiple values , but only one is allowed.

Reason: You are trying to set more than 1 value for Access-Control-Allow-Origin

Solution: Use a series of Apache statements in your .htaccess file that dynamically assigns the Access-Control-Allow-Origin to whatever the incoming request is. (If you would like to use wildcard domains please see the solution further down the page for wildcards.)

Code:

<IfModule mod_headers.c>
SetEnvIf Origin ^(https?://.+\.example\.com(?::\d{1,5})?)$ CORS_ALLOW_ORIGIN=$1

Header append Access-Control-Allow-Origin %{CORS_ALLOW_ORIGIN}e env=CORS_ALLOW_ORIGIN

Header merge Vary "Origin"
</IfModule mod_headers.c>


Error:  The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin.

Reason: You are already setting a Access-Control-Allow-Origin or you are setting it incorrectly. You may be making multiple Header set Access-Control-Allow-Origin statements (because there can only be one domain set the last one overwrites any previous set commands.)

Solution: Use a series of Apache statements in your .htaccess file that dynamically assigns the Access-Control-Allow-Origin to whatever the incoming request is. (If you would like to use wildcard domains please see the solution further down the page for wildcards.)

Code:

<IfModule mod_headers.c>
SetEnvIf Origin ^(https?://.+\.example\.com(?::\d{1,5})?)$ CORS_ALLOW_ORIGIN=$1

Header append Access-Control-Allow-Origin %{CORS_ALLOW_ORIGIN}e env=CORS_ALLOW_ORIGIN

Header merge Vary "Origin"
</IfModule mod_headers.c>


Error:  The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Reason: You are trying to set "*" for your Access-Control-Allow-Origin but when you are using credentials you can only set it to 1 specific subdomain.

Solution: If you want to use a full wildcard style entry to accept requests from any origin and let them send in cookies then use a series of Apache statements in your .htaccess file that dynamically assigns the Access-Control-Allow-Origin to whatever the incoming request origin is. The first SetEnv handles the root domain wildcard and the second SetEnv handles the wildcard subdomains.

Code:

<IfModule mod_headers.c>
SetEnvIf Origin ^(https?://.+\..+(?::\d{1,5})?)$ CORS_ALLOW_ORIGIN=$1
SetEnvIf Origin ^(https?://.+\..+\..+(?::\d{1,5})?)$ CORS_ALLOW_ORIGIN=$1

Header append Access-Control-Allow-Origin %{CORS_ALLOW_ORIGIN}e env=CORS_ALLOW_ORIGIN

Header merge Vary "Origin"
</IfModule mod_headers.c>


Error:  The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Reason: You are trying to send along the cookies as part of the AJAX request but your server is not current accepting the incoming cookies from the origin domain using Access-Control-Allow-Credentials

Solution: Use an Apache statement in your .htaccess file to always accept incoming credentials (aka cookies)

Code:

<IfModule mod_headers.c>
Header always set Access-Control-Allow-Credentials true
</IfModule mod_headers.c>


Error:  The PHP $_SESSION cookie is not being passed correctly to the server. It is not available in $_COOKIE and new calls to session_start() create a session with a new ID.

Reason: You are not correctly sending along the cookies with the AJAX request.

Solution: Use jquery AJAX and set the xhrFields to have withCredentials set to true

Code:

$.ajax({
xhrFields: {
withCredentials: true
}
});

Categories
Create A Blog

Hello World 2: The Continuation

This is a reboot of the old blog at this URL, but the old blog posts haven’t been transferred over yet!

The old blog was very old & it was time to move it to a newer location to make the hosting and use of WordPress a little less cumbersome.

If you are looking for some of the programming help articles, or any of the other help articles from this site’s old blog, please be patient! Hopefully the old posts can be revived at the new location shortly.

Categories
Create A Blog

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!