Twenty Twenty Four

Twenty Twenty-Four Theme Released

WordPress brand new theme Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four – see WP.org theme howepage – comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4 “Shirley”.


The section below is a reprint of Introducing Twenty Twenty-Four by Jessica Lyschik

 

TmeZpzB533sRWhcyhKd1dVN4NZTgMZOTZR8bwJ6sG0bWU DME1jdVOqn6atBGVd4INuaZytnO9iY

Twenty Twenty-Four Concept

The idea behind Twenty Twenty-Four is to make a default theme that can be used on any type of site, with any topic. Because of that, and contrary to past years, it has no single topic. Instead, three use cases were explored: one more tailored for entrepreneurs and small businesses, one tailored for photographers and artists and one specifically tailored for writers and bloggers. In essence, it’s a collection of templates and patterns which, all combined, make up a theme. These patterns include different Home templates for different use cases such as an About page, project overviews, RSVPs, and landing pages.

AFafWZnc4VAUwJ5bhxSecfzLg915TtNItpoBcMRPO6OcT8qmrQuUif7a0WXW91k vATH7VldanR iFPL0f9swYodx f3vMCEZDZl7e1Ly8 5TURZH Y43khXI0fVqvmoA7FhsScIH qhLGSG
SGK3vLCzfXQiJokkscCkbbXyYPjLwNn8aJqkzYSfRbD32yYhvVF8nobG oIh3Co5qPbAujXyTaIGnl2DuJiqXv1VLKVlp9TfEspYPh2JjsZJdXd 6ctqhjbgnwysj7GYvCYKZI5mPQYs5Yh
1QbjvkPQOtBo2Npy lcSCLC3ZuNuMniAkDvYu0USmkHMspOHPHYA3BJUisKPXuNRba2KJLyNorzef4yHNk5Q4Tf2oxB8t ZLe4L6 5cC7r YM

Twenty Twenty-Four’s styles and elements are instantly recognizable, inspired by modern design trends. The theme uses Cardo font for headlines, which provides a hint of elegance and a sans-serif system font for paragraphs. The default color palette of Twenty Twenty Four is light, and it also includes a dark style variation that maintains the same typography. Additionally, there are two more sans-serif variations available: one in light mode and another in dark mode.

Twenty Twenty-Four will be a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme fully compatible with all the site editor tooling and it will surface new design tools like the details block or vertical text. Another key intent for the theme is to properly present whole page patterns and template variations so that users don’t need to assemble whole pages themselves, thus easing up their site building process.

Thanks to Twenty Twenty-Four’s remarkable flexibility and adaptability, a multitude of possibilities open up with just a few adjustments to color and typography. This beautiful theme was designed by Beatriz Fialho.


The section below is a reprint of Introducing the twenty twenty-four theme by Wes Theron

Video Tutorial: Twenty Twenty-Four Theme

In this tutorial, we will explore the new WordPress default theme. The idea behind Twenty Twenty-Four was to make a default theme that could be used on any site, with any topic.

Learning outcomes

  1. Highlighting who can benefit from the theme.
  2. Identifying what makes this theme unique.
  3. Exploring the various patterns and templates that come with the Twenty Twenty-Four theme.
  4. Discovering the available style variations.

Comprehension questions

  • What makes the Twenty Twenty-Four theme different from other default themes?

Transcript

Introduction

Good day, and welcome to Learn WordPress. Let’s take a closer look at the great new theme, Twenty Twenty-Four, that is now available. The Twenty Twenty-Four theme is designed to take advantage of the design tools introduced in WordPress 6.4.

Learning outcomes

The learning outcomes for this session are to highlight who can benefit from the theme, to identify what makes this theme so special, and then to explore the various patterns and templates that come with the Twenty Twenty-Four theme, as well as, discover the available style variations.

Who can benefit from the theme?

Who can benefit from this theme? The Twenty Twenty-Four theme is versatile and designed for various website types, with a focus on three use cases, entrepreneurs and small businesses, photographers and artists, and lastly, writers and bloggers. The idea behind the Twenty Twenty-Four theme was to make a default theme that can be used on any type of site with any topic. If you are an entrepreneur or business owner, the theme has got you covered. There are multiple patterns available to build a business website. The Twenty Twenty-Four theme also really caters well for photographers and artists. And finally, the theme can also be easily customized for blogs.

What makes this theme special?

Firstly, what makes this theme so special? Well, number one, it’s modern and elegant design. Number two, there are a variety of patterns available. And number three, one of my personal favorites is the fact that you have access to whole page patterns and templates. And of course, there are beautiful style variations to choose from.

