Make a WordPress theme with Bootstrap 3 - Tutorial #2

[@AgahNnaemeka]

This video series is the sweetest so far

[@AgahNnaemeka]

Watched a while ago..... Quite simple. I built a theme on it.

[@katieh7730]

This is a captivating tutorial series, you explain everything really clearly

[@pwollerman]

That "line thing" character is called the "pipe symbol", in case no-one else has mentioned it. Thanks for the tutorial!

[@GarethDiedericks]

the "line thing" is a pipe... Thanks for the tut!

[@scottharrington6441]

Thank you so much for this! I've done a couple very lengthy WP tutorials on theme development and this one was so simple and cutting that it really helped me understand more about WP and what the capabilities can be. Cheers

[@sayedakbarali5650]

Thankyou all together a great tutorial

[@xusoft206]

I had the same problem and found the same answer:

[@Palpab1e]

Thank you so much! I was wondering why it didn't work

[@mrityunjoydas1276]

You know? I should have read this comment before trying this over and over. thanks Sayed.

[@easternwawoman]

***** Why aren't you using a cdn for that js rather than your server? CDN would enable calling of latest version. e.g. "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">

[@SamSheekey]

Thanks for putting this up!

[@brentonharper-murray1752]

Following along, great tutorial. Can't wait for the next episode.

[@JohnWilkinsonTesla]

Wow. WOW. Wow - Following along and its all coming together like magic.

[@ailmcm]

Awesome work! Very easy to watch and understand!

[@alexitaylor-parent8908]

If having trouble with adding your .js files use this WP function instead:

[@CharlesGnilka]

That worked for me!

[@joedomingo6962]

You. Are. Da. Man! thx (y)

[@skrillexsn]

sir you just put back a smill on my face

[@kempsterrrr3793]

I've already tried this and still cannot get it to work:

[@kempsterrrr3793]

Will Kempster Just put the echo in but still nothing !

[@xboxogjpz]

[@aygrius]

You saved me!

[@jooyeonlee3118]

Thanks!

[@mlangnoi]

Thanks !

[@kajolason4683]

Thank!

[@overallsitescse]

Thanks.. Works like a charm

[@sxsw3194]

The "line thing" is called a vertical pipe, they | are | awesome! Great vid! But seems like we're further back then in the first one haha! I get it though lots of code!

[@andrewmcbride88]

that vertical line character is called a "pipe" in case anyone was wondering. didn't see it in the comments

[@nikkipantony]

In the footer

[@imrankhan-ln5ly]

Thanx /js/bootstrap.min.js"> Works great!!

[@velosofy]

Lookin good

[@gabsztoth]

This solves CSS link problem:

[@supawadeechuchouy7645]

Gábor Tóth Thank you

[@Co-Monad]

Never realized that converting a BS3 to WP was so easy.

[@NirajRajBana]

Next Video Please!!!....Part 3 very much needed...thank you.

[@EdmundPunongbayan]

what software you use for coding?

[@victorkimura1]

this also works for the footer:

[@michaelrussell738]

Thank you very much Victor I was stuck on this and could not get JS to work on my site but this line of code works perfectly :)

[@cjmedia_llc]

Thanks a mil Victor Kimura ...I could not get my bootstrap.min.js to work. This snippet you provided worked perfectly!

[@victorkimura1]

You welcome! :) Father God bless you both!

[@ibiza4u]

Thank you! Thank you! Thank you! You saved couple hours for me man! =)

[@TheInsox]

When is your next tut coming? Are you also gonna handle the comments and comments styling?

[@mpty2022]

that line is the pipe sign

[@MrBledi]

for all those who have problems with style.css import add this line too on style.css @import url('css/bootstrap-responsive.css'); and basically in end is like this @import url('css/bootstrap.css'); @import url('css/bootstrap-responsive.css'); i tried everything, every comma and every dot, since i was on a local server, i open ftp port on router and an new rule on windows firewall for port 21, but nothing. there is the solution.

[@TheRealGaffer]

Hey dude, have you used one of 320 wordpress-bootstrap themes? I've downloaded one to look through and I notice that they don't seem to do anything the same as you haha! Either way I think I'll start from scratch and follow you just so I can pick up the basics rather than relying on someone else's code I don't understand yet.

[@iPlayGuitar0702]

@Coder's_Guide Thanks for the great Bootstrap 3 videos! Quick question - are you still accepting new members to the Beta Site/Forum?

[@CodersGuide]

Hi, saw your email. The site needs some last-minute security work done before I can start inviting beta members. Sorry about that!

[@iPlayGuitar0702]

No problem, thanks again for the great videos! Another question - do you know where I can find FULL documentation on the CSS for Bootstrap 3? On the website, they show examples, but subclasses like navbar-inverse are not shown. Help? :)

[@CodersGuide]

iPlayGuitar0702 The Bootstrap website is the only good place that I know of. It does show some subclasses, including your example of navbar-inverse: getbootstrap.com/components/#navbar-inverted

[@KatlegoMoilwa]

I know it has been a few years now but I need help. Why won't my jquery and bootstrap files register? I have added them just as you have but my drop-down menu's are not working. I am developing my own machine using WAMP.

