A Comprehensive WordPress Tutorial

From the “Plugins” tab, you’ll be able to browse the incredible list of community- and professional-made widgets and other WordPress apps. I cannot stress this enough – there’s a widget for everything.

How Does Shopify Work? Every Aspect Explained

A Comprehensive WordPress Tutorial

Did you know that around 35% of the entire web is built with WordPress? With an estimated 2 billion websites out there, that would make up around 700 million sitesabsolutely insane! No wonder that WordPress tutorials are among the most sought-after!

WordPress is a very unique website creation tool – I must say, out of all of the similar tools that I have used throughout my career, WP has been my favorite, hands-down. There are many reasons why that’s the case – we’ll get into it in a minute.

Now, do keep in mind that WP isn’t exactly a website builder per se – at least not the WordPress that we’ll be talking about in this article. If you’re interested in some of the more traditional website builders out there, do check out our list of the best builders on the current market.

Contributed by: Ilir Salihi

According to you, what is the best website builder for personal use?

For me, personally, WordPress is the best platform for building websites. But, WordPress can be overwhelming for many people that want to launch a new site and hit the ground running. When deciding on a platform for your website, take your level of "techiness" and experience learning new software into consideration. Many of the website builders available today have been designed for beginners. You can literally "drag and drop" your website together using a clean visual editor.

Table of Contents

WordPress.org vs WordPress.com

O que muda entre esses dois métodos é a própria hospedagem. Ao usar o WordPress.org, você deverá fazer o download grátis do script e hospedar o site por conta própria num computador local ou através de uma provedora de host (tipo a Hostinger).

Por outro lado, o WordPress.com toma conta de toda a hospedagem do site por você. Você não vai precisar manter um servidor da web, pagar por um site de hospedagem ou baixar um software, no entanto, ads de propaganda vão aparecer no seu site.

Você também terá acesso aos seus arquivos, pastas, bancos de dados e códigos, o que significa que você poderá modificar isso tudo como desejar. Os sites mais populares e poderosos do WordPress estão nesse perfil de hospedagem própria, que fornece maior flexibilidade e habilidade de implementar funcionalidades, códigos e design customizados.

Passo 1 – Como instalar o WordPress

Você provavelmente terá que procurar por uma provedora de hospedagem que suporte o WordPress. Muitos hosts usam diversos instaladores automáticos para tornar a instalação do WordPress um processo ainda mais simples.

Antes de continuar sua instalação, você vai precisar decidir como você pretende acessar seu website. Você deseja ter o WordPress como o seu domínio raiz (exemplo.com), subpasta (exemplo.com/blog) ou subdomínio (blog.exemplo.com)? Você só irá precisar de um passo extra se quiser configurar o WordPress como subdomínio. Na Hostinger isso pode ser facilmente feito na sessão Subdomínios.

Opção 1.1 – Instalando o WordPress pela Hostinger utilizando um Instalador Automático

Vamos começar da maneira mais rápida e simples de instalar o WordPress: o Auto Instalador da Hostinger. Os passos mostrados abaixo mostram como instalar o WordPress através do painel de controle da Hostinger:

  1. Acesse o Painel de Controle Hostinger
  2. Localize e abra o Auto Instalador.
  3. Clique no botão Selecionar abaixo de WordPress.
  4. Agora complete com as especificações do seu website:
    URL – A url onde o WordPress deve ser instalado. Se você gostaria de instalar como um domínio raiz (exemplo.com), deixe vazio.
    Idioma – Escolha o idioma do WordPress
    Nome de usuário do Administrador – Seu nome de usuário do WordPress. Você irá usá-lo para acessar a área do administrador.
    Senha do Administrador – Sua senha do WordPress. Você vai precisar dela para acessar a área do administrador.
    Email do Administrador – Entre com seu endereço de email.
    Título do Site – Título do seu site do WordPress.
    Tagline do Site – Uma frase curta explicando sobre o que é o seu site.
  5. Aperte o botão Instalar.

auto instalador do wordpress da hostinger

Opção 1.2 – Instalando o WordPress manualmente

tela de download do wordpress.org

Depois de completo o download, você pode começar a postar seus arquivos do WordPress na sua conta de hospedagem. Você pode tanto usar o Gerenciador de Arquivos providenciado pela sua provedora de hospedagem ou um cliente FTP.

Não única diferença que a ferramenta que você escolher fará é a facilidade de uso. A única coisa que você deve levar em consideração é o diretório de destinação. Por exemplo, se você deseja ter o WordPress como um domínio raiz, os arquivos devem ser enviados para a pasta public_html; se você prefere um subdomínio ou uma subpasta do WordPress, faça o upload na pasta apropriada.