Whole-page patterns

The first example I wanted to show you was how I created the structure for this About page in one click. As we scroll through the About page, you will notice different sections. And these sections are, of course, patterns that have been added together. To achieve this, let’s start with the blank page. Click on the Inserter, go to Patterns, and in this case, I am after a page pattern or a whole page pattern. So I’ll select Pages, and here we can see a preview of the different pages that are available, and I will select the About page, or the About page pattern. Here I have the layout for my entire About page and now I can just start modifying it and changing it to meet my needs.

Let’s add another whole-page pattern. In this case, an RSVP landing page. After selecting pages, I will scroll down to the bottom and select RSVP Landing. Now I have an RSVP landing page with vertical text, which I can update and tweak to meet my design needs.

Single patterns

Let’s look at some other patterns that come with the Twenty Twenty-Four theme. First up is a pricing table. Next, you can add a pattern to introduce your team to your clients. Or maybe you would like to add a testimonial to a page. There is also a cool call-to-action banner pattern that you can use to get more subscribers. Or maybe you would like to add a section about frequently asked questions. Lastly, there is even a pattern to show off client logos or sponsorships. There are many other patterns to explore and use. It is also worth highlighting some gallery patterns that come with the Twenty Twenty-Four theme to display images or to create a portfolio.

Templates

Now that we have talked about all the fantastic patterns that come with the Twenty Twenty-Four theme, we will shift our attention to templates. Let’s make our way to the Site Editor and select the blog home template. Here we will see that the theme provides us with a whole page template. When we open up the template, we will notice that the structure for our home page has already been created with a beautiful layout and design. Now the user can merely add their own content and make the relevant modifications.

One of the other available templates worth pointing out is the Page with sidebar template. This is perfect for bloggers or for folks who prefer a sidebar on their website. There is also a template named Single with sidebar which allows you to assign this template to single posts if you want your single posts to also have a sidebar. Another unique template that comes with your Twenty Twenty-Four theme is named Page with wide image.

Style variations

Now that we are in the Site Editor, we can also make our way to Styles to explore the various style combinations that come with our theme. When I click on Browse styles, I get a nice zoomed-out view of all the different style variations. This allows me to see how I can change the look and feel of my site. The theme incorporates the sophisticated Cardo font for headlines and Sans Serif for paragraphs for enhanced readability.

Conclusion

Enjoy exploring the new default theme, and visit Learn WordPress for more tutorials and training material.

image of green font over black background

My Lovely 7 HyperText Access Files

Introduction

A powerful configuration tool named .htaccess file (starts with a dot, and has no extension) allows you to do many things, such as:

  • Add re-directs
  • Force SSL / HTTPS
  • Harden security and WordPress files

The more your HyperText Access file is optimised, the better, because your web host server will read it and follow its rules for your WP site. It’s even recommended to use several of those files, at various places, with different content (more information below).

Overview

Main WP .htaccess File:
Location and Access

Location

You will find it in your site’s root folder ; such as https://seo-services-bristol.co.uk/.htaccess

Access

You won’t reach it via the WP admin area, but via your web hosting control panel (cPanel, hPanel, SG SiteTools, etc.). Then go to Site > File Manager > “My domain” > public_html > .htaccess

Main WP .htaccess File:
Creation and Edit

Create

If you do not see it, it might be “missing” – if your website had no use of it so far.

  • One way to create it is to go to your WP admin area
    Go to Settings > Permalinks > click Save Changes
    Then once in your server control panel, you should find it.
  • Another way is to go to your cPanel/hPanel/SG SiteTools
    Go to Site > File Manager > “My domain” > public_html
    Click “New file” > Create “new file” > Name it “.htaccess”.

Amend

Double-click on it, edit and save. We highly recommend to save a copy on a NotePad .txt file everytime you amend your .htaccess. Even if you have backups of your site. Obviously this critical file will change a lot over the years, due to plugins adding some rules on it, possibly due to scripts add-ons / tests you’ll do to improve things, which might end up in altering the front end… Having a copy of your .htaccess prior amending it allows you to revert to your previous working version, if needed, within a couple of minutes, without replacing your whole site content (with a backup).

Main WP .htaccess File:
Essentials

Permalinks Rules

The URL of your posts (their web address) can just mention the post name, or the date and post name, or the archive number, or other settings. Based on your preferences and on where exactly your site was installed, basic WordPress might add a script looking like this:

