How to make a websites in WordPress step by step – plugins, CSS, SEO

The options to customize WordPress to your image are almost limitless. Over WordPress runs more than 70 000 000 pages, which is roughly a quarter of the site. The main advantage is simplicity. You do not have to be able to program at all and you can still manage the website. WordPress has a huge user base and lots of people doing for WordPress templates, plugins, tutorials. If the instructions come in long and you don ‘t have time to follow it, just write to me.  I’m doing this and I’m doing fine. I make a websites , i renew old sites and i teach WordPress. More on site creation. If you want to do the site yourself, with a taste for it, it’s a nice activity and enough to learn. The instructions are quite long, but there is everything you need. You can ‘t guess how much time it takes. It takes me to the base site around 20 hours, a nice, more comprehensive website around 50 hours, but it’s because I know what to do. In programming generally, you do 90% of the work in 2 hours and then the next 10 percent seknete for half a day when something does not work the way it does. For a person who has never seen WordPress, the creation of a basic site can take around 70 hours and will not be very nice and will not have some features that would want. The subsequent uptake of much is an almost endless process and the more you devote him to, the prettier the site will be. If you want to do something, don ‘t try to figure it out yourself, but use Google (the best will probably video for example on YouTube). Generally it will take the most time to find and select the appropriate plugins and write CSS. If you want to quickly and do not have much time, you can do so by downloading some all-in-one plugins and selecting a template where you don ‘t have to change the look and feel that your site won ‘t be “original” and that exactly such sites are on the network.

When you make a website, you’ll learn a lot of things you should know before you do it, so before you start, read the full instructions first. It can save you a lot of time. If you write twenty posts, then one after another you are editing it to quickly fetch, then you change SEO for one second time and then you have to open all again because you have found a new great plugin, you will not like.

There’s no time to waste time, so have a snack, stretch and taste it, half is done.


First step is to purchase a domain, which is actually the name of the page you will enter into the browser, in our case it is When choosing a domain is the main to be easily memorable, relatively short and unambiguous, so that people do not write other, similar sounding pages. We also need to find out if the domain is free, which we can do for example at or at where you can buy it for $125 per year. In the menu are the domains. COM (most used) or. eu .net and others. Select a domain, depending on who the site is for. I recommend buying a domain in the same place as hosting, because otherwise you will need to subsequently convert it.


The next step is to buy hosting, which means that someone will provide you with your server (a computer optimized for the Internet that does not turn off) to which pages you upload. Important information that you might be interested in, for example, the size of your storage space, the possibility of aliases (another domain name that you enter in the browser, will only redirect you to the main domain), access the. htaccess file, the virus protection, the frequency (hundredths to thousandth percent) and the like. One of the main features is whether the Hypertext Transfer protocol Secure (HTTPS) protocol is supported, which is actually a common HTTP protocol (from the TCP/IP family) But it is also encrypted, which means that it uses an SSL certificate. Today it is possible to get a certificate for free at Lets encrypt. The advantages are primarily security, sooner and speed, but the HTTP 2 difference pulled, further by a wee bit higher page rank (more see SEO). Hosting you can have about 400 CZK annually on the already mentioned site Wedos along with the domain. Not that I want to wedosu to do advertising, but this site has hosting both the domain right from there and I am satisfied. The only downside is the complex setting of SSL cetrtifikátu for encryption. The offer is wide, helping you can compare 5 hosts and their properties.

On the Internet you can also find free hosting, which are free. Of course, for the cost of having a foreign ad (for which you don ‘t get Nice), the site will be slower and the domain name will not be arbitrary but modified, such as If you think the site seriously, freehosting do not recommend.

Installing WordPress

Most of the hosting offers one-click installation. For example, at Wedosu you sign in, click on Customer administration, then on Webhosting, on the list you click on hosting with your name. On the left side then click on the application installer, where you then click on WordPress. There is nothing tricky about the initial setup. Install the same as any software in which you intend to work in English. All support is in English, so when you are looking for something to do, you can find it in English and it will be faster if you follow the instructions directly. Different terms are translated differently. If you can ‘t find something, you can find tutorials on YouTube directly for Wedos. If the installation does not work or if you simply want to install WordPress manually, load in Wedosu a new database via phpMyAdmin. You can think of the database as a large table, where you will find information about your posts, information about your users, and so on. The database is written in MySQL language. Next, you need to install WordPress on the server. You do this using FTP access, which you can imagine as if you connect another disc to your computer and you can upload anything to it. For this you need so called. FTP client, which is a software that allows you to “drive”-server connect (it looks like total commander) probably the most famous FTP clients are Filezilla for Linux and WinSCP for Windows. You have access data in email from the person you are hosting from. WordPress then works by discovering the information from the database and building the pages that you see. WordPress is written primarily in PHP language. We have 2 pages of WordPress. One user (the site as seen by the user) and the second administrator (the page where you can create posts, change settings, and so on). If you want to get into the admin and do not want to always search for an email with login details (at you do not have to have a login field on the site), just type in the browser page name and add the following Wp-login. PHP (in newer versions of WordPress maybe a little different). The settings are not too much for now. It depends on what template you have and you have to Takjakotak to set the plugins, so leave it for later. Don’t write posts yet, because the following chapters will change your options and it’s unnecessary for you to open and change any posts you’ve already created.