upload de pastas para o wordpress

O WordPress armazena informações em bancados de dados. Portanto, é imprescindível criar pelo menos um. Na Hostinger, você pode criar um novo banco de dados na seção Banco de Dados MySQL. Não se esqueça de anotar as informações da sua base dados, pois você vai precisar delas mais tarde.

criar usuário e senha para banco de dados mysql wordpress

página de cadastro do seu site no wordpress

71% OFF + 3 MONTHS FREE

Zyro Exclusive Offer

71% OFF + 3 MONTHS FREE

Zyro Exclusive Offer

Your Discount is activated!

Step 2: Accessing Your Website

There are a couple of ways to access your WP dashboard. The easiest route would be to go there via a button from your hosting provider’s panel – no matter your hosting service of choice, there should be one available.

WordPress tutorial: WP dashboard.

Another route that you’d find mentioned in many user WordPress tutorials would be to simply enter the name of your domain into the URL bar, and then add “/dashboard” or “/admin”. So, if the name of your domain is “mywordpresswebsite.com”, it would look like so:

There isn’t really a difference between the two above-mentioned dashboard accessing routes. That said, if you want to learn WordPress, it might actually be easier to follow the latter, since you can simply access it by typing some information into the URL bar, instead of having to go and log into your hosting service panel every time.

Have you ever wondered which website builders are the best for your business?

Step 3: Get to Know the Interface

In all honesty, even today, every single time I log into WP, I get some nostalgic vibes from the homepage section. While I’ve altered it with some plugins and other widgets, the core design is still the same – classic WordPress.

WordPress tutorial: getting started with WordPress.

At this point, you should make sure to take your time to study the actual interface that you see in front of you. As noted above, it’s probably going to change significantly as you progress with your website and install more plugins, but still – the core idea will remain the same.

The cool thing about WordPress is that, while being significantly more complicated than a traditional website builder, it does have a more clear layout than most of the current builders out there. The design choices for the WP interfaces were very simple and old-school, but also very straightforward – that’s a good thing!

All of your main attention should be focused on the left side of your screen – namely, to the list of various interfaces that you can open. With some exceptions, this is the area that you be clicking through the most.

WordPress tutorial: the user interface.

If you want to learn WordPress “the proper way”, do make sure to not rush through the options that you see here. Every new button is going to have a few more pop-ups, so you should surely make sure to figure out where things are in the dashboard before progressing further.

Step 4: Theme Choice and Installation

While figuring out how to use WP might require a WordPress tutorial for beginners, there are some things that the CMS does have in common with other website builders out there. One of these things would have to be the theme selection.

In the “Appearance” section ("Theme" sub-section) on the left, you’ll be able to pick from a few different default themes. If you’d like to make your site more original, then you can always download new theme templatesones created by the WordPress community. The downloading and installation processes are actually quite simple – just find the desired theme, download and apply it.

WordPress tutorial: theme selection.

Make sure to try different themes out, and see which fits the “vibe” of your website best. You’ll be able to preview them, check how they work, and also even read some other user reviews and general feedback in the community section, too.

While it may take some time finding the best template for yourself, that’s normal – after all, there’s a pretty vast number to pick from! Do make sure to delete (rather, uninstall) the unused templates afterward – got to keep the dashboard uncluttered and working properly!

Step 5: Page Creation

Creating a specific page with WordPress is nothing like doing the same thing with a website builder. When you’re working with a builder, in the vast majority of cases, it’s going to have drag-and-drop functionality, and will abide by the “WYSIWYG” principle – in other words, you’ll be able to alter your page contents by clicking on a section, and the changes will look the same live as they do while you’re editing.

Sources:

https://www.mybestwebsitebuilder.com/learn/wordpress-tutorial
https://www.hostinger.com.br/tutoriais/tutorial-wordpress
https://www.mybestwebsitebuilder.com/learn/wordpress-tutorial
Wordpress tutorials

  • style.css This file is where you add some css comments so that WordPress knows some information about your custom theme. It also holds the custom css styling that you will apply to your theme.
  • index.php This file controls the html and general output of your theme. It is the main file used for outputting data on your home page.
  • header.php Allows you to specify an area to hold important information about your website in the area as well as including opening , , and ,
  • footer.php The footer will close out any opening tags you specified in the header area, in addition to giving you a place to call the wp_footer() function.
  • functions.php Allows you to to call functions, both PHP and built-in WordPress, and to define your own functions in order to change the default behaviors of WordPress

