You can edit HTML in WordPress

Edit and manage WordPress sites

Practical editors for beginners and professionals

With the "visual editor" (WYSIWYG editor) and the "Code Editor" (HTML editor) you have both a simple and a complex tool at your disposal with which you can compose texts, insert images, graphics, videos and audio files and publish finished articles. In fact, these are the same WordPress editor in two different views that you can switch between as needed. With the help of Customizers (Design -> Customizer) edit design templates (the "Themes" or "Templates") and adapt the appearance of your WordPress website to your wishes.

  • Create the page structure as required
  • Edit or create WordPress sites
  • Create posts and format them like in Word
  • Editors for beginners and professionals
  • Insert images and videos using drag-and-drop
  • Design the website layout yourself using CSS
  • Editor functions can be expanded using a plug-in

The difference between posts and pages

WordPress beginners often wonder what exactly is the difference between posts and pages.

  • pages are suitable for content that does not change or changes rarely and should always be found in the same place. Imprint, directions, "About us" and a contact form are typical examples of pages.
  • Contributions are automatically displayed chronologically one below the other. The newest post will be listed first. Contributions can be assigned to one or more categories.

A typical website structure can be set up with WordPress as follows: In the Main navigation (above across) and in the so-called Footer (below) there are links to pages with the most important information about the person, the company and / or the organization. In vertical navigation elements there are links to the categories. If the user clicks on such a link, he will receive a list of all the articles assigned to this category.

Getting started: creating pages

Before you can edit pages with WordPress, you must of course first create them. Make one clear structure for your websiteby arranging pages however you want. Use speaking URLs to make it as easy as possible for users and search engines to capture your content.

The side menu - everything at a glance

You can see all the pages created so far in an overview when you click on in the menu pages and then on All pages walk. The title and author as well as a date are displayed for each page. Behind the title is the addition "design“As long as a page is not published, but just created and saved. In the upper area you can see the Filter pages according to certain criteria and, for example, only display the drafts. With large websites it is sometimes useful to use the Search function to find a specific page quickly.

Overview of all pages created in WordPress

Create new pages: It's that easy

Either click in the menu on the left pages and Create or at the top of the page overview on the button Create. Give the new page a title and create the content however you want. You proceed according to the same principle when you create a new post. To do this, click on Contributions and Create.

Editing window for creating a new page in WordPress

Understanding the WordPress Editor

Anyone surfing the net and landing on your website hopes for exciting, entertaining or informative content in the form of texts, videos, images or a combination thereof. Creating engaging content is not that easy. WordPress offers you suitable structures for this.

In WordPress, you create posts and pages in blocks. Blocks are elements from which you compose your content. There are blocks for headings, paragraphs, quotations, tables and images, among other things.

Create content for pages and posts

After entering the title for the page or post, press Enter. So the cursor jumps to the next block. By default, this is the paragraph block. Now you can enter text and format it using the block menu. If you need a different block type, click on the "+" symbol in the upper left corner. For example, enter “Heading” in the search field to select the heading block. In the block menu you can choose between different headings (h2-h4).

Images and other media files can also be integrated into the page or post in this way. . WordPress shows the most used blocks below the block search so that you can access them more quickly. The respective block menu only shows the options available for that block.

Gutenberg is a WYSIWYG editor ("What you see is what you get")

"WYSIWYG": What does that stand for?

The acronym "WYSIWYG" stands for "W.Has You I.s W.Has You Get ”, in German:“ What you see, you get too. ”That means: Just like the content in the Backend (i.e. on the processing level) are created and designed, you will also see them in the Front end off - i.e. in the normal (external) view for the visitors of your website. The editor So it also functions as a preview.

WordPress editor filled with various elements.

Advantages of the WordPress editor

You can simply copy texts, tables and images and paste them into the editor. . In most cases the content will be displayed correctly with all formatting. This is how you create even without HTML / CSS knowledge attractively formatted articles and avoid typical mistakes that easily creep in when dealing with code.

If you are familiar with HTML and CSS, you should try the code editor (three-point menu at the top right -> code editor). You will then see the same content as code and can adjust the presentation even more precisely. Programmers appreciate this flexibility, but in most cases the visual editor is the easier way to go.

Extend the editor with plug-ins

Despite its advantages, the WordPress editor has one disadvantage: The range of functions is very limited. Basic word processing tools are of course available, including highlighting such as bold text and italics, alignment options for the text block or links. But as is typical for WordPress, this can also be retrofitted using a plug-in. Control popular extensions such as Tiny MCE Advanced or TablePress many practical functions that you know from familiar Office applications. Some examples:

  • An additional toolbar above the text entry field
  • The font and size can be changed individually
  • Tables are easier to create and edit
  • "Search and replace" function directly in the editor
  • More design options when creating lists

The original editor had many fans, some of whom were unhappy with the switch to Gutenberg, which is why WordPress created a plug-in that brings back the old mask for word processing. The structure of the Classic Editor differs somewhat from the Gutenberg editor. The old editor does not yet work with blocks for this. Different elements are therefore less easy to combine with one another.

