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

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.

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

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.

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:

Use the links below to build your side business today!

___________________________________

Start Freelancing & Make Money with Your Skills!

___________________________________

Create Your First Website or Blog Today!

___________________________________

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

[stafa]

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.

[anthonyclarkson]

Bravo!! Fantastic tutorial I learnt more about CSS and its dynamic properties in this excellent lecture than I knew for the last 5 years!!

[IronRider]

I love you, I'm barely getting from coding from scratch to using wordpress and your tutorial was enlightening, thank you!

[fazlaynur]

Mr. Ray, I appreciate your work, you will continue to make this kind of tutorial, thank you

[ScreenPrintR]

Thank you Ray. About 50 seconds in you mentioned Templates and I remembered seeing that within the hosting file manager. I went to that location and they had two temp directories. Opened the first one and found the text I was looking for. I saved the file first by adding -orig and edited the original. Also found the image location that the developer hard coded (yuck!). Both working fine. Thank you Much.

[rajatash]

You earned a Subscriber !!! Love the way you explained everything, keep doing, great job Sir. Many Thanks

[HeiderSati]

Brilliant Video, thank you for making it

[johnbodensiek]

Bingo! you really helped me out with the screen variable widths and different css style. Thank you!

[nikhathoo]

very cool, I was looking this type of video last few months

[Sahil_Shukla]

You explained the stuff really nicely. Loved it.

Thank you, Ray. So helpful! Good stuff.

[RaxSoller]

Great tutorial, very clear and easy to follow

[tom-egert]

Imma watch it a couple of times and do it through so i'll remember this sh*t, always forgetting the easiest stuff.. -_-

Well done, explained and smooth video!

[vedranjagodnik]

Excellent. This gave me a couple of ideas for my page.Thank you

[snrealestate]

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

[stevieeejay]

Do you need a wordpress business plan to access all of the .css and HTML codes in a theme's editor?

[davidsaso]

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.

[keatlow]

Thanks!!! really appreciated for this video tutorial! Inspired me

[HACH]

if you google inspect a random part of your website, how do you find where that code is within your theme on the admin page of your website? as there is so much code to look through to find it

[nainakhan]

All thing are great but the code is not clear to watch other wise the vedio is superb👍