WordPress adding new theme

Using Themes

Topics

What is a Theme?

Fundamentally, the WordPress Theme system is a way to “skin” your WordPress site. Yet, it is more than just a “skin”. Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the visual presentation of your content and other data on your WordPress site, as well as behavior of certain site’s elements while interacting with visitors.

A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a website. These files are called template files. A Theme modifies the way the site is displayed, without modifying the underlying software. Themes may include customized template files, image files (*.jpg, *.png, *.gif), style sheets (*.css), custom Pages, as well as any necessary code files (*.php). For an introduction to template files, see Template Files.

Let’s say you write a lot about cheese and gadgets. Through the use of the WordPress Loop and template files, you can customize your Cheese category posts to look different from your Gadgets category posts. With this powerful control over what different pages and categories look like on your site, you are limited only by your imagination. For information on how to create custom look for various templates in your theme, take a look at Template Hierarchy.

Template Hierarchy – the structure of WordPress theme files

To better understand this diagram, you can interact with it.

Default Themes

The Twenty Twenty Two theme is the first ever default block theme. It currently only works if you are using WordPress 5.9 and above or if you install the Gutenberg plugin alongside prior WordPress versions.

NOTE: All default themes now come bundled with block patterns, which allow you to easily create beautiful layouts. Find out which patterns are added to themes on the Make WordPress Blog.

You can switch between Themes from the Appearance menu in the Administration Screen. Themes you add to the theme directory will appear in the Administration Screen > Appearance > Themes as additional selections.

Themes Administration Screen – Installed Themes

Get New Themes

The WordPress Theme Directory is the official site for WordPress Themes. Every theme in this directory is reviewed by a dedicated team and tested against wide range of rules, all of which are ensuring secure and pleasant experience for theme user.

With over 9,000 themes in the directory, you can easily find the right one for your site with advanced search feature using filters for layout, subject and specific theme’s features. This includes finding Block themes which support full site editing features.

Themes Directory – Feature Filter

If you need more than a screenshot and features list to decide whether the theme fits your needs, you can see the demo for the theme with Preview feature on theme’s info page.

Theme Info Page

Adding New Themes

Most of themes in WordPress Theme Directory come with installation instructions, especially the ones that may require more steps than the usual theme installation. Be sure to read through and follow those instructions for the successful installation of the Theme. If your Theme does not work after following any provided instructions, please contact the Theme author for help.

Adding Block themes

A block theme is a theme that uses blocks for all parts of a site, including navigation menus, header, content, and site footer. These themes are built for the newest features coming to WordPress that allow you to edit and customize all parts of your site.

Currently, you can add block themes in the same way you would any other theme. However, the Live Preview option is removed which means you will need to set up a test site first to explore the theme before activating if you wish to preview it. You also will not have the option to use the Customizer since block themes rely on the Site Editor to edit all parts of your site. In order to customize a block theme, you’ll need to activate it first.

Adding New Themes using the Administration Screens

You can download any theme from WordPress Theme Directory directly to your site by using the Add New option in the Appearance sub-menu.

1. Log in to the WordPress Administration Screens.
2. Select the Appearance screen, then Themes.
3. Select Add New.
4. Either use the Search or Filter options to locate a Theme you would like to use.
5. Click on the Preview link to preview the Theme or the Install link to upload the Theme to your site. Note that
6. Or use the Upload Theme button at the top of page to upload a zipped copy of a Theme that you have previously downloaded to your machine.

When the Theme is already downloaded but not activated Live Preview option will give you a preview of your site with your own, existing content.

Adding New Themes by using cPanel

If your host offers the cPanel control panel, you can use its Upload option to upload the Theme files to your site. For this you will need Theme files in an compressed archive (.zip or .gz).

1. Download the Theme .zip file to your machine.
2. In cPanel File Manager, navigate to your Themes folder. Depending on your hosting, path to Themes folder can differ a bit but essentially you are looking for public_html inside which you’ll find /wp-content/themes/.
3. Once you’re inside the Themes folder in cPanel File Manager, click on Upload and upload that .zip file you saved in Step 1.
4. Once the .zip file is uploaded, right click on the name of that file in cPanel and select Extract from the context menu.
5. When Theme files are successfully extracted, follow the instructions below for activating the new Theme.

Adding New Themes Manually (FTP)

To add a new Theme to your WordPress installation via FTP protocol, you’ll need FTP client and extracted Theme files.

1. Download the Theme archive (.zip) and extract the files it contains. You should have a folder named as theme itself, containing theme files.
2. Using an FTP client to access your host web server and navigate to /wp-content/themes/ directory.
3. Upload the Theme folder to this directory on your host server.
4. Follow the instructions below for activating the new Theme.

Activating the Theme