custom header and footer file output

WordPress Theme Development Tutorial Step By Step

WordPress Theme Development Tutorial Step By Step

This is going to be a fun tutorial where we inspect how to create your own WordPress Theme from scratch. In fact, we’ll begin with absolutely zero files and zero lines of code. The only way to understand how WordPress Themes work, is to really jump in at a low level and do every single thing yourself. Yes, it is tempting to avoid this because you can make WordPress do everything for you without any understanding of the code that powers it. This could be PHP, JavaScript, CSS or even the basic HTML. By the end of this step by step WordPress Theme tutorial, you will understand how everything fits together and how to bend WordPress to your will with ease.

There are so many free themes available to you when you are running a WordPress website. Beyond the free themes, you might also choose to pay a premium for professionally made WordPress themes that look great and have fantastic features. So why learn how to create your own theme from scratch? The answer is that no matter what theme you are using, there is going to come a time when you want to make simple changes to your website. Some of those changes might be able to be accommodated by a simple plugin or widget. Many times however, it makes more sense to understand what it is you want to change, how to change it, and avoid turning your WordPress website into a mess of plugins and add-ons that become unwieldy. With just a bit of foundation level knowledge, you’ll be confident in modifying your theme, or simply building your own from scratch. You’ll know which file to edit, and what code to add or modify to create your desired result.

Step 1: Create a folder to hold your theme files.

wordpress root directory file system

If we are going to be building themes, we need to know where the files that make up a WordPress theme live in a WordPress Installation. This is pretty easy. We know that a WordPress installation typically has a root directory named wordpress . Here is what our root directory looks like in PHP Storm.

Files

Folders

wordpress themes folder

The folder that we are most interested in right now is the wp-content folder. Within the wp-content folder is a folder named themes. Do you know what this folder is for? Yep, that’s right! It is the folder that holds one or more themes that you would like to use with your WordPress website. In this themes folder we find three additional folders of twentyfifteen, twentysixteen, and twentyseventeen. These folders contain the three themes that WordPress ships with by default. Notice below that there is also a folder named customtheme. Go ahead and create that folder as well in your installation as this is where we will be creating our WordPress theme from scratch.

The Media Library

When creating or editing a post or page click “add media” which is a button found just above the content area. You can include existing media already uploaded to your website or upload new media. Try not to upload the same file more than once as it will take up extra space and add clutter. If you’ve already uploaded the file, select it from your media library!

Each theme has different menu locations. Every theme should have at least one menu location. Some themes will have several menu locations such as the main menu, top menu and footer menu. Menu locations are theme dependant, so make sure to choose a theme that supports the menu locations you need. You can however hire a developer to modify an existing theme to support any menu location.

When you navigate to appearance->menus you’ll see to the left you can choose categories, custom links and sometimes more things you can add to menus depending upon the theme and/or plugins you have installed.

wordpress menu creation step by step tutorial

Step 8: Add Some Style To Your Theme

wordpress theme development from scratch

When we visit our test website now in the browser, we can see that the WordPress Theme that we have developed step by step in this tutorial is looking pretty good!

WordPress Theme Development Tutorial Step By Step Summary

Let’s review everything that we’ve learned in this basic step by step WordPress Theme tutorial for beginners. We’ve learned how to create our first custom theme in WordPress by making our own folder in side of the themes folder of our WordPress installation. In this folder, we added different files that correspond to different sections of your website. In our tutorial, we have started with the bare minimums you should have in a WordPress theme. In the future, you would add many more files to this folder than what we have covered. Let’s review each file we created in this tutorial, and what they did for us.

  • style.css This file is where you add some css comments so that WordPress knows some information about your custom theme. It also holds the custom css styling that you will apply to your theme.
  • index.php This file controls the html and general output of your theme. It is the main file used for outputting data on your home page.
  • header.php Allows you to specify an area to hold important information about your website in the area as well as including opening , , and ,
  • footer.php The footer will close out any opening tags you specified in the header area, in addition to giving you a place to call the wp_footer() function.
  • functions.php Allows you to to call functions, both PHP and built-in WordPress, and to define your own functions in order to change the default behaviors of WordPress

Sources:

https://vegibit.com/wordpress-theme-development-tutorial-step-by-step/
https://stratospheredigital.ca/wordpress-tutorial-for-beginners-step-by-step-pdf/
https://vegibit.com/wordpress-theme-development-tutorial-step-by-step/

Leave Comment

Your email address will not be published. Required fields are marked *