Advertisement
Home Web Design How to Edit & Customize Any WordPress Theme with HTML, CSS, PHP...

How to Edit & Customize Any WordPress Theme with HTML, CSS, PHP Templates & Chrome Inspector

50

In this step-by-step tutorial, you’ll learn exactly how to edit your WordPress theme using custom code. You can edit the design with HTML/PHP/CSS if you understand how WordPress uses the PHP theme files to generate your web pages based on its template hierarchy system.

The best way to support or say “thanks” is to start your website idea!

If you use my affiliate links, I get a small cut (no extra cost to you) that helps me create free tutorials like this.

🌎 How to Install WordPress in Minutes 👉 https://websiteprofitcourse.com/hosting/

✅ Start now with HostGator 👉 https://websiteprofitcourse.com/hostgator

Are you a WordPress professional? Make money with your website skills!

🧰 15 Tools to Start Your Web Design Business – https://websiteprofitcourse.com/dl15

Let’s add a custom homepage banner to our website that has a strong call-to-action. To do this you need to edit the PHP files within your child theme directory, so they take precedence over for the parent theme PHP file.

Within your WordPress admin area, go to Appearance – Theme Editor to see the files that make up your installed theme. You can copy a theme file from your parent theme to your child theme, and then edit to customize.

Once you update the PHP template file, you can then adjust your design using CSS code. Either add custom CSS to the child theme’s style.css, or you can go to the Appearance – Customize editor.

My preferred method of designing is by testing small changes in real-time using Google Chrome’s “Inspect” button that you see by right-clicking on any website. That will show you the code behind the design, and you can mess around with CSS settings to achieve the exact look that you want.

Once I do that, I then will copy-paste the CSS code into the WordPress theme.

Instead of making massive changes, I am a big fan of incrementally making over your website, about 5-10 lines of HTML/CSS code at a time. This makes debugging much more clear than rolling out several updates at once.

WordPress + PHP + HTML + CSS + Javascript = Endless possibilities to create a completely unique theme!

Do you prefer to build a website visually? Check out my full tutorial on how to customize a website much easier using a modern visual builder (Divi) that is the #1 most popular WordPress theme on the web:

How to Make a WordPress Website (Step-by-Step Tutorial) – https://www.youtube.com/watch?v=69sXXc3nFMg

The website in this tutorial was made with the pre-installed Twenty Seventeen theme along with a free page builder called Elementor, see how it’s done: https://www.youtube.com/watch?v=7R3tVzwgjM8

Blog Post: https://websiteprofitcourse.com/customize-wordpress-theme/

Use the links below to build your side business today!

___________________________________

Start Freelancing & Make Money with Your Skills!

🧰 15 Tools to Start Your Web Design Business – https://websiteprofitcourse.com/dl15

❓ Web Design Client Questionnaire – https://websiteprofitcourse.com/dl02

⌚ Time Tracker Sheet – https://websiteprofitcourse.com/dl05

🤝 Web Design Business Pro Tools & Training – https://websiteprofitcourse.com/join

___________________________________

Create Your First Website or Blog Today!

💻 WordPress 101 Training – https://websiteprofitcourse.com/dl03

🚀 Launch Your Blog in 14 Days – https://websiteprofitcourse.com/14day

🎨 Drag & Drop WordPress Page Builder – https://websiteprofitcourse.com/divi/

___________________________________

DISCLAIMER: Please note that some links are affiliate promotions. I only recommend products & services that I know and trust.

source

50 Comments

  1. This is just what I was looking for. I'm new to WordPress, but not to coding, so editing these templates will be a breeze for me. I can never get wordpress to look how I want it so hopefully I will be able to make something decent.

  2. Hey Ray nice work with this video. But i have question about the .php files. When i go to edit the index.php(home page) file and try something simple like adding a div with a header text, and when i save it pops up a message: unable to communicate back with site to check for fatal errors so the php change was reverted. You will need to upload your php file change by some other means, such as using SFTP. And also when i inspect the site on the front page the class that i want to change the html can not be found in the index.php file in theme editor. I am using a child theme. I know well html css and i have basic understanding in js, but i am new to wordpress developing. I like to hear from you in what way can i resolve this. Best regards

  3. hey tutor i just buy a theme ( called electro) .In this theme home v7(that I have to use) has three ad-blocks attached with slider right side ! I tried to remove it by css ,but I failed….it just dissapear full slider when i want to remove those three blocks code in css….now what can i do ? can i do it by delete some html , javascript or php code !??please help sir !Thanks !

  4. Hi! I'm struggling – in my case i want to edit a .PHP file in my plugin. How should I do this? do I still do it through my child theme? or should I create a child plugin?

  5. Hi! I need help. Because I need to remove the header from a paid wordpress theme (I am adding a different kind of header using Elementor). Do you think I should just delete the lines of code for the header?

  6. Im trying to add my HTML and I keep getting, "Unable to communicate back with site to check for fatal errors, so the php change was reverted. You will need to upload your php file change by some other means, such as by using SFTP." I know I'm putting it in the right spot because it briefly shows up then goes away. I'm building it on my Local host. Any help would be appreciated. Thank you.

  7. Thank you very much for this and i have some questions. i want to edit a estate theme for my project. Theme using plugings. One of them WPBakery Page Builder and other one called name as home core which is they are added diffrent elements to WPBakery Page Builder to use in their theme. But i want to edit this part which is they are added elements later. And another question is i can't find the site element in theme files. There are too much file. is there any way?

  8. I downloaded this video over 2 months ago, and after finally going through it till the last i felt hugely indebted to you. So i quickly looked up your video on youtube to drop a like and also subscribe. Thanks a lot.

Leave A Reply

Please enter your comment!
Please enter your name here

Exit mobile version