WordPress Themes and Templates | tutorial part 5

5. Part of my tutorial for EU websites: WordPress themes and templates (important for design as well as functionality). + tutorial to download

contents

Tutorial Part 5 – WordPress Themes

When it comes to building websites, two terms pop up – theme and Templates. Since these two are often lumped together or confused, here is a brief explanation.

A WordPress theme is responsible for the complete design of your WordPress website. It contains colors, backgrounds for footer, header, body and every other area. The theme is also responsible for layout elements, e.g. B. which sidebars we use and where they are located, the page width etc.

Source: › PIXELEMU (from English)

WordPress themes form the basis for the websites. You determine which elements you can use on your website. They also make it possible, among other things, to adjust the head (header) and foot (footer) area individually. Since each theme has different requirements, the customization options also vary.

Templates

So while WordPress themes determine the big picture, determine Templates the layout for individual pages. Unfortunately, we cannot do without technical terms at this point.

Template files are PHP files in the WordPress theme and are responsible for the output of the HTML markup for displaying the website. They mostly consist of a mix of HTML and PHP code. Basically, a WordPress theme only needs a single template file: The index.php. However, most developers use specialized templates to adapt the display of the theme depending on the context and to store frequently used template blocks in their own files.

Source: › THEME CODER

PHP is a scripting language whose code is processed on the server side and whose source code is not transmitted to the browser. Thus, the server only delivers the HTML files contained therein to browsers. If you look at your WordPress installation on the server, you will find next to the one already mentioned index.phpfile among others also a

  • single.php
  • page.php
  • archive.php
  • search.php
  • home.php
  • header.php
  • footer.php

HTML, on the other hand, is not a programming language in the traditional sense. Rather, it is a markup language that represents elements such as headings or graphics. HTML documents are independent of the operating system. In this way, you see (roughly) the same presentation of a website in every browser.

Pre-installed WordPress themes

After this little excursion into the world of programming and on the server, we continue on the WordPress dashboard. Once you have WordPress set up on your server, one of the WordPress themes is already activated. It’s usually the latest in “WordPress’s own” range of themes – currently Twenty Twenty-One.

However, you will probably want to use a different theme that is better tailored to your planned website. To find this, start again in the dashboard sidebar: Theme > Themes.

A window will then open with all the WordPress themes already installed on your server. You can also see which one is active.

On the one hand, there is no limit to the number of WordPress themes downloaded. On the other hand, too many inactive themes represent unnecessary ballast. Therefore, one (max. two) replacement theme(s) is actually sufficient. If something goes wrong with your active one, you could switch relatively quickly (see below).

WordPress themes ranking

Theme search

Assuming you don’t want to stick with Twenty Twenty-One, you would have to look for another theme. To do this, click at the top of this window Add to. The new window initially shows a selection of featured WordPress themes. Already installed themes are marked.

Since the offer is quite large, you can apply some filters to narrow down the selection.

  • Presented
  • Popular
  • Latest
  • favourites

You also have the option of filtering by function. If you e.g. For example, if you want to have a blog about food & drink with a customized logo and grid layout, click on the appropriate functions. WordPress will then show you a selection of WordPress themes that meet your criteria.

WordPress themeWordPress Themes – Offer (Screenshot: eb)

Quality of the WordPress theme

After you’ve found an eligible theme in your search, it’s time to check it out. Either click Details & Preview or on preview. In the window that now opens, you will find a short description on the left-hand side. You will also get an impression of what the start page would look like.

Essential › see more details directly at WordPress.org. Either enter the name of the WordPress theme you are interested in in the search field. Or you can use the same filter functions as in your dashboard. However, if you click on the theme here, a more detailed information page appears.

On the one hand you will find information about the version, updates, rating etc. as well as a link to the respective theme homepage. On the other hand, you will also learn what elements the theme contains and how many times it has been downloaded per day.

WordPRess Themes - Poorly Made Websites

installation

The easiest way is to install WordPress themes directly from your dashboard. To do this, click on the selected theme Install > Activate.

Going through WordPress.org or the developer’s homepage is a bit more cumbersome. In this case, first download and save your theme to your computer. Then visit your dashboard again.

  1. design
  2. theme
  3. Add to
  4. Upload theme
  5. Search