If you choose a suitable template, you won ‘t have to fight your hair from your head once and lose time you don ‘t have, and you should have invested in the right template selection. The template is far from just the appearance, but also the functionality and scope of what everything goes on your site set. When selecting, Don ‘t drive as much light (fonts, colors, column widths, and so on by using CSS), but the overall layout, which part of the page is made up of. For example, how many columns the template is made up of. That is, whether the page is over the entire monitor, or whether it has a sidebar, called a side panel. Widget. Additionally, how frequently it is updated (see the date of the last update), which is especially important for security reasons. Because of the previews, there is no reason to install the template every time. When you’ve chosen a template that suits you, install it, then click Personalize at the top to see what the template offers and compare with other favorites. What’s missing is quite hard to then add and you need to know PHP, so it’s better to choose straight well. You can select a template directly on WordPress under the Look button. There are so many that they never neprohlídnete and are free. Better and nicer templates are, for example, on Themeforest, but they are not free but mostly between $30 and $60. Most of the above templates can be found elsewhere on the internet for free (someone claims that it can be a security issue because pirated templates have no one much time to control). According to me buying a template does not cost because the free templates directly on WordPress, which have made enthusiasts, are free and today already as quality as those paid. You just have to look for longer. However, it must be said that everyone sits something different and a lot depends on what is the goal of the site, which is a need to think very well before you start the Web. Otherwise it will look like a website for publishing photos, otherwise it will look like a website with recipes and otherwise eshop. And if you’re going to do the web for 50 hours and then find that you can ‘t do something in your template, or that something doesn ‘t work, it will take you a lot of time to customize the new template.

The following is a list of templates that intrigued me


The following is an enumeration of my favorite plugins with links and describing what they can do. To install the plugin, just under the Plugins tab click on Install Plugins, then search for that plugin, click on Install and finally on activate. First the plugins that you will necessarily need (you can of course find others that perform the same function, ranking on WordPress is quite relevant)

Wordfence SecurityFor security, which is very important

Page Builder by SiteOrigin – Allows for easier page creation. You do not need to use HTML. Just click on-Insert Carousel, Insert menu, insert Video. You can visually split the page into multiple lines of how many columns you want. For example, you can insert a video to the left and a description to the right. It offers several layouts (complete pages) for inspiration. Install straight SiteOrigin Widgets Bundle

Simple Custom CSS and JS – Allows you to change cascading style sheets for entire pages. If you don ‘t want to add JavaScript, I’d voted another one. This is not free in the full version, so for example it does not store older versions, which is useful.

WP Add Custom CSS – Allows you to change the cascading style sheets for one particular page.

Yoast seo – seo optimization. To make the page well-rated by the browser and you prefer it to other pages.

Plugin Organizer – Allows you to switch on and off individual plugins on the jedntlivých site, thus increasing the speed and thus the evaluation.

Black Studio TinyMCE Widget – WYSIWYG (what you see is what you get) editor. In the basic version of the WordPress editor it is not possible to directly set font size, font and so on. This plugin will make it possible.

WP-SpamShield – The internet is a lot of people who do not exist and need to oppose them

W3 Total Cache – Allows so-called caching (browser saves the page directly into the computer’s memory and therefore it will load faster), also can optimize HTML and CSS

Mammoth .docx converter – You can import Word document doc. also with formatting and images.

Spacer – Allows you to insert a blank line as high as you want

Feed Them Social (Facebook, Instagram, Twitter, etc) – links the page with social networks, which is important for SEO

All-In-One WP Migration -If something happens to the site, whether someone hackne the page, or if the stream falls in the wrong time, it is better to have the site backed up. This plugin goes to a few clicks

BuddyPress – Helps you keep track of registered users and adds an option to manage your account

Contact Form 7 – If you want some data from users, this will allow you to create a form

MailChimp – Send email to all users at once

WP Smush – Reduces the size of all images, which speeds up page loading

WP statistics – Shows how many people on your site go when they have a browser and the like

WP optimize – Cleans up your database

WooCommerce – If you want to have an eshop, so creates a basket, methods of payment, creates boxes for new goods and similar

Easy Google Fonts – Set up different fonts for different headings