[@joaquinencinas]

Hello thanks for the tutorial is has help a lot. I notice that get template directory function does not work on the new WP. I had to use

[@jankogagic1799]

+joaquin encinas Yes this solved my problem, use bloginfo func. for both: jquery and boostrap.js

[@rutamonkiene172]

Hi there! I am trying to create my thirst Bootstrap Wordpress Theme while watching your videos. So far everything was ok. Though I have faced up one problem - after writing

[@csantos79]

[@CodersGuide]

Barack Obama I'm not entirely sure why the code that I used isn't working for some. The code I used is even in the WordPress docs: codex.wordpress.org/Function_Reference/get_template_directory Anyway, glad you got it working!

[@Thaulopi]

***** both do not work for me....

[@Thaulopi]

Thaulopi amendment; You cannot use both procedures..meaning @import inside the style-sheet and

[@Thaulopi]

***** All is well, thank you, I was able to identify my! mistake. I love WP by the way. wp_query() is a wonderful tool.

[@annaglikin8947]

+LenkaPage.com Website Design thanks, i was looking 4 the cause almost 2 days :)

[@gabrieldeluna1682]

For some reason, I couldn't make the JavaScript part to work. Is there any way I could send you my files and if you could possibly look at it to see what the problem is? Thanks a lot. Can't wait for the next installment.

[@stefanmaier8779]

next video please

[@victorkimura1]

@Coder's Guide, can you inform the people who download your code that the permissions need to be changed. I think you have some special permission set on the downloaded files because they are greyed out when unzipping them and copying them to the folders - at least, this is the case for my Windows 7 WAMP machine.

[@zerobambiro]

in a design with anchors, where the page stays always the same, the header and footer.php isn't needed - just the index.php. right?

[@michelleanova]

I'm having a problem with

[@InuHakushoGirl]

Did anyone ever figure this out? I'm having trouble as well and none of the fixes that are in the comments are working for me.

[@imrajkumarsm]

+Michelle Anova (Mimi) use this in ur css file @import url('css/bootstrap.css');

[@drewconroy5938]

Hi: I just finished your second video. Everything seems to look fine but the drop-down menu is not working. It just highlights when you put your cursor over the links but no drop-down? I checked over the code but I can see where the problem is?

[@hayderctee]

+Drew Conroy Hi Use This code:

[@robbinshee]

awesome, can we get the source file?

[@WebbizDublin]

SSL not renewed, Is it safe to download?

[@raj080288]

If you update wordpress, would you lose the changes and customisations you've made?

[@bradadams1503]

No, not usually, although I'd recommend a backup of your theme & DB where wordpress is installed beforehand - Just in case.

[@Jumbiiiee]

Where did he get the index.html file from?

[@VandaliZmBand]

How to add a bootstrap carousel with thumbnail slider in this theme?

[@medialuxsdnbhd4306]

When I can get the HTML file? The link is broken.

[@einnorwastaken]

this doesnt work in Wordpress 4.0..

[@marcoventuri6247]

Hi guys, the link to the HTML is broken. Does anybody have the right link? Thank you!

[@KIKOmanasijev]

i have image logo insted of text logo, how do i insert it?

[@rombar2523]

From where can I download your source code actually?

[@PatrickMelia]

After watching you video from the start to around 6 mins/6 mins 20sec, the javascript will not work. Any tips on how to fix this?

[@igorc2c2c2]

Replace it with

[@brandongibbs5880]

Igor Coelho Cunha That was a perfect fix for my site... having the same issue! Thanks a million!

[@_CT_]

Igor Coelho Cunha yeah thanks, worked for me as well!

[@andrewturner8951]

Hi all, Sorry if I missed in in comments below, but after adding this line:

[@imrajkumarsm]

+Andrew Turner use this in your css file. @import url('css/bootstrap.css');

[@SilverWave64]

What if I have different css files for mobile, tablet and desktop view? How do I link them?

[@DaveWalter83]

I think that by using Bootstrap 3, this guy plans to use one css file that is responsive to being viewed on mobile, tablet and desktop. It's easier this way when starting from scratch, although you might have a bit of work to do if you already have the different css files.

[@SilverWave64]

***** I have a template that has different CSS files for each mode. No idea how to merge them...

[@aeginorum]

SilverWave Use @media(max-width: 767px) { @import'css/mobile.css'; } etc. You should alter the max-width to your own desire of course!

[@SilverWave64]

Ruben Engelbrecht Great idea, thank you! :)

[@jeaneatz]

Great tut

[@amirhusain8264]

How do I add a widget area!

[@andreizmej9599]

Still cant get index.htm template... please update!

[@btm1]

really good stuff,gj!

[@JohnSeabourn]

as andrewmcbride88 stated, the "line thing" is called a pipe. It is common to use double pipes as a OR i.e. I would like to eat an apple || orange.

[@jacobcloninger]

The "line thing" around 7:52 is usually called a "pipe"

[@robertbobosila6819]

It doesn't work. I can't download the html file, can you fix it? Thanks!

[@mustafaehsanalokozay655]

Clear!!! thanks

[@InuHakushoGirl]

