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
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.
thank you. very nice explained
Brilliant Video, thank you for making it
Hello sir I have a real estate website using Houzez theme create a listing bottom not working its redirect to home page please solve the problem
Great tutorial
Great tutorial, very clear and easy to follow
Mr. Ray, I appreciate your work, you will continue to make this kind of tutorial, thank you
Do you need a wordpress business plan to access all of the .css and HTML codes in a theme's editor?
All thing are great but the code is not clear to watch other wise the vedio is superb👍
Thanks
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
Thank you, Ray. So helpful! Good stuff.
very cool, I was looking this type of video last few months
Thank you, Ray.
anyone know where i can get all those block and pattern codes? i still confused using it
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 !
This is what ive been looking for
Didnt like what you showed…was looking for exact modification of theme in this shitty wordpress….cannt do it now…..crap
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?
You're good, thumbs up.
I think this is exactly what I need
Is it possible without child theme or in free theme?
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?
How can I shorten the height of the main header in the theme editor?
You earned a Subscriber !!! Love the way you explained everything, keep doing, great job Sir. Many Thanks
Hello,
How would you change the text in the button that says "Free estimate". Thank you
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.
You are a hero sir
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?
Can you tell me which part was php?
Sir,how i change breakpoint settings for moblie???
Alors là, un gros bravo 🙂
This is great! But if you had named it "How to Edit & Customize Any WordPress Theme with CSS, HTML & PHP *and the Inspector*," I could have found this a week earlier!
When your theme code is embedded….
I camy wordpress doesn't look like this at all, there is no appearance. Can you please send me the link?
i had created full screen slider but i want to put a transparent menu on them how to do that please help?
waiting for your reply
thanks
Tutorial on point. Where can I get that resizer you're using?
Cannot do it on Avada theme
How to find in which dile is get_header(); ?
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.
Great Video !!! Very informative
nice work
Loved the video, very informative and gave me more than what I was looking for. Can you link me to the resizer applet you were talking about? I can't seem to find it.
Excellent. This gave me a couple of ideas for my page.Thank you
but almost all the themes made should be complying to this standard right
Bravo!! Fantastic tutorial I learnt more about CSS and its dynamic properties in this excellent lecture than I knew for the last 5 years!!
Bingo! you really helped me out with the screen variable widths and different css style. Thank you!
amazing tutorial !!
For the website I'm editing, "Appearance" doesn't even exist on the left menu. Did they take that off altogether?
good one.