In the Classic Editor you can edit WordPress pages traditionally.

The code editor

Users with HTML knowledge prefer to edit WordPress pages using code and therefore use the appropriate editor. Even if you don't write everything in this view, reach for it when necessary directly to the source code to. Editing the WordPress site doesn't work in the visual editor? Are the distances not displayed correctly? Are there no free lines or are the gaps too large? Improve directly in the HTML code and define these and other elements exactly according to your wishes.

  • Spacing, headings and the like can be precisely determined using CSS
  • You have significantly greater freedom of design
  • You have insight into the source code of your content

HTML gives you precise ways to edit a WordPress site.

The content is ready - what now?

When your text is ready and you have enriched it with pictures, videos or other elements, you still have to make a few settings. There are corresponding ones on the right-hand side Edit fields. There you can:

  • The page to save and save it as a draft
  • Yourself a preview display
  • The page publish - it will then appear online on your website
  • The Change statusthat is displayed in the page overview
  • Setting whether the page publicly visible or by a Password protected should be
  • A date and a Time enter when the page released shall be
  • "Parents" of the page - the new page is now subordinate to these in the menu structure
  • The sequence specify in which the page appears in the page overview
  • A Post picture paste - this plays a role if you e.g. B. want to display image teasers of the individual pages on the home page of your website
  • The Permalink determine what is important for search engine optimization

Setting options in the "Create new page" window

Delete WordPress pages or edit them afterwards

Of course, you don't have to finish your pages and posts the first time. As long as they are not published, pages and posts are only visible in your WordPress backend: You can Fine-tune the content in peace. The completed and already published articles and pages can still be edited. If you save this again, the changes will be visible "live" on your website.

You have several options for editing WordPress pages again: Move the mouse pointer over a page or a post in the overview (Pages -> All Pages or Posts -> All Amounts), appears a small menu. Among other things, you can use this to open the editing window and now change your page from scratch - just like when creating it. You can also use the small pop-up menu to send a Delete WordPress site, one View preview or Open QuickEdit. With the latter tool, you can quickly make minor changes without opening the editing window. For example, you can publish a post or fix typing errors in the title with just a few clicks.

If you no longer want to display certain content to your visitors, you have to use the Do not delete WordPress site. You can also undo the publication with just a few clicks. The page then continues to exist in your backend, but can no longer be seen by visitors. Then you can make changes to the post and put the content back online at a later date.

Pop-up menu & QuickEdit in the page overview

Manage pages and create a menu structure

Once the first WordPress pages have been created, they should of course appear on the website in a meaningful order. You place this via the menu item design and Menus firmly. After you have created a menu with a name of your own choosing, select the pages on the left that you want to add to the website's menu structure. The Move pages using drag-and-drop and subordinate to other pages.

Add pages to the menu structure of the WordPress website

In this way arrange the navigation elements on your website. The presentation visible to readers varies depending on the theme chosen. You can also add categories to the menu structure. The name of the respective category then also appears in the navigation of your website. If you have already assigned articles to the categories, these appear automatically under the corresponding menu item.

Editing pages in WordPress: the most important things in brief

  • Via the menu item pages and Create you can create new pages
  • Edited pages are initially saved as a draft - only after selecting the button Publish a page becomes visible online
  • With QuickEdit you can make small changes in the page overview without opening the editing window
  • You select the menu structure via the menu item design and Menus out. There you can add pages that have already been published to the navigation. In this way, you can flexibly determine which pages you make accessible in which position via navigation.

Editors galore

You will also find editors that are part of the standard installation in other places in WordPress. Others can easily be added afterwards. The practical “Text” widget, for example, is included from the start and enables text, images, links or combinations thereof to be added to the sidebar. These elements are then visible at the edge of every page and subpage in your backend.

The "Text" widget

Edit the WordPress layout using the CSS editor

WordPress themes are tremendously practical: you change the look of a website with just a few clicks. Many of the popular design templates are also free of charge. Although the choice of themes is enormous, it can happen that website operators have individual change requests. Using CSS, you can Customize themes as you like. However, basic knowledge of CSS is required for this.

Additional CSS

With the WordPress function "Additional CSS" (Design -> Customizer -> Additional CSS) a simple CSS editor is available to you. This way, your instructions will remain in effect even if the theme is updated. If your theme supports this function, you can do without a special CSS plugin. It is best to use a child theme for extensive changes. This is clearer and also enables PHP and JavaScript files to be adapted.

Themes with an integrated CSS editor

Some premium themes come with their own WordPress CSS editor. You can usually reach this via the options page of the respective theme.

Add a CSS editor via plug-in

WordPress wouldn't be WordPress if there wasn't a plug-in for this case too. With extensions such as the Visual CSS Style Editor and SiteOrigin CSS, you can make changes even more conveniently thanks to visual control elements. The advantage this variant: You do not need any knowledge of HTML or CSS for this.

Edit WordPress sites - however you want

  • Design WordPress the way you want
  • Articles and pages can also be created without knowledge of HTML
  • Plug-ins expand the range of functions in a variety of ways
  • You can change WordPress themes yourself using the CSS editor