How can non-coding user edit website written in HTML by developer?

[ad_1]

Hello everybody.

I’m just starting with WordPress, so please forgive me if I say something incorrect. I started learning WordPress as a web developer (I have good knowledge of HTML, CSS and JS) because it is popular and also because I thought end user could edit the website easily without coding knowledge.

I’m currently going through the course and my understanding of coding one page was as follows:
1. create page.php file (or some specific template file for specific page)
2. include page content using the loop
3. go into Page editor, switch to “Code editor” and paste the HTML code from my IDE
4. switch to “Visual editor” and my code would be tranformed into blocks which end user would be able to edit freely

However, after trying it that way, my page looks as I want it, but if I want to edit the page using visual editor, it is basically one huge block of text, which can be easily edited when it comes to boldness, font family, etc. but not some styling like text color, background color, etc.

Is there a better way to do this? Or is it simply that when you develop a website for somebody using HTML+CSS, he simply can’t edit it easily without coding knowledge?

[ad_2]
2 Comments
  1. Yes there is a much better way to do this…

    By default WordPress is a blog software, it has pages and it has posts, both of which I controlled with a simple Wysiwyg content block/editor which would output just text or hardcoded HTML onto a page or post. It’s simple but it’s basic.

    Expanding on that is easy, you can add a theme, or create you own, which will allow you to add input fields or page builders..
    The gist of this is that instead of adding hardcore HTML to a page, the user adds a series of blocks or columns with blocks to your WordPress backend which have custom fields inside of them, these fields are linked to HTML part files.
    So instead of the HTML being added to the inside the editor like your doing, you add the data to the editor that you want added to the HTML

    As above you can do this with page builders like Elementor, or you can do it more manually with things like Advanced custom fields (look up ACF Flexible content blocks)

    WordPress free theme Twenty TWENTY two has a page builder with a lot of default things like a content editor, images, links etc etc. You can also code custom blocks for people as well but this works pretty much exactly as the other two options.

    The TLDR of the whole thing is you can link flexible fields in the backend using PHP to add the data to your HTML.

  2. *go into Page editor, switch to “Code editor” and paste the HTML code from my IDE*
    thats the problem, you should be using the page editor to create the content not simply using it as a HTML dump. This will keep it in a ‘user friendly’ format for your clients to edit moving forward.

    You can create custom blocks or short codes to introduce HTML but also keeping it user friendly.

    ​

    also

    *create page.php file (or some specific template file for specific page)*
    The idea is the page.php file will deal with the majority of pages on your site that all use the same layout, its a template for the content to populate. You only then create additional templates for the pages that need them rather then a separate template per page.

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer