How to Convert Static HTML Template into WordPress Theme
Vložit
- čas přidán 8. 08. 2024
- In this video we will learn a few ways to convert from HTML to WordPress and how to execute each of them. We will learn how to include external CSS files using CDN links. We will integrate Font Awesome Icons and Google Fonts in our WordPress Theme. We will fix issues regarding images not showing or broken image links and we will do that by learning the best way to integrate an image into our wordpress theme.
If you count only the CMS-built sites, then 64.1% of those are WordPress. WordPress allows everyone to use it, regardless of enough coding knowledge. You won’t need to hire WordPress developers for development or updations as they are super simple.
Converting your HTML static website to WordPress will allow you to manage it quite easily. But what does it mean to convert static HTML page to dynamic in WordPress?
When we say that an HTML site needs to convert into a WordPress website, it means taking your existing data from your existing static HTML site and transferring it into a WordPress theme.
📙 Course Contents
🕘 (00:00) Introduction
🕘 (01:19) HTML theme files
🕘 (02:44) Moving HTML Elements to WordPress theme folder
🕘 (03:16) Setting up Header of the website
🕘 (05:05) Setting up Footer of the website
🕘 (06:17) Setting up CSS file in WordPess theme
🕘 (07:24) Including Font Awesome Icon ( External CDN Link )
🕘 (10:22) Including Custom Google Fonts
🕘 (11:50) Setting up Main Page of WordPress theme
🕘 (13:57) Fixing broken image links in Wordpress theme
🕘 (17:44) Including JS files in WordPress theme ( Fixing the Slider )
🕘 (19:49) Conclusion
📚 Resources ( Code Repository )
► github.com/LearnWebCode/unive...
🎥 Previous Tutorial: How to setup Global Header and Footer in WordPress ( MUST WATCH )
► • How to Setup Global He...
_________________________________________________
🎥 Next Tutorial: Avoid Caching of CSS and JS
► • How to Avoid Caching o...
💻 Watch Full WordPress Theme Development Course
► • Wordpress for Beginner...
_________________________________________________
✏️ Education should be FREE but if you can afford it buy course from here
bit.ly/2RkXEgy
#freeeducation #tutorials #wordpress
MAN THAT'S AN INJUSTICE: YOU DESERVE MORE LIKES & COMMENTS ! EVERYTHING IS CLEAR, SMOOTH. FOR ABOUT 3 YEARS I'M TRYING TO UNDERSTAND CODING, & WATCHING YOUR VIDEO MAKE ME FEEL LIKE IN ELEMENTARY SCHOOL. PLUS IT, DOESN'T LAST SEVERAL HOURS.THANKS A LOT
my first ever tutorial on wordpress! such a breeze to understand!
Neat trick doing the double text editor thing with different themes 👌👌
hey genius.. subscribed..
You are great, your way to explain is easy and calm, we can follow your courses with love willing, you deserve to be a successful teacher.
I think any one lessen to you, will love that. i give you 5 stars.
Thanks man
you are a life saver bro , thanks here you a subscriber
good tutorial at all for a static page, if you wanna edit some text you always have to change the html code thats nothing u want if you work with wordpress.
great one
how did you get the light scheme that is synchronized with wordpress
wow thanks, this is the most to the point tutorial ever
Hi, on the 10 video, around 6:40, i have a problem. the style.css is missing in the folder i download from your git-hub, i'm kinda lost now, what to do?
Wow, You touched my heart!
Very clearly to understand, step by step! You got my Subscribed with All Bell + my big Respect! 🙇♂
Thanks for your tutorial. I can't find the JS folder in the resources.
The style sheet needed in video is not the same in Github. Can you help. Love this video playlist.
Hey MrKnowItAll,
The resources link above took me to Git which had a different file structure from the content in the video, and I wasn't able to locate the .js file needed to load into the WordPress theme. Can I get some clarity, please?
omg!. you deserve more like and views!! this is gold.. thank you so muchh but im stuck at js integration , the slider doesnt work 😵😵😵😵😵😵
Thank you, God bless you
Thank's for tutorial. But could you develop custom plugins and themes from scratch without already done plugins and themes?
thanks for your your explanation what we can do for the css conflict ?
I watched your video and another but I cannot seem to get it working. I do not know what I am doing wrong.
I can help you out
Thank you for your lesson. I am trying to follow everything to the point. But something has made confusion here. At my end the slider is not working as you and showing an error Uncaught TypeError: document.querySelector(...) is null. Could you please make it clear?
Add your script tag before the closing body tag.
I've been doing so well. got stuck here at the css file bit, can't find it
It's under within the build 📂 It's the style-index
@@Eggsec CSS isn't working for me either. I tried the style-index file - NO JOY. I tried older versions on github - NO JOY. Does anyone have the correct style.css file?
@@Eggsec thanks for save me!😘
@@rmroberts76 Yes
is this the same process for 2023?
Yesss✨
@CodePlusPlus there's quite a few files missing unfortunately. I am looking for the entire js folder. Can you help us out here? by the way, to compile scss into css you need sass .
github.com/LearnWebCode/university-static
Js files are in 'src' folder
@@mrknowitallyts yes, i thought that but there is no “scripts-bundled.js” there. what do i enter into line 4? i’m really stuck. I’m sorry if it’s really obvious. maybe there’s something i’m missing.
Watch this
czcams.com/video/su6H3e8KT0U/video.html
@@mrknowitallyts thanks, been all the way through it; now managed to get gulp watch up and running, still cannot get the HeroSlider.js to run on the site - what should the functions.php contain? I have brought over the src directory (which contains the modules directory and index.js file ) over to my themes folder directly under "fictional-university-theme" and edited the functions folder to include several variants on "wp_enqueue_script('main-university-js', e.g. get_theme_file_uri('/src/modules/index.js'), NULL, '1.0', true); ", also tried wp_enqueue_script('main-university-js', get_theme_file_uri('/src/modules/HeroSlider.js'), NULL, '1.0', true); and other permutations on this . no luck. can you help?
@@BillWhammers Rename folder name 'src' to 'js' and then within folder change 'index.js' to 'scripts.js'. Now run your gulp watch again. scripts.js will be bundled into 'scripts-bundled.js'. Now you only need to include this newly bundled js
wp_enqueue_script('university-main-js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, microtime(), true);
Downloaded the HTML file few days before. I am following but i dont find the .js file or folder. Can you please guide me through . probably the script is updates.
He made many changes on the project in github since April 2020 which is the date of this video, so u need to check the commits of the master branch and go back to the versions of 2020 so u find the folders and files just like in the video
@@tonofcurses7334 Thanks brother, I do understand that, can anyone make me understand about the updated project/ files. TIA
can you please provide us the wordpress source file
github.com/LearnWebCode/university-static
@@mrknowitallyts firstly thank you for this awesome stuck. im now stuck here, i have renamed the src folder to js and the index.js to scripts.js but still the footer slide show is not showing. please assist sir. thanks