Training

Boost Your Online Marketing

How to Edit Webpages with the ProcessWire CMS

Advantages of ProcessWire

Before you see how convenient creating/editing in ProcessWire is, a few important details about the software's benefits. ProcessWire has a lot more features than frequently used content management systems like WordPress or Joomla.

The software can be programmed flexibly. So it is not only a CMS, but also a content management framework.

This means that you have the following advantages with ProcessWire:

  • the design / programming can vary per page
  • pages can be flexibly optimized for search engines and users
  • only content that can be changed by you will be shown in the backend
  • each field can have instructions for the contents
  • the use of the latest marketing technologies is possible

A further advantage is that ProcessWire promotes secure programming through its architecture.

You reduce the risk of your business being compromised by your website.

!!ProcessWire has only received function updates in the last 5 years since I have been using it. No security updates needed to be installed. This means less maintenance, as with other CMS.

How does ProcessWire make the creation/editing of websites more convenient?

Webseite LIVE editieren
Screenshot: Webpage LIVE edit

Use any device, PC, tablet or smartphone to create/change content.

The pages are clearly displayed for selection. You'll find each item in the order of the web page you're viewing. Complex elements are labeled in a way that make sense to you. All this is possible through individual or customized programming.

How You Create a New Webpage

Log in to start.

Call up the software through your company website at https://www.meinefirma.de/xyz/ in your browser. Enter your user name and in the next line your password.

After a successful login, you will see the tree structure of your website in the backend of ProcessWire (see title screenshot above).

The structure corresponds exactly to the layout of the websites. Consequently, pages with a number are containers that contain further pages.

To create a new page, here a news article, move the mouse over the container with the name "News". Several buttons appear on the side of News (see title screenshot above). Click the "New" button.

Enter title
Screenshot: ProcessWire, enter title of new article

Enter the new title in the first field. The second field below automatically creates the user and search engine friendly URL of the page. If you want a different title, change it manually.

After you have saved the title, the new website will open for editing in the backend.

What You Will Find on Your Page

Once you have accessed the new page, you will see the current position in breadcrumb format of the page e.g. "Home > News > My Test".

There are several tabs underneath. Currently the tab "Content" is activated. Now create or change the content of your new website.

ProcessWire Page Tabs
Screenshot: ProcessWire, Page Tabs

Here is a brief overview of the kinds of elements you will encounter within this tab. The elements are determined by the template that serves as the base of the page.

Text- or Datefields

In the figure above you will find an example of the text field called Title.

You probably already know the star below it from online forms, the field must contain a content or text.

WYSIWYG Editor

Edit content fields with styled text or photos using a WYSIWYG (What you see is what you get) editor.

These editors are visual, i.e. you can assess how your content looks online.

WYSIWYG TinyMCE
Screenshot: WYSIWYG TinyMCE

Besides the more robust TinyMCE, the CKEditor is often used.

A general guide on how to use these editors can be found here: WYSIWYG Editor Tutorial.

Loading Photos or Graphics

To add a photo/graphic in the WYSIWYG editor, load the image on the respective website first. To do this, click on "Select file" under the segment "Photos/Pictures".

ProcessWire Image upload
Screenshot: ProcessWire Image upload

You will be shown the folder directory of your computer (PC, tablet or smartphone). Select the photo to upload to ProcessWire.

Depending on the tasks of the page, other items may be important to you. As mentioned before, these items are programmed individually or customized.

View Your New Page

To take a look at your new website without already placing it online, click on "Save" and change the tab at the top from "Content" to "View".

View new page
Screenshot: view new page

Depending on the design of your website, you will see the content as it will eventually be displayed online.

If you are satisfied with the result, click on "Save and publish" next to the green "Save" button at the top of the backend.

Your new webpage is now officially online.

To make changes, log in again. Depending on programming you may have another editor option.

Bonus: Edit Your New Website in the Frontend

So far you have been able to perform all steps on your PC, tablet or smartphone. On your PC or notebook there is another way to change the content of your website. If it doesn't work, ask your programmer to enable this.

You log in to the backend as before. Then you call up your website online in a new browser window. Go directly over the text (fig. black arrow previous screenshot "view new page") of your new article.

Webseite LIVE edit
Screenshot: Webseite LIVE edit

A small square with 2 lines appears next to the mouse pointer. Double-click the text and the WYSIWYG editor is activated directly on the page shown. Now edit in the same way as before in the backend.

There you get a much better feeling for the flow of your content while you make the changes.

Save the changes.

When doing frontend editing you see the freshly changed website immediately. This saves you the step of another click to display your website. This feature is available since ProcessWire 3.0.

Do You Have Questions About ProcessWire?

ProcessWire is easy to use. The software offers a secure and flexible programmatic solution at the same time. - Please contact me to learn more about the possibilities or to get another tutorial in text/image form.

Links

WYSIWYG CKEditor Tutorial

Autor/in: Iris Mitlacher