MultiLanguage by BestWebSoft – make pages in multiple languages. does not offer automatic translation. It can, for example, Weglot, which is better and nicer, but not free

Updater by BestWebSoft – automatically updates your plugins, which is good for security even for SEO

Gmedia Gallery – You can upload files to it and from photos for example, create a nice gallery

Responsive Lightbox – Keep images responsive

Shortcodes Ultimate – Allows you to insert things such as Vyjížděcí menu, Carousel, video and much more

Embed any document – allows you to insert documents in PDF and DOC format

Erident Custom Login and Dashboard – Customize the login page

Popup Maker – Create pop up windows

Redirection – If you encounter an error page, you will be redirected to another

Head, footer and Post injections – you can insert what you want in the page header or something in all posts at once

Plugins is the sea. The disadvantage of plugins is that it is all you must always load and tímpádem slow down the page. Does not apply the rule of the number of plugins, that is, one poorly written plugin slows down the page more than 10 well written plugins. Not so, the best solution is to have one plugin for everything. On this site is active around 40 plugins and I think they are fast more than enough. During my youth we downloading 60 kb/s and then it was a problem. With today’s connection speed, it’s no longer a major problem. Here is a list of other plugins that you might find useful.

Ultimate social media – Facebook, twitter, youtube. Share immediatly.

Admin Column – Allows you to customize the admin side of WordPress, add custom fields and the like

Broken Link Checker – checks links to see if they are working

Child Theme Configurator – allows you to create a child theme for the template if you want to dig in

Flickr Album Gallery – Allows you to insert a gallery from Flicr

Folders – Allows you to sort items into folders

Google Drive WP Media – allow linking with Google Drive

Hatom/Hentry Remover (Fix errors in Google webmaster Tools) – Removes errors displayed in Google Webmaster

Hide WP Toolbar – Allows you to hide the top panel

IFlyChat – Chat

Installation Profiles – Enable bulk import/export of plugins

Optimize Database after Deleting revisions – clears old versions of pages to free up space

Page Excerpt – somewhere work poorly thumbnail posts, allows you to write a new

Post Tags and categories for pages – allows posts and pages to have the same options as adding them to categories

Rating-Widget: Star review System – allows you to evaluate using stars

Schema – Allows additional information that can then be used by the browser

Soundcloud is Gold – Import music from SoundCloud

Sticky Menu (or anything!) on Scroll – you can do anything sticky (does not go when you wheel)

TinyMCE Advanced – another editor

Title Remover – Allows you to hide the title of the post, which sometimes fits

WP Hide post – allows you to hide the post at different locations

WPFront Scroll Top – Displays a button that you click to roll up


Now we open any finished page, click on the top to customise and let’s see what we can set. We can add items to the menu and various functions in the sidebar widget (napříklat button for login, search engine, player, links, or text) we can choose fonts for individual headings. We can find inspiration on Google fonts. Next, I’ll open the administrative page and look in the settings item. You can leave most of the things as is. In the basic settings, set the name, email address, description of the site, and whether everyone can register. The other boxes are important to your home page. Whether a static or a column of the latest posts. Under the Permanent Links box, set how the URL of the příspševku will look. I recommend the title of the post. The resulting URL will then be This will avoid long nezapamatovatelným names.  Next, set the individual plugins. Most of them are already set enough. If we ever want to change something in our template, just under the box look click on the editor where I have individual building elements such as home. PHP, page. php, Sidebar. PHP and the like. If you edit the template in any way, make changes to the child theme to avoid erasing the update.


Cascading Style sheets, or cascading styles, determine how individual blocks written in HTML are displayed. The size, color, whether it will scroll and so on.

This is how the sample looks

                                          /* Header */
   List-style: none;

   font-size: 24px;
   padding: 18px;
   Text-align: center;
   border: solid 1px;
   margin: 10px;
   Border-radius: 200px;
   Box-shadow: 5px 5px 10px #888888;
   Font-family: ' Pacific ', cursive;
                                          /* Navigation */
#button1 {
   Height: 60px;
   font-size: 20px;
   padding: 20px;

The code consists of comments ohraničných/* blah blah, it is a comment */, from the first word called. The classifier that determines what is to be changed. The individual elements, blocks, from which a page is made can be described either by class, ID, or HTML tags. If we want to change the appearance of the element described by the class, we will write a dot before the class name. If we want to change the element described by ID, we write before the name of the cross ID # if we want to change the appearance of a tag, we don ‘t write anything before the tag name. The following is a parenthesis Zobáčkem and then the property you want to change, then the colon and the value, what we want after the property. For example size in pixels, font, color, and so on. followed by a semicolon and enclosing parentheses.

Description using Class

. site-branding-the inscription of nothing do not fear left top

. header-Navigation-menu items

. site-Header-page header

. site-footer-page footer

