Editing Wordpress HTML etc

1

Hi folks

I’m wondering how much I can edit the HTML/CSS/JS on a wordpress.org site. I’ve build a couple wordpress hosted sites in the past and found the themes to be a pain to work with, even with Gutenburg and Elementor. . .old skool html/css etc coding just seems more fun and delivers much more precise results.

So, I read you can edit the homepage htmll/css…can you edit the JS too and do I need to know any PHP to get involved in editing wordpress pages?

Also , can I edit the code for a blog page and it applies to all blog pages?

Thanks for any help with this!

2

Yes you could. But it would be best if you were to create your own Wordpress theme. There are videos on FCC channel to help you out! .

3

Aha, build my own theme, great idea @razzakammar_nano . . .I’m in!

4

The benefit to building your own theme is like building the site from scratch and it looks unique among others. It takes time but its fun thing to do.

5

Very true, the idea of building my own theme slipped my mind. Do I need to learn much PHP to build a wordpress theme? HTML, CSS, and JS are no problem. What about things like Bootstrap and favicons etc. can they all be used as normal?

6

Hey @codebarron

Maybe a compromise between using a theme and building your own might serve you best.

The advantage of using a well designed theme ( great reviews, large installation base, community support etc., all the usual stuff ) is that it will be mostly free of bugs, and it will have lots of good functionality already built in. I’m thinking about the header and menus, and the mobile responsiveness, as well an any specialty bits and pieces the theme developer may have added.

The compromise I am suggesting is that you then write custom page templates for the pages to get the look and feel you want. Same for your blog page, you would need to override the theme’s blog template and use one you write yourself.

So you get the stability of a well built theme, and the community support when you have to ask for a little bit of help, and you get to learn all about WordPress theme development just the way you would building your own. And yes, not matter which way you go, build your own theme from scratch or customize an existing theme, you will need to build some PHP chops to use with your html, css and JavaScript/JQuery.

Good luck either way, both routes will be very educational!

7

Thanks @rickstewart, I appreciate your answer! And good points about community and bugs etc. I did wonder about security when building my own theme. . .I have a google on building my own, but I’m sure playing around with a prebuilt theme will be great to see how PHP works in this context.

I’m assuming that when a theme gets updated etc. my custom html/css etc wont be affected? And would you suggest using the HTML blocks within the editors or downloading the code and using a code editor? (I’d prefer 2nd option!)

8

Yep. Downloading the code is the best solution. If you have ever used ejs then that is kinda how PHP would be.

9

The trick, if you want to call it that, when it comes to keeping your custom code safe when the theme takes an update is to use what is called a “child theme”. Google that and you will get a full explanation. Always – 100 percent of the time – use a child theme when building WordPress websites.

Concerning backend editors, Gutenberg or Visual Composer ( WPBakery ) or Elementor, etc, because you will be building your own templates you may never need to use a backend editor much at all. Your content can go right in the template. The exception to that would be when you use the same custom template on multiple pages, then you would design the custom template to accept content from the backend page editor, like the Gutenberg editor, instead of plugging the content directly into the template.

What I have been doing personally is using a WordPress plugin called “Classic Editor” so that I do not have to use Gutenberg blocks but instead use the wysiwyg editor, then I can use good old html without the headaches of blocks. Many many WordPress developers are doing this, as you will see by the number of installations on the plugin website, 5+ million. I’ll link the plugin below.

As for your development environment, personally I almost always ( except if I am doing a very quick job for someone ) use ftp to connect my IDE to the website hosting account and do my work that way. I really like having access to everything in my own IDE, especially my custom template coding.

1 Like
10

Great info @rickstewart, child themes makes sense! I’ll be glad to not have to design a site with Elementor/Gutenburg, was frustrating after having learned HTML/CSS.

I’ll give classic editor a go .

I guess if I’m designing my blog page template I can create a custom layout and style for the blog pages, and then use blocks to input the text/images/elements into each unique blog post right?

I’ll try FTP as only done it once before. Is there security risks involved with this?

11

Once you pick out a theme, install it, and create a child theme, you have all the basics in place.

Then in the theme ( not the child theme ) find the php file used to display the posts. Lets say it is called blog.php. Make a copy of that file and place it in the child theme, then WordPress will take note of the file that is using the same filename and use that one instead of the file in the main theme.

You then would rewrite the code that displays a blog post to suit your requirements. And yes, you would use the “Add New Post” in the WordPress backend to create your posts using whatever editor you choose, lets say the “Classic Editor”.

To style the page ( or any page / post ) you add your css to a file in the child theme called style.css

If you decide to write a custom template for a page other than your blog posts you would probably not copy some file from the main theme to the child theme, but rather create one from scratch. That is not always the case, sometimes the template that comes with the theme is pretty close to what you want and you might “borrow” that code to use in your custom template. By the time you are doing any of this it will all make sense because if you are anything like I was at this stage I was reading “how-to” articles all of the time on everything.

My advice, set up WordPress on a server, find a theme, install it, create a child theme, and then pick away at it from there. You will answer a lot of your own questions just poking around and trying different things.

About ftp. Most decent IDE’s support two modes. If the website is installed on the same computer as the IDE then there is no need to use ftp, the IDE justs opens and edits the files directly. The other mode is a remote mode where the website files are on some other computer/server. In this setup the IDE connects to the server via ftp and then for most practical purposes behaves just as if the files were local to your computer. You open the file, make your edits, then upload the edited file to the remote server.

Do a search here on FCC for IDEs, there is a ton of great advice. I purchase mine ( PhpStorm ) to get all the features I need, but there are a lot of really excellent free ones out there.

1 Like
12

Thanks so much @rickstewart, so helpful! I have created a child theme folder and added style.css file, my hosting allows me to edit files in browser so that’ll suffice for now.

I was reading an article that says you have to include the following code to the beginning of the css file;

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

Is that the case? (obviously edited for my projects).

13

I believe you do have to include some of that, if only so that when you are in the WordPress backend looking at the themes available to be activated, your child theme will be included in the list. In WordPress you always activate the child theme, not the main theme the child theme is attached to. I expect the style.css would still work without it, but I have never seen a style.css file that did not include it.

Edit: I want to correct myself. It does turn out you must include the header information in the child theme’s style.css file. One main reason is to identify which theme the child theme is attached to. You can have many themes in your theme folder, but the child theme may only be the child theme of one of them, and the header information is how WordPress figures that out.

1 Like