# BEGIN WordPress
# The directives (lines) between “BEGIN WordPress” and “END WordPress” are
# dynamically generated, and should only be modified via WordPress filters.
# Any changes to the directives between these markers will be overwritten.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* – [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Notes:

  • Despite you see # BEGIN WordPress, it does not mean that this script must be top content of your .htaccess ; you might have more important rules than those.
  • If you change your permalinks settings and click save, WP will adjust the script on your file. But if you change anything from the script yourself, directly in the file, WP will recopied the original script anytime you’ll save the permalinks in the WP admin area, as stated in the script.

HTPPS Enforce

In order to force HTTPS, some plugins will add a rule in your hypertext access file, forcing all requests to go through encrypted connection. For ex, we use the SG Speed Optimizer that adds this script:

# HTTPS forced by SG-Optimizer
<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>
# END HTTPS

Note:

  • We do not recommend to combine this script with another one as this might create issues.

Hardening WordPress

An important layer of protection should be added to the wp-includes files to protect them from being accessed by any user. We follow WP securing wp-includes recommendations:

# Block the include-only files.

RewriteEngine On
RewriteBase /
RewriteRule ^wp-admin/includes/ – [F,L]
RewriteRule !^wp-includes/ – [S=3]
RewriteRule ^wp-includes/[^/]+\.php$ – [F,L]
RewriteRule ^wp-includes/js/tinymce/langs/.+\.php – [F,L]
RewriteRule ^wp-includes/theme-compat/ – [F,L]

Main WP .htaccess File:
Extra Steps

Disable Directory Listing

Prevent someone trying to browse the contents of any directory of your site, by adding the following lines of code:

# Deny Directory Listing
Options – Indexes

Disable Server Signature

Use the following code to prevent identifying your website server:

# Disable server signature
ServerSignature Off

Disallow Access to Files

Protect sensitives files from attacks and intrusions by adding the following lines:

# Block sensitive files
<Files .htaccess>
        order deny,allow
        deny from all
</Files>
<Files wp-config.php>
        order deny,allow
        deny from all
</Files>
<Files xmlrpc.php>
        order deny,allow
        deny from all
</Files>

Additional WP .htaccess Files

/wp-admin Directory

Protect your WordPress admin area by blocking access to installation files
Create a new .htaccess file in the /wp-admin directory and add the following lines:

# Block installation files
<Files install.php>
order allow,deny
deny from all
</Files>
<Files setup-config.php>
order allow,deny
deny from all
</Files>

/wp-content/uploads Folder

Block the option to execute PHP code in the “wp-content” folder via PHP file uploads.
Create another .htaccess file in the /wp-content/uploads folder and use the following lines:

<Files *.php>
deny from all
</Files>

/wp-content/plugins Folder

Limit the unnecessary execution of PHP code in the plugins folders that shouldn’t be accessed directly. Create another .htaccess file in the /wp-content/plugins folder and copy the exact same code as above.

/wp-content/themes Folder

Similarly, disable PHP execution in the themes folders. Again, create one more .htaccess file in the /wp-content/themes folder with the exact same code used above for the folders: plugins and uploads.

/wp-content Directory

This is an easy one if your site is hosted with us. Just to let you know that the following code will be added for you on an extra .htaccess file, in the /wp-content directory.

# SGS Directory Hardening
<FilesMatch “\.(?i:php)$”>
   <IfModule !mod_authz_core.c>
        Order allow,deny
        Deny from all
   </IfModule>
   <IfModule mod_authz_core.c>
        Require all denied
   </IfModule>
</FilesMatch>

# SGS Directory Hardening END

/wp-includes Directory

Another easy one if we take care of your site. You will find the following code already added for you on an additional .htaccess file, in the /wp-includes directory.

# SGS Directory Hardening
<FilesMatch “\.(?i:php)$”>
   <IfModule !mod_authz_core.c>
        Order allow,deny
        Deny from all
   </IfModule>
   <IfModule mod_authz_core.c>
        Require all denied
   </IfModule>
</FilesMatch>
<Files wp-tinymce.php>
   <IfModule !mod_authz_core.c>
        Allow from all
   </IfModule>
   <IfModule mod_authz_core.c>
        Require all granted
   </IfModule>
</Files>
<Files ms-files.php>
   <IfModule !mod_authz_core.c>
        Allow from all
   </IfModule>
   <IfModule mod_authz_core.c>
        Require all granted
   </IfModule>
</Files>

# SGS Directory Hardening END

Conclusion

It is not unusual to find up to seven HyperText Access files in your website content, with only three of them similar to each other. Take some time to optimise them all to reinforce the security of your site. You can lean more by visiting our web security projects and by reading SG web security tips. Take advantage of our security package for WordPress that covers login and site security, spam prevention, and more. Get in touch to discuss your needs.