. page-title-page title

. Sidebar-Sidebar, sometimes Nazívaný widget

They generally refer to more specific elements and name them as the template builder. It usually gives the name a sense and is quite similar on other sites.

Description using HTML tag

* – Indicates everything on the page

HTML – Indicates the entire page

Points – Indicates the body of the page

Site – Indicates a page

P – Indicates a paragraph (all paragraphs)

H1 – Indicates the main heading (all main headings)

All the general things that are present on all sites and are the same everywhere because it is based on the HTML language.

Description by ID

#button1 – Indicates one specific button on any particular page

Not for general things that occur across the entire site, but rather for specific things that occur only once.

A list of the most common characteristics, what they do and the values they can

font – family-changes font [roboto, arial]

font-size – Changes font size [20px, 15em]

font-color – Color [blue, #ed7d86, rgba(4, 234, 57, 0)   (RGB channels  + opacity)]

line-height – changes the row height [1, 2, 120%]

background – Changes the color of Pozdí [transparent, white, #ed7d86]

background-image – if I want as a background image [url(“…..ach.jpg”)]

display – How the element will be displayed or not [block, inline, none]

margin – external unfilled space [50px]

padding-top – inner top unfilled space [400px]

text-align – font alignment [left, center]

width – wide [100 % (šířky nadřazeného bloku), 1500px, 100vw ( % šířky displeje]

height – Altitude [100 % (šířky nadřazeného bloku), 1500px, 100vw ( % šířky displeje]

position – if the block is located at the top edge or after the last Post [relative, fixed, absolute]

transform –  Changes shape [translate(-50%, 0%)]

The property name must not be a space, and therefore there are hyphens.

When we want to find out what CSS has to our site, I’ll look in the look-editor and there we click down to style. CSS. But if we want to change something, we need to change through some plugin. For example, the Simple custom CSS mentioned above. We may overwrite the original rules from the template, which will then be inactive and therefore we do not need to delete them.

How to change CSS? I’ll open it from Google Dev tools. Right click somewhere on the browser, choose Explore and Hooray

Creating pages in WordPress 2

At the point where there is an arrow in the picture click and then we go to the part that we want to edit. Dev tools can be opened by pressing CTRL + SHIFT + C when we can directly mark the the part. When we select it, it will show up in the dev tools at the top of the HTML where the object is located and under which all CSS rules affect it. If we don ‘t find the property, we can directly attribute it to Dev tools. Just click the last property of our class and take it off. It’ll jump to the new, empty. You can also override any non-existent property already existing. Enter and we will see the change directly. Dev Tools has CSS loaded in the browser, because when I refresh the page or close the browser, all changes will be erased.  If we don ‘t find what we’re looking for, we’ll try to click on another part of the HTML at the top. The page is made up of individual blocks that can overlap. One block can be nested within another, and then another. Now we must experiment. On the right is a sample of the same page as the left, except for the difference that I have enlarged the font-size. If I don ‘t know which property to edit, I leave the field blank and hit the down arrow, it will give a list of all possible properties. If I don ‘t know what the property can be, I leave the field blank and push the down arrow again to get the values that the property can acquire. For example, if we want to shape something or make something smaller, just type in an approximate value and then an arrow up or down to add or move one pixel at a time. Some properties are interconnected, which means, for example, that the left property, the padding from the left region, can only be used for some values of the position or display properties.

If we want to use CSS for something that we write in a post, we need to give it an ID or a class, more in the chapter content creation. If a change does not work, we’ll add a command! important. If we want something to happen after hovering, we’ll give the name of the class: hover. If you want to have some rules only for mobiles and devices with small play, simply wrap the code in @media only screen and (max-width: 600px) {}. If we want to display something on your mobile or tablet only in portrait mode, we’ll wrap it up in @media screen and (orientation: Landscape) {}.

The following procedure is to copy the entire CSS block, that is, for example,

                                          /* Header Responsive */

@media only screen and (max-width: 600px) {
. Header: hover {
   font-size: 24px! important;
   padding: 18px! important;
   Text-align: center! important;
   border: solid 1px;
   margin: 10px;
   Font-family: ' Pacific ', cursive;

To the custom CSS plugin. I copy the entire block for correct parentheses and the code is written in a clear order. However, I leave only the lines that I have changed and the rest of the properties that remain the same delete. I’ll save the CSS, refresh the page and enjoy.

For example, if you want to add a background to a post, the dev tools will go up in the top HTML section and find a class that only applies to our post. For example, this could be page-id-1327. However, it is not enough to assign CSS to this class only. We need to give the background to a specific window in HTML. That is, for example, points or site. However, you cannot add a background to a flat site class, because it would then be an image on all pages. For example, if we want to allocate CSS to multiple classes at once, we can do it. Site,. Sidebar,. Archive {….} will be applied to all elements described by any of these classes, which is sometimes well suited, but in our case I use the notation. Site. Page-id-1327. This means: Edit the. Site class if it is nested within a block with the class. Page-ID-1327.  Sometimes the background distracts if the display is small, so we wrap it in @media. We will also find out what qualities and values are useful to us. Background-size determines how large the image will be, for example, 100%. Background-Attachment Determines whether the image is pinned or if the image is scrolled down. Background-repeat specifies whether to repeat the image. Background-position determines where the image is placed. The result may look like this. Another option is the plugin. You can ‘t say what’s better. Sometimes one, sometimes the other.

Today, many people get to your site over the phone and the percentage will grow. It is good to prepare and make the site responsive. If I make the page gorgeous on my 24 inch monitor, it may happen that on a 15 inch monitor, some blocks do not fit side by side and when aligned below each other, it may not look nice. Therefore, it is sometimes good to change the width and height of different screen sizes. For example, Screenfly can help you with your page and then look at different types of screens.

@media only Screen and (Min-width: 1000px) and (max-width: 1000px) {
. page-ID-4101. Site {
   Background-Image: URL ("");
   background-size: 100%;
   background-position: center 10%;
   Background-attachment: fixed;

If you want to know more about CSS, I recommend Appku Solo learn. If you are looking for something particular, I recommend the site W3schools.

The following two images show the page difference without CSS editing and with CSS editing. There are now about 370 CSS lines on this page. The changes apply to roughly 70 elements.

Creating pages in WordPress


Search engine optimization is about optimizing pages for Internet search engines such as Google or list. In a nutshell, this means that, for example, if I want to buy a new guitar and enter into the browser I buy a guitar, it will show me the bids in a certain order. People in it a lot of contests because the dealer of guitars, which is shown in the top ten will soon be rich and famous, the interim one that will be 258. Soon bankrupt even if the site had much better. The order is určujepodle whether someone is paying advertising with Google, and according to what we call page rank, a sort of rating that make a bot (virtual visitor) according to quite complex algorithms. Among other things, depending on how many people go to it, the speed of loading, the breakdown of the text, the use of keywords and much using the so-called. Backlinkingu, which means, depending on how many foreign pages are referring to my site. Therefore, a lot of spam and viruje attacks. There were also reference farms that created millions of links to unfairly rose reviews of various sites. For example, Google is quite successful in fighting it. Its bots are very clever, they can cope with different languages and not only.

The key to good SEO is

1) Writing good, interesting and fun articles

2) Plugin. For example, Yoast SEO, where then in posts always bring the metadata (data which are not visible directly on the page, but which will use Google to search). It’s hard to say what weight the recommendations made Yoastem such as the frequency of keywords in the post and headlines, the amount of words and the like. Export the XML Sitemap file. Make an account on Search console and XML sitemaps there paste (XML will tell Google what all the sites you have and he is then easier to index). Link Yoast to your Facebook page if you don ‘t have it, then create one. Most people will get to your page pčes social networks. Add to the posts OG metadata, or Open graph data. These are the data that appears when you paste a link somewhere on a social network or into a chat. Hlavěn is the name, description, and image.

3) Search console from Google webmaster. There, I’ll know if the site has been indexed, which means if Google knows about them, and whether they will show them to people, and if Google has a problem with your site, or what. Insert the XML sitemap generated from Yoastu. This will require authentication via FTP access. You need to prove to Google that they’re your site by adding a file to the server that they’ll give you. If the page is new, it is not indexed until after some time when the bot gets to it through a link. If you don ‘t want to wait, give Google a page here. Just go to the main page and once when you’re running the site, there’s already content on it. It’s also a good idea to try a page that analyze your work. I was quite successful Ryte. Any errors that you discover will try to fix it.

4) Good page title and description. Must býtdobrý for both readers and Google. Suitably long! The title (SEO title) should be about 60 characters and description to 160 characters, the rest off. For example, the page name sales bot is unnecessarily short. It will be better to sell Czech leather shoes-my shoes (… page title). It is claimed that the title of the site should only be on the home page and may not be elsewhere. In this case, do not use a similar name on other subpages, but use for example quality ladies footwear-sale, something slightly different for children and the like. They will find you as people who have entered a sale to Google, so those who have entered men’s shoes, as well as those who have entered Czech quality footwear. The more you do, the more you get to more rungs for more search terms. The Yoast below shows how much you have written and the pointer green when you think it is long enough. It was important to have keywords, or keywords, that are no longer the meaning of it, but certainly add them. These are some hashtags that describe the post. In the case of this site would be, for example, the creation of websites, Web creation in WordPress, CSS, SEO and the like. Enter one that seems to be entered into the browser when something is searched. The ideal number can be from 1 to 15. What is commonly done is the analysis of keywords. This means that I will look at what words people most often seek, I try synonyms and similar formulations. Logically, if I hit a wording that people are looking for more often, more people will come to my page. What ever for can we find, for example, on Google AdWords, but we must have an account. No account can be used on Google trends. Another way is to put the term in the list of search engines and then click on the wanted statistics at the bottom. Do to avoid the footsteps of words. These are words that occur so often that the browser ignores them and so you are preparing for space. Can go for example o and, to, behold, but, or, ANI, without, yes, probably, but, AZ, BA, without, will, we will, would be, would… Use diacritics everywhere except the name in the URL, Google will add it where it is searched without it. Google also can inflect and timing. There is one rule that search engines like to the top left, so the most important concepts try to put in the title, description, main title, side, and so on. Headlines should give a logical sense. H1 then H2, H2, H3, H3. For example, if you have a headline and then just after you H5 because it’s a nice font, it’s not right. Words that are in the headlines or in bold are more weight than the one in the normal paragraph.

5) Linkbuilding. A strong impact on your PageRank, which means how a page is evaluated by the browser, has a multitude of links pointing to your site. Therefore, a good link is distributed differently over the Internet. Some of the best possible solutions are social networks. If you have an e-shop or blog, create same Facebook (and ideally both Twitter and Instagram and Youtoubovou) group. Link the group to a Facebook account and other networks, for example, using the Social Media Share Buttons or Feed them Social, and often add something. Already when someone looks at it, you’re getting a lot of back links (possible to find on Search console). Then you will pick up Pagereank and finally attend.

6) Adding to catalogs. For example, if I have an eshop, I will add to ‘ If I am a doctor, I will add myself to the list of doctors on the list, if I compose music, I add it on SoundCloud, YouTube, Bandcamp, just everywhere and even with a link to the site.

7) Advertising. If I have it, and I have a site with Úmylsem earn (for example eshop) so it pays off. But only for a short time. And beware, they don ‘t have to pay that if I pay twice more, twice as many people click on the page. Small amounts are enough (a few hundred crowns for half a year) and then feel free to stop. The most common source of advertising is Google Adwords and Facebook ads (for them the main source of income). If a lot of people are going to your page, you can do the exact opposite and leave a foreign ad on your site. The more people go to your site, the more money. For example, you can use Google AdSense.

8) Speed. Google takes a lot into account the speed of page loading. It is important to set the so called caching, that is, download to your computer The data that will be used on other subpages such as fonts, icons and the like. It will do this for you for example W3Cache plugin. It is also important to minimize the number of scripts. It’s called minify, and for example, from 30 different files that you need to download each time, you’ll do 8 for example.  It will also do W3cache or, for example, Autoptimize plugin. Minimize HTML, JavaScript, and CSS. It may happen that some things will not work properly, you need to try different plugins and different options. If máto a lot of plugins, it is good to use the plugin optimizer, and plugins that I use only on a few pages to disable and then allow only to those where there is need. For example, use the GTMetrix page to test. Tips for plugins and settings can be found here, for example.

