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

No video

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

Рет қаралды 208,263

Ray DelVecchio

Күн бұрын

Пікірлер: 100

@stafa5568 4 жыл бұрын

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.

@RayDelVecchio 4 жыл бұрын

Appreciate that, glad it helped you!

@anthonyclarkson5209 5 жыл бұрын

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

@RayDelVecchio 5 жыл бұрын

Thanks so much Anthony, really appreciate it, and it took me a while to even document my own process, which is purely because I learned from about 5-10 years of trial and error!

@IronRider 5 жыл бұрын

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

@RayDelVecchio 5 жыл бұрын

Glad it help you - that's the path I took... once you get a good concept on how the WordPress system works, what is stored on your web server, what is stored in the database, you can pretty much customize however you want. I wanted to touch on all these things with this simple project!

@ScreenPrintR 5 жыл бұрын

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 Verrrrrrryyyyyy Much.

@offensivebias3965 3 жыл бұрын

This is what ive been looking for

@fazlaynur4509 2 жыл бұрын

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

@rajatash 4 жыл бұрын

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

@johnbodensiek5978 5 жыл бұрын

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

@RayDelVecchio 5 жыл бұрын

Awesome, yea that's very useful if you need to fix 1 or 2 things only on mobile!

@tom-egert1465 5 жыл бұрын

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!

@RayDelVecchio 5 жыл бұрын

It took me a while to figure it out. I still don't remember a lot of the correct syntax off the top of my head... I just know exactly what to search for - especially with CSS properties. Those can get really confusing when you have multiple styles being applied to one element. You then need to figure out the precedence and overwrite the correct way. That gets confusing fast, haha!

@tom-egert1465 5 жыл бұрын

@@RayDelVecchio it sure does.. 🙄

@Sahil_Shukla98 5 жыл бұрын

You explained the stuff really nicely. Loved it.

@JoniSchwalbach Жыл бұрын

thank you. very nice explained

@nikhathoo 3 жыл бұрын

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

@RayDelVecchio 3 жыл бұрын

Glad you liked it!

@maciejszczypek817 Жыл бұрын

Great tutorial

3 жыл бұрын

Thank you, Ray. So helpful! Good stuff.

@HeiderSati Жыл бұрын

Brilliant Video, thank you for making it

@myshorts3333 2 ай бұрын

your explained really amazing

@mouadhboukefa1546 4 жыл бұрын

You are a hero sir

@RaxSoller 2 жыл бұрын

Great tutorial, very clear and easy to follow

@vedranjagodnik7980 5 жыл бұрын

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

@im4485 4 жыл бұрын

I think this is exactly what I need

@sabuein 3 жыл бұрын

Thank you, Ray.

@mahmoudsmaoui6860 5 жыл бұрын

amazing tutorial !!

@RayDelVecchio 5 жыл бұрын

Glad it helped you!

@alaminbepary1308 3 жыл бұрын

Thanks

@ivanv-n3152 4 жыл бұрын

Great Video !!! Very informative

@keatlow 5 жыл бұрын

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

@Miltonhn 3 жыл бұрын

You're good, thumbs up.

@capferrat6058 5 жыл бұрын

Thanks man. Great stuff!

@RayDelVecchio 5 жыл бұрын

Appreciate it!

@HACH191 5 жыл бұрын

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

@RayDelVecchio 5 жыл бұрын

That is sort of like an art. The first thing is to find unique identifiers within the code that you can search for on the backend. Then figure out which PHP template file is being used (when you go to Appearance > Editor section within admin) - you can read more about that here: developer.wordpress.org/themes/basics/template-hierarchy/ Then sometimes the code can be elsewhere - your theme might have a custom code section within the settings, it might be a plugin. It does take a little time to get good at it. I've spent many, many hours banging my head against a wall trying to figure out fixes that were right in front of my face, plus have broken websites by altering the code.

@HACH191 5 жыл бұрын

@@RayDelVecchio very annoying cos i can change things from google inspect as it automatically directs me to that code, however i cannot find it in the backend as there is no search bar to narrow down results, I literally have to go through each them file and still I cannot find it. Arghhh my eyes hurt haha I need to go to bed. Thanks for the vid anyway

@RayDelVecchio 5 жыл бұрын

