Categories
Create A Blog Software Engineering

WordPress TwentyTwenty Theme vs. Other WordPress Themes

Why WordPress TwentyTwenty Is Still the Best Default WordPress Theme in 2022

WordPress TwentyTwenty Theme: A Review

As a long-time WordPress user, I have had the opportunity to try out a wide variety of themes over the years. From the sleek and modern to the downright quirky, I’ve seen it all. But recently, I had the chance to try out the all the latest WordPress themes and in the end I picked on: TwentyTwenty. And I have to say, I liked it. I liked it enough I chose it for this blog!

I know it is the theme from 2020 and this article is from 2022, but let’s talk a little about the simplicity of the theme, why 2020 was a standout year for mobile first design, and how that ended up impacting the quality of TwentyTwenty on a technical level.

Why is TwentyTwenty a Standout Theme?

The typeface choices and mobile-centric design of the WordPress TwentyTwenty theme are the first year the theme was so simplistic that the text was front and center. It makes for a great blog. The background color not being a hard white also helps it go easy on the eyes, a trend with darkmode and things that were really made popular in 2020.

Is the TwentyTwenty Theme Easy to Use?

First and foremost, the TwentyTwenty theme is incredibly user-friendly. Setting it up on my WordPress site was a breeze, and I was able to customize it to my liking easily. The default color scheme looks nice. Additionally, the theme is fully responsive, which means that it looks great on any device, from desktop computers to smartphones.

But don’t let the ease of use fool you – the TwentyTwenty theme is packed with powerful features that make it a great choice for any website. For starters, the theme offers a wide range of customization options. From changing the layout of your site to adjusting the font and color scheme, there’s almost nothing you can’t change with this theme. Additionally, the theme includes a variety of built-in widgets that make it easy to add extra functionality to your site, such as social media buttons, search bars, and more.

Why Is It Superior?

One of the standout features of the TwentyTwenty theme is its support for block-based editing. With this feature, you can easily create beautiful, complex layouts for your website without any coding knowledge. Simply add blocks for text, images, videos, and more, and then arrange them however you like. This makes it easy to create unique and engaging content for your site, and the results are truly impressive.

Most WordPress themes support this but the TwentyTwenty theme was the first year that the simplicity of the design really allowed the block editing to stand out and shine. If the design is simple and straightforward the blocks always work well.

Choosing a Default WordPress Theme Has Perks

Another great thing about the TwentyTwenty theme is its support for a wide range of plugins. Whether you want to add an e-commerce store to your site, a contact form, or a social media feed, you can easily do so with the help of a plugin. This means that you can add almost any type of functionality to your site, without the need for any technical knowledge. The simplicity of the design means most plugins will look OK out of the box.

What Makes This Different Than Other Themes?

Very specifically in 2020 the TwentyTwenty theme was the first theme that did an excellent job stripping down the WordPress block components into big, bold, simple design elements. This was because of a focus on mobile but it ended up making the theme a lot less complex than TwentyNineteen or TwentySeventeen, (both popular themes). The TwentyTwentyone and TwentyTwentytwo themes both expanded on the original Twentytwenty design concepts, offering alternate layouts and ultimately in 2022 a lot more complexity reminiscent of the 2019 theme.

Any Downsides or Negative Things About TwentyTwenty?

There are a few things that are a little weird. For example the default site title does not include the site title written in text, I had to add that ,it was just trying to use the image logo. Strange. I also thought that the index page was a little intense. I ended up toning down the title font size and rearranging things on the title page to make all the articles fit a little bit better. I recommend turning on using article summaries or your homepage will become a massively long scroll.

TwentyTwenty Theme: Is It Worth It?

Overall, I was extremely impressed with the WordPress TwentyTwenty theme. It’s user-friendly, customizable, and packed with powerful features. Whether you’re a beginner or a seasoned pro, I highly recommend giving it a try.

Categories
Create A Blog Software Engineering

SUCCESS! Old WordPress Articles Are on the New WordPress Blog!

Just as the title describes I managed to import all of the old WordPress articles in to the new WordPress blog! This is great news because Google had been annoying me with emails about how I was missing the articles. They must have been really popular!

How Did I Do It ???

All I had from the previous blog was a MySQL dump of the database. This made it a little difficult because I couldn’t see a visual reference of the old blog. I ended up importing the old database dump in to a new database on the same MySQL database server.

After that I wrote a custom PHP script which connected to the old database (made from the dump) that then selected any published posts and looped through to gather their categories and tags then inserted them in to the new blog’s database. I think it went pretty well!

If I get some requests for it I can post my PHP script on Github but I think there are probably more useful tools out there for backing up and exporting a WordPress blog it was just quick and easy for me to make a script. I highly recommend using the explicit Export and Import feature already built in to WordPress

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