9) Update of plugins, templates and especially content. If you write about programming in CSS3, in a few years you will need to edit the article to be valid also for CSS4. If you write on what to look out for in the Civil Code, you will need to update the page until the new code comes out. If you write about things that don ‘t change over time, it’s good to add new posts at least. If the site was last modified in the year 2012, browsers will not rate the page too well.

10) protection. It’s not good if someone hacking into your site. Users can lose sensitive data (especially in eshop problem). For example, this page was also hacked. It was not at all known to be operational. I discovered it by accident, when Google searched my page for a red icon with the inscription page was probably hacked. First, most people, when they see something like that, will not go so logically, and the second time the browser instantly reduces PageRank. There should be some antivirus protection on WordPress, such as Wordfence (it’s not a desktop antivirus, so it doesn ‘t automatically fix the problems, so take a look, scan, and erase) from the time. You also need some spam protection, such as WP-SpamShield against spam and fake users. You can find both under the plugins chapter. Security is listed last, but you should solve it at the very beginning. This site has been successfully challenged several times and I usually found it only after some time. Google doesn ‘t have to tell you that the page is being hacked and laughing, but you won ‘t be rewarded with a nice appreciation when someone benefits from you cryptocurrency and takes performance when your page is falling due to DDoS attacks and/or if you have hundreds of invisible and unpleasant ones on your page Links somewhere you don ‘t want.