Yea, the code you see on Google Inspector is not the source code. For instance, source code links to Javascript files. When the user loads the web page on the browser, that Javascript is then run, and it can change the HTML in real-time. That's why you are not able to save the updates you make on Google Inspector back to WordPress. Keep pluggin away after you rest up, haha. The tech stuff is so foreign until you get a "big picture" on how the website goes from code to what you see on the screen.

@davidsaso1234 5 жыл бұрын

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.

@RayDelVecchio 5 жыл бұрын

lab.maltewassermann.com/viewport-resizer/

@innz3000 5 жыл бұрын

Great tut. :)

@fahmidamashura7076 5 жыл бұрын

But when I update that theme, Then my all edit will gone or not?

@RayDelVecchio 5 жыл бұрын

If you create a child theme and make your changes there, you'll be OK. You can copy the template files from the parent theme to the child theme and edit those.

@Eskimoz 4 жыл бұрын

Alors là, un gros bravo :)

@luiss.webdevelopment2717 5 жыл бұрын

Great Tutorial Thanks!

@miscellaneousmaster4062 5 жыл бұрын

good one.

@stevieeejay1029 2 жыл бұрын

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

@RayDelVecchio 2 жыл бұрын

I think you're referring to WordPress.com - and I have never used that. However, I do believe they either completely restrict you from editing (so you don't break things) or you will need to upgrade. This is exactly why I recommend self-hosted WordPress.org - pick your host and you install the full version of WP that you can completely edit/hack for a much more affordable price.

@RayDelVecchio 2 жыл бұрын

Here's an installation video on the most affordable hosting company (HostGator) if you decide to switch - kzfaq.info/get/bejne/qN92mdh6lbzcqo0.html

@greenparadise2 6 жыл бұрын

you must be on the business plan to be able to have access to the theme files like this. possible with premium plan?

@RayDelVecchio 5 жыл бұрын

I think you are referring to WordPress.com hosting, and for that I don't know how much access they give you. If you go with another hosting platform and install WordPress yourself, you have full access to do whatever you want in terms of customizing, adding plugins, etc.

@greenparadise2 5 жыл бұрын

@@RayDelVecchio thank you

@hellomissree844 4 жыл бұрын

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?

@RayDelVecchio 4 жыл бұрын