Now that new Theme is in /wp-content/themes/ directory (whether you used Administration Screens, cPanel or FTP method), this new Theme is ready to be activated. All themes in /wp-content/themes/ directory are available for Activation and Update (when update is provided by theme author), but only one theme from this directory can be Active.

When theme is Activated it means that this theme’s style and functionality (look and behavior) will be applied on your site. You will be informed by Administration notification about successful activation of the Theme.

Activated Theme Notice

To activate a Theme for your site:

1. Log in to the WordPress Administration Screens.
2. Select the Appearance screen, then Themes.
3. You should see here all themes from your /wp-content/themes/ directory and from here you can see details for each of them by clicking on Theme Details (rollover the Theme thumbnail).
4. Live Preview option will give you preview of your site with your site’s content.
5. To activate the Theme click the Activate button.

Your selection will immediately become active.

Note: If the Theme preview is blank, do NOT activate the new Theme without investigating further. Your site may not be displayed correctly, otherwise. If you do not see Theme’s thumbnail at all, your new Theme might be corrupted or broken. Take a look below installed theme’s thumbnails if there is any info about broken themes. In this case contact the Theme author for help.

Broken Theme

Creating Themes

If you are interested in creating your own Theme for distribution, or learning more about the architecture of Themes, please review the documentation regarding Theme Development.

If you simply want to customize your current Theme for your own use, consider creating a Child Theme.

Whichever the case, you are welcome to join the Themes Team and their dedicated #themereview Slack channel. In that channel, you can ask for help on developing themes for WordPress Theme Directory or even start reviewing themes yourself.

Источник

Developer Resources

Chapters

Creating new themes using the Site Editor

Topics

An alternative to creating themes from scratch using code is to make updates to an existing theme in the Site Editor and export the changes.

The export functionality copies your theme files into a downloadable zip file. The feature has limited support in WordPress 5.9 and improved support in WordPress 6.0:

• 5.9: The Site Editor exports the templates and template parts but not the theme.json configuration file. The export includes the file structure but not the color palette or block settings.
• 6.0: The Site Editor exports a complete copy of your active theme, including changes to templates and styles. This theme is ready to be installed and activated.

You can use this method to speed up theme creation if you are familiar with the block editor but not the block markup.

Editing an existing theme

The Site Editor is only available when a block theme is active. Because of that, you must first install and activate a block theme that you use as a base for your new theme.
– Make sure that the theme you use has a license compatible with GPL so that you have the legal right to make changes and transform it into your own theme. You can use any block theme from the WordPress theme directory as your base theme.

Optionally, you can download the Empty theme from the theme experiments GitHub repository. You do not need to remove any excess templates or block styles from this theme because the theme is nearly empty.

Only user roles with the correct capabilities (for example, administrator) can access the templates.

In the Site Editor, click on the WordPress icon or Site icon in the top toolbar to open the list of templates or template parts:

Click on the name of the template or template part to open it in the Site Editor.
You can also use the Add New button to create templates.
Once inside the Site Editor, you can start editing by moving, deleting, or replacing the blocks.

Exporting

To export changes you have made in the Site Editor, open the More tools & options menu and select export. Exporting will download a file called theme-name.zip (If you are using WordPress 5.9, the file name is edit-site-export.zip). Depending on the size of the theme, the export can take a few seconds.

Creating a theme from the exported files

Using WordPress 5.9

To convert the export to a complete WordPress theme, you must add the minimum required files.

Step 1: Rename the theme folder to your theme name. If your theme is called “My first theme” the name of the folder should be my-first-theme.

Next, please create a new style.css file and place it in the root folder.

Create an empty index.php file and place it in the root folder.

Your theme should now have the following structure:

You can now activate the new theme, and you have created a theme almost without using code.
You can add a theme.json file, block patterns, and block styles to improve the theme further.

Using WordPress 6.0

The exported theme is a copy of the active theme. If you install the zip file through the Add Themes page in the WordPress admin area, you will be asked if you want to replace the current theme.
Do not do this if you have edited someone else’s theme since you will lose your changes if the original theme is updated.
Instead, rename the theme to make it your own. How to rename the theme depends on how the original theme is built. You need to update:

• The theme folder name
• The theme name and text-domain inside style.css
• The author name and links in style.css and readme.txt

In most cases, you can use a search and replace tool and replace the following:

• Text domain in translation strings
• Prefixes for PHP functions
• Slugs used in the patterns block

Should be changed to

Should be changed to

Sharing your new theme

If you want to share your theme with others, you first need to complete the rename.
You also need to edit template files and remove image IDs and navigation menu references that are unique to your website.
This is because if your theme refers to a specific navigation menu that only exists on your website, or to an image in your media library, these will not display correctly.

Finally, add credits to the original theme and the theme author.

Learn how to share your theme on WordPress.org in the chapter: Releasing Your Theme.

• Created 2022-01-20
• Updated 2022-05-19

Источник