11) Do not copy, he knows it. And he won ‘t want you. If you copy some interesting text from Wikipedia, don ‘t expect anyone to find it, it will be ignored. Don ‘t copy from yourself, and if you have a piece of pages to use more than once, mark it where you’re taking it as a less canonical tag, see < link rel = “canonical” href = “http://example….. And so on to the header of the duplicate page (more about the construction of HTML in the next chapter), and or if you have yoast, it is enough to write the original address copy into the box duplicate pages.

12) In search console, check crawl errors and delete the resources from the time, then redirect the remainder back to the main page. Help plugin redirection. We’re removing external lines that are no longer working. Here will help us plugin Broken link checker.  Next, write to Google and he will find you all that is indexed (new site there probably will not, it may take weeks, the Internet is great…). Try to have all the important things there, but don ‘t try to have them too much. For example, if Google has 200 links to tags on which when you click, you will open a section with one contribution, unnecessarily distributing Google’s favor among the power of items. It will help the robots. txt file into which you can write code to disable different or all bots (robots crawling internet and collecting informations) to prevent them from walking on the site. You can also open the file in Yoast in the Tools-File editor box. For example, if you add a

User-Agent: *

we prohibit the entry of all bots to the directory brothel and everything in it. Yoast will do it for us, just set up if we want or do not want to index pages, posts, tags, category, pictures, events etc… Depends on who.