After using the previously saved .zip file marked, click To install. Then that Activate do not forget.

Other sources of supply

To find a suitable and good theme, you can also search the Internet. There are numerous websites that present, describe and evaluate WordPress themes. After clicking on the related link, you sometimes end up at WordPress.org as well. Mostly on the developer’s theme homepage though.

The advantage is that you learn even more about the theme. You will also get a better impression of the possibilities offered by the theme.

You can also visit one of the theme portals. As a trustworthy provider of good quality WordPress themes would be, for example Elma Studio, Envato Market (Theme Forest), aThemes or Elegant Themes (if you really want to work with a page builder).

› Elma Studio – Website | › Theme Forest – Website | › aThemes Collections – Website | › Elegant Themes – Website

Changing the theme

As indicated above, you can quickly get one switch to another theme. To do this, simply activate another theme that is already installed in your Themes window. Again, you can first use the preview function to see what your home page will look like.

Unfortunately, it’s not as easy as it sounds. Because the changes you made to your “old” theme are largely lost. As a result, you will have to redo all the adjustments. It can also happen that certain elements of the old are not included in the new. Finally, the image sizes often do not fit, so that you would have to re-optimize the images accordingly.

tip 1
A theme change needs to be well thought out and you should plan some time for the new setup.

WordPress Theme Premium

As a beginner or for a test run, the use of a free WordPress theme is a good idea. Because it is easy to install, has all the basic requirements in terms of functionality and design without being overloaded. However, it can only be adjusted “out of the box” to a very limited extent.

If you don’t have at least basic CSS and HTML coding knowledge, you may quickly reach the limits of what is possible. In addition, a reference to WordPress and/or the theme developer appears in the footer of your website. You cannot remove this display either.

So if the free version is not enough for you, you have to get the corresponding one Premium theme obtain. Its installation requires either the steps described for WordPress.org. Or you can upload it to your server using an FTP client.

First, visit the theme homepage. There you will receive information about the range of functions and the costs. Depending on the developer, there are different packages. Some only offer a Pro version for a website. While others also offer a multi-site version or a business version for use on an unlimited number of websites.

In addition, the offers differ not only in price, but also in terms of usage and support duration. You will often find the following variants

  • Pay once: Support for 1 year; Usage unlimited
  • Annual payment: use and premium support as long as you pay for it

If you choose the cheapest option, you should consider that support does not only mean assistance in case of problems. Because it is much more important that your theme also receives updates over the long term.

On the one hand, these plug recurring security gaps. On the other hand, they adapt the functions to changes in WordPress themselves. That’s why it’s not a good idea to set a time limit on support for websites that are supposed to stay online for a longer period of time.

Using a premium theme

Normally, you first create an account on the developer’s or portal’s homepage. You then decide on a theme, enter your payment information and then download it. More detailed information on the procedure can also be found on the respective homepage.

Some developers also distribute the Pro extension(s) in the form of plugins. Then first install this(s) WordPress plugin(s). Then, in the plugin settings, paste the activation code that you received from the developer/seller when you bought the theme.

Child Theme

If you want to customize your theme beyond the premium options, all you have to do is write your own code. As long as it’s just a small thing, the one that comes with it is usually enough Editor for additional CSS out of.

tip 2
However, as soon as longer codes and major changes are involved, you should use a Child Theme use. Because a change in the original files would have the disadvantage, among other things, that they would be overwritten with a theme update and consequently disappear.

However, most developers also offer the download of a child theme. Also, they usually explain what to consider during installation and setup. After you upload it to WordPress, it will appear in the Themes window like any other installed themes.

There you activate it like you did with the parent theme before. Subsequently, the parent theme is not more than active marked, but it remains anyway, just in the background. That’s why you can do this too do not uninstall.

Simply put, when your website is called up, the browser loads all the functions of the parent theme, but omits the ones you have overwritten. Instead, it uses the modified / new codes of your child theme. If the developer updates the parent theme, your changes in the child theme will remain unaffected.

WordPress Part 5 : Download Tutorial

WordPress theme

More WordPress tutorials

Design template featured image: Logo WordPress | › External links: This post does not contain any affiliate/partner links.