That's something you'll have to decide! Make sure you back up files if you do. Another option is to wrap the lines of header code with HTML comment tags (look that up, you'll find what they are). Comments will stop the code from showing on the browser, but you'll still have the code (i.e. you don't need to erase or delete it).

@greenparadise2 6 жыл бұрын

also, when someone clicks on your free quote button, where does it lead them? how'd you configure the button so when they click it will do what it's supposed to?

@RayDelVecchio 5 жыл бұрын

The easiest solution is to link to a contact page with form, or you can add a quote form to the bottom of the same page, find the HTML ID to the form element (using Google Chrome Inspector), and add that in the HREF section of the anchor link. Here's an example of that: www.w3schools.com/html/tryit.asp?filename=tryhtml_links_bookmark

@mathewmunyao1785 4 жыл бұрын

Tutorial on point. Where can I get that resizer you're using?

@ronitkumar6546 5 жыл бұрын

nice but I am facing some problem I want to add a custom input checkbox and as well as display the output in woocommerce myaccount page when user check, please suggest me !

@NickelCityPixels 4 жыл бұрын

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!

@RayDelVecchio 4 жыл бұрын

I may just do that!! I often go back and change titles to be more descriptive once I see what people are searching for. At one point I was considering doing a separate video on the Chrome Inspector but this makes it easy to understand through a simple project... and easier for me to show since I only learned about the inspector through website projects and not heavy custom development.

@julianabz 5 жыл бұрын

i don't have this option 'editor' in 'appearence' menu :(..Before it appeared, now when I open it does not appear any more, now only 'HESTIA OPTIONS' that is not to edit

@jovansopovski3949 3 жыл бұрын

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

@RayDelVecchio 3 жыл бұрын

You'll have to search Google for that specific error. I've heard a few people encounter it but never have myself, so I can't say for sure. You can also try uploading the file via FTP instead of making the changes from the WP theme editor window.

@nainakhan8524 3 жыл бұрын

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

@sehlin1994 5 жыл бұрын

I want to get rid of the "Read More"-button, I'm using Express-theme. I can only change it, but not remove it. I've been sitting here for hours now trying to solve it..

@Devils_Claw 5 жыл бұрын

Select the class using inspect element and then use css { display : none ;}

@sehlin1994 5 жыл бұрын

@@Devils_Claw Yes! Exactly what I did, solved the problem. :)

@Felground 4 жыл бұрын

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.

@RayDelVecchio 4 жыл бұрын

I haven't seen that error but this was best article I could find describing the issue - wpengine.com/support/php-editor-errors-wordpress-4-9-higher/ - sounds like it may be a plugin conflict. The error seems to be caused because WordPress implemented error checking when you insert custom code, and I'm guessing that's not working, therefore it won't save any unchecked code (so your site doesn't break). I'm also wondering if it's hosted locally on your computer, not a web server, that might have something to do with it. Can you copy/paste the entire PHP file within your wp-content/themes folder instead of editing within the WP admin? That's what the end of the error message is suggesting you do to bypass that error checking.

@Felground 4 жыл бұрын

@@RayDelVecchio I tried with no plugin still gets the error. After some research I learned that wordpress never intended the files to be edited that way so with a patch you can't edit those files anymore inside wordpress. I found a work around where you pull the file out of the directory and edit it in a code editor and them add it back and that works.

@blackfacebarrera 4 жыл бұрын

Hello, How would you change the text in the button that says "Free estimate". Thank you

@snrealestate6273 Жыл бұрын

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

@NatureScenicViews 4 жыл бұрын

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

@worldfacts135 5 жыл бұрын

Thanks Brother It's Awesome Tutorial I Want to Learn Full Theme Customization And Plugin Can You Help That What Will I Do Which Tutorial I'll Watch . If You Make Tutorial About Full Theme Customization And Plugin Development Please Provide Me the Link Whose help me. I Also Checked Your All Videos But Can't Find Fully theme and Plugin Customization on yor all videos Thanks So Much

@RayDelVecchio 5 жыл бұрын

I appreciate the kind words. I once created a theme and learned how to create a WP plugin, but that was almost 6 years ago and it's not my specialty! Most of the time, I just work within an existing theme like this. This is probably a good place to start for you: codex.wordpress.org/Theme_Development

@worldfacts135 5 жыл бұрын

@@RayDelVecchio Thank You So Much Brother

@azaira010 5 жыл бұрын

How to edit existing index.html... you showed how to add new section and edit.....but i want edit my existing main index....it is not showing in wordpress editor.....so how can i?

@ladellp5135 4 жыл бұрын

How can I shorten the height of the main header in the theme editor?

@kasmeroglu106 4 жыл бұрын

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?

@KingShuu 3 жыл бұрын

anyone know where i can get all those block and pattern codes? i still confused using it

@abdullashafi580 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 !

@youtubefan899 4 жыл бұрын

I camy wordpress doesn't look like this at all, there is no appearance. Can you please send me the link?

@misfittoytower 5 жыл бұрын

For the website I'm editing, "Appearance" doesn't even exist on the left menu. Did they take that off altogether?

@RayDelVecchio 5 жыл бұрын

Are you on WordPress.com hosting? They may give you a limited version of WP compared to using it on a 3rd party hosting company (I use HostGator).

@sridhar6358 5 жыл бұрын

but almost all the themes made should be complying to this standard right

@uttamkhuntia 4 жыл бұрын

Sir,how i change breakpoint settings for moblie???

@pauhemia 3 жыл бұрын

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?

@RayDelVecchio 3 жыл бұрын

Editing a plugin is a bit more advanced because I'm not sure a "child plugin" exists. I absolutely remember searching this out because I had the same question, but can't remember if I found a solution. The best method may be through WordPress hooks in the functions.php file, and whether that's available may depend on how the plugin was created.

@History-and-story 4 жыл бұрын

Is it possible without child theme or in free theme?

@salaahkhayr2398 4 жыл бұрын

Can you tell me which part was php?

@AndrewMarsin 6 жыл бұрын

Nice. But what about plugin customization?

@RayDelVecchio 6 жыл бұрын

You can do this, but that would require more technical expertise while editing PHP files. It's not something I've done before, though I have browsed the PHP code that makes up WP plugins to get a better understanding.