13) Google likes if the site is customized for mobile phones-responsive. Young people even prefer to surf the phone with a computer. Search Console may alert you about things like too little text, go off screen, buttons too with you, so one can ‘t squeeze and the like. Can create an AMP (accelerated mobile pages) approach when the page is written in a completely different way for mobiles and extremely fast loading. WordPress has the advantage that suffices plugin and we do not have to do anything manually.

Our little Google grows us like water and learns quickly… Thankfully. In the year 2000 you could have on the page mediocre unrelated patext, but when you knew how to write keywords, both descriptions and the like, you got to the first place. Today it is different and Google uses for example an analysis of how visitors to the site behave as soon as they leave it and the like, so scammers have bad luck. However, many things can be influenced. Do an analysis for example on the optimizer and correct errors.


Now that I know how the page will look and work, I start to fill it with content. A good base is to choose the site structure appropriately. There will be a lot of short pages or a few long. Will be in the menu 3 boxes, or 8. On WordPress We have two types of pages. Static and sections. Static does not change. We’ll add more posts to the section and then see them sorted by the date of the gift. We can add either page A or post. You can add a comment to a post, not to a page. I personally use posts for short messages, short articles. Pages then for longer things. We can add both a page and a post and a column to the menu. Sections may have subsections. So write an article. Mark the headings H1 to H6 appropriately (usually 2 in practice). Use internal links to other pages on your domain. Assign the appropriate keywords, assign them to the correct column. If you have pages in multiple languages, please provide translations. Write the metadata (the first few sentences that Google displays about you), write excerpt (the first few words that appear in the article included in a column). Automatically the first few hundred words, but ends in the middle of the sentence, sometimes when the links or images are started, it prints nonsense. I will write CSS for this konrétníparticular page and I will do graphics-I will add a background or I will insert images. Videos from YouTube, maps, or articles from some large and well written pages I can embed directly using embed. I do this by copying the address and inserting it into the editor (not directly into HTML). The Video itself is activated. If not, I will find on YouTube, Google Maps, or somewhere else, under share embed link and I will insert the one (I can, for example, paste the entire playlist and the like). A similar technique is an Iframe in which you insert a window that displays a part or a whole other page in a page. If I mark a post as private, only registered users will see it. It is far better to use the preview before updating the page every time because old versions of the page are saved. However, not all the preview displays. Take care of caching. The pages are stored on your computer and may not be updated from the server when the update is made, but only retrieved from the computer. I, when I’m doing some longer article, so the plugin (W3 total cache) on caching off (the plugin is already pretty clever and on good templates This problem is not.

You can have it much easier with Mammoth .docx converter. You can import Word document doc. also with formatting and images. So it’s much faster and easier.

For example, you can create a photo gallery using the Gmedia Gallery. Calendar with events For example, using Google Calendar. You can also use Google Docs, for example. Just think, look for plugins, look for solutions. If I want to add some pictures and I don ‘t want to resolve the issue of ownership, it’s enough on Google if I’m looking for images, click Tools, ownership rights and choose what I need. If we are looking for a background or large image, we click right to size-large. Another option is to look for example on the portal Pexels where all the images are free to use. Many images, texts, code snippets, ideas and so on are subject to a Creative Commons license, which means that they are freely available. We’ll know by the fact that we’ll see CC in the wheel somewhere. In the field of software and programming, we can freely use what is Open source.

It often happens to me that I need to write something that the editor cannot. Many of this can be done by Page Builder, for example, from Site origin. I’ll go to it with a box in the upper right corner of the text field. The disadvantage is that if I ever decide to stop using it and turn it off, all the text layout and functionality will disappear. If the page builder is not enough, then I have to click the HTML frame. HTML is a structured language and looks like this

< div style = "background: black; margin: 50px;" > 
   <h1>for title</h1>
   < P class = "name-Tridy" > for paragraph </p>
   < a id = "name-id" href = "www. link. CZ" > link Text </a> 
   < a href = "#domena" > domain </a> 
   < span id = "MyDomain" > Joho I'm an anchor </span>   

HTML is primarily the so-called tags, which were easily spoken in the CSS chapter, which is directly related to this language. HTML specifies what to display and CSS how. Tags bear Individual meanings. Div and span do not carry, but serve as containers for other tags. Div is a block element (wraps line, so it gives the elements below it). Span is a row element (it is for itself). CSS can be defined inline, that is, directly inside the tags, see the first line. The close tag Div is followed entirely at the end, so changes to CSS will apply to all contained elements inside. Each headline has its own tag, if something is bold or italic, it also has its own tag and the like, see 2. The row for the title. For example, if I want to apply CSS to only one paragraph, you just enclose the text with the <p> tags and assign a class or ID to the paragraph, see line 3. The line of the above tags. Then I follow the same as in the CSS chapter, using the class we created. If we want to create a link, help the tag <a>, see line 4. Line. Before the address we have to give the ahref = and the address itself to quotation marks, followed by the link text. When I want to create a so-called anchor, which is a link to the same page (you can see them at the beginning of this walkthrough), you just need to use #some-name instead of the link address and then the content to which we want to refer to the same name, see the last two long lines.  HTML is a programming language, so please leave the diacritics for yourself and don ‘t make spaces in the class names. Each character has its own space in the ASCII table, which will use the encoding that is set by default in the page header. It is good to know when copying some text, whether to copy it to the editor or HTML. The Editor works like Word and can recognize things like font sizes, indents, links and the like. By contrast, you copy it as plain text to HTML. Sometimes it will be useful to one, sometimes the other. Images, links, videos, parts of code such as < >, are always copied into the editor. Text from a foreign story in contrast to HTML (so that the editor does not create paskvil useless tags and I had uniform formatting) and then I give it a font size, headings and the like. This how the posts will look not doing in the editor for each post separately, but it should be in CSS and work on all posts together and automatically. If you would like to ever write a site without WordPress, you would have to enclose all the content in the entirety of the tags <html> <head> (contains information such as used encoding, links where to download fonts, links where to download JavaScript libraries and also Description and name) <body> (contains the text of the article, images…) and, for example, to <navigation>, <header>, <section>, <footer>. If you ever insert something into the header or all the articles at once, use a plugin such as Head, footer and Post injections. For a long time you can also do without tags and HTML and headers and so… WordPress will do it for us automatically. The result can be seen in the already mentioned Dev tool. When I already have a lot of posts written, I need to clean up the database in a nice way, for example, WP optimize.

When I solve something and do not know how to solve it, Google will help. Quite often, you will get to the page Stack overflow, which is a blog for programmers. If you don ‘t find what you need, add a custom query. A lot of nice guides is also on CSS tricks. Various articles on WordPress are on WPlama. If I want to add an animation, I can find one for example on Codepen. Note that the added code is not often in CSS, but for example in SCSS (enriched CSS, where we can easily program), which we must then bring back to CSS for example in Sassmeister. Not all animations, however, will go on WordPress because some call different JavaScript libraries. When I have most of my stuff done, I’ll analyze the page nicely. For example, Search Console, GTMetrix, and optimizer pages mentioned. For code functionality, I use W3 validator. Well now if I have time to do this I remove one error after another. Follow these steps to find out how to get help with plugins. Uvedy example one of a million. I had no alt attributes on the images-I will make. At the speed I had the error remove query strings, install plugin Remove query strings… And so on and so on. I had a few invalid links, I had bad ratios of different headings H1 to H6… Do not remove everything, always pay attention to what looks nejzávažněji. Google will report you hundreds of stalls with error 404. It is good to set up a redirect, such as the redirection plugin. Google will report you hentry erory, help plugin Hatom/Hentry remover… And so on and on. It is a never-ending struggle of man with imperfection.

If you have done well all the previous chapters, the creation of the content will be quite quick. You don ‘t need to set anything anymore, you’ll always click on the same thing and soon very quickly. Customize your WordPress as it suits you. For example, if you’re writing posts, hide everything you don ‘t need in the top right corner of the Display settings box. Learn shortcuts such as CTRL + B for bold and so on. When I go through the finished pages and want to edit something, just click in the top bar to edit the page. For a new post, just click + on the top bar to create a post or page. Don ‘t forget to back up your page if anything. For example, you can use the All-in-one WP Migration plugin in one click.

I hope you article making a website in WordPress helped as he could. Now, there’s only a lot of patience left. I hold my thumbs with all the logs

So, that’s all, so create