My wordpress admin bar covers up the menu bar that we just coded-- so I can't see if it looks right. Does anyone have any suggestion on what to do? I've tried to use several plugins and solvers from around google search but I still can't see my menu bar.

[@InuHakushoGirl]

Never mind, it's not called the admin bar anymore. It's the Toolbar! You can turn it off via your Dashboard in the Your Profile.

[@KasperTangHjriisKTH]

Hello i was all set up and ready to go, but then the link was broken.

[@narekkeshishyan2889]

The drop down menu is not working.

[@gregtdude]

should be bootstrap.min.js not bootstrap.js as we've deleted it from the directory earlier in the video

[@TolgahanBozkurt]

dropdown doesnt work even i use /js/bootstrap.js

[@NazmulHossain]

try this

[@SimonKlimekNetwork]

Nazmul Hossain thanks for advices :-)

[@SimonKlimekNetwork]

hi guys line 7 in header.php : click -> 6:36 in result it make blank space between top edge and menu and nothing else

[@SimonKlimekNetwork]

a false alarm

[@handmadesoapbars]

firefox says your site is not securred and warned me that it is potentially harmful. I wanted to download the resource file, can you add it to a dropbox?

[@ApexJnr]

Celestail Petals its safe.

[@mekimchify6046]

i used this instead to import bootstrap into the footer.php from my webhosting server, else i got a wierd local server map instead of a URI with ....

[@AnimaRookie]

Kim Nordin awesome! this worked for me! thank you!

[@kyuba]

+Kim Nordin works like a charm, thanks!

[@ivofrancisco357]

Thanks! This worked also for me :)

[@slebbobjorn1778]

I'm kind of new to php - why does my browser keep caching php and emptying the cache won't help? I just keep on sending in variables in the URL-field but that's just a very poor workaround. (e.g …thesite/?=1234) can anyone help me out on this?

[@jankogagic1799]

My footer content doesnt show up , but my dropdown menu works... can any one help me?

[@steejfan5923]

html link isnt working anymore

[@JuliaToya]

is there a difference for commands for wordpress if I'm using local server? Would this code work /js/bootstrap.js ???

[@NazmulHossain]

Try this

[@JuliaToya]

Thanks a lot!

[@999avishek]

when i am refreshing the page after including the header and footer as get_header() and get_footer(); i don't see any thing, the header is not just there :( please help me, doing this thing on the local server btw.

[@999avishek]

solved, sorry for being inpatient :)

[@Skeeterz71]

Line thingy is called a "pipe"

[@t-rexarg7248]

/js/bootstrap.js not working ...so wierd..

[@NazmulHossain]

Try this .

[@hosam275]

Nazmul Hossain it work now thank you but why uri? it supposed to be url?i wonder if bootstrap.js is deleted !!!

[@narekkeshishyan2889]

I already fixed the problem) thank you

[@obito7969]

link isn't working :(

[@gardinustaung]

Cant download the html

[@Jordan-ei6rd]

When do you plan to fix the html file link? lol

[@progmandev]

this is so awsome and so good with this tutorial it can make it eazy for me to develop wp theme thank you so much ..

[@AbhiBhardwaj1289]

thanks a lot. :) a lot of blessing for you .:-)

[@MurhafSuz5]

your html file link is broken !!!!

[@xXStringZXx]

I still don't get you Remove Bootstrap.js when you are actually using it on the footer script... Someone explain it to me if possible :l

[@rewz2006]

its because he is using the bootstrapmin.js

[@zerobambiro]

i really dont understand why you delete the link to bootstrap.min.css. You just say: "we dont need it anymore" and noone understands why. Its a good tutorial but try to explain why you do things :)

[@jankogagic1799]

+artimachtpartyy you must explore boostrap documentation and watch some other basic tutorials to learn the diffrence between boostrap.css and .min.css

[@random_32114]

it's called a 'pipe' character

[@jacklucas4422]

Fuction get_template_directory is not valid! Use get_template_directory_uri

[@jacklucas4422]

I use Wordpress 3.8.1

[@t-rexarg7248]

i can`t make it work......

[@NazmulHossain]

Solved :)

[@davidbuchan1]

the line thing is called a 'pipe' :-)

[@Alexraz01]

In the next video can you please tell us the advantages of wordpress. everyone in my school is using it, and at first I felt like it was cheating. don't forget to mention my username in the next video ;)

[@bradaleyx]

| is called a pipe i believe

[@iainmatchett7066]

Yeah, Actually just paused the vid when he said it to come and post lol

More posts

[@shakingwater]

If anyone is having problem with /js/bootstrap.js"> I got it to work by following John Kane in the comment below by changing it to /js/bootstrap.min.js">.

[@warrenmjerzyszek]

PIPE!

[@deividasdevd]

Why you cant just teach us how to create good website, by explaining all the things, than just copy pasting codes..

[@BoogieMashina]

The linking of the bootstrap.min.css dosen't seem to work for me.Can somebody please help

[@aygrius]

same for me, the menu dosen't work.

[@ronizshakya]

where do we get the html for coping it to the index.php file??

[@Deevie313]

i cant open the link for the html