The last two lines tell WordPress to actually include the scripts on the page (whereas before they were only “registered”, but not loaded). The second line is almost the same as the first, except it’s loading the Bootstrap CSS file and telling WordPress that this stylesheet should be used for ‘all’ media types (print, screen, etc.). The last three parameters tell WordPress that this script depends on the jquery javascript library, that the version of the script that we’re loading is version 3.0.1 (which helps it with caching), and that the script should be added in the footer of the page, which helps to speed up the page loading in a browser. It also tells WordPress where to look for the script file (in this case, in the theme folder, and then inside the bootstrap folder’s “js” folder, there is a file called “”. This first line tells WordPress to register a new script, which we are going to call “bootstrap-js”. Your functions.php should look something like this: Wp_register_style( 'bootstrap-css', get_template_directory_uri(). So around line 83, add the following: wp_register_script( 'bootstrap-js', get_template_directory_uri(). We are going to add a few more lines of code below these to include Bootstrap’s CSS and Javascript files. Scroll down to around line 77, where there should be a line something like this (except where your theme name appears instead of “my_bootstrap_theme”):īelow this line are a few function calls to include the default CSS and Javascript files that come with the _s template. To do this, open the “functions.php” file in your favorite text editor. Next we need to modify your theme’s “functions.php” file to get WordPress to load the Bootstrap files when someone views your site. Move the _s generated folder to your WordPress themes folder and optionally rename it “bootstrap” Move the “dist” folder into your new theme’s folder, and optionally, rename the folder something like “bootstrap” to make it easier to remember what’s in it. There are several ways to do this, but the easiest is to download the ready-to-use Bootstrap package from .Īfter you unzip the package, you should have a folder called “dist”. The next step is to add Bootstrap to your new blank WordPress theme. ![]() If you visit your site now, it should look totally barren, but this will soon change. In the WordPress Dashboard, select your theme in Appearance > Themes. The last thing you will do is make sure that your test site is loading your new theme correctly. All you have to do to use _s is enter a theme name on the website, click “Generate,” and then unzip the downloaded archive to your WordPress wp-content/themes directory. ![]() If you have an existing theme, you can try using that as your base, but I recommend _s (pronounced “underscores”), which is made by the people behind. The second thing you need is a blank WordPress theme to work with. This means that setting up WordPress is as simple as running an installation script in your browser. AMPPS is a free application that lets you run a local webserver with PHP, Apache, and MySQL, sort of like MAMP/XAMPP/WAMP, but with the added functionality of Softaculous built in. My only suggestion is that you check out AMPPS, made by the people who created Softaculous. There are lots of guides on the web that show you how to run a local installation of WordPress to develop your website and themes. The first thing you need is a working instance of WordPress that you can freely play around on without breaking a live website. In this lesson, we will take the first step toward incorporating Bootstrap into WordPress. ![]() In the previous lesson we started to get a feel for what Bootstrap looks like in a web browser and began to think about using Bootstrap code snippets to lay out a website. This post is the second in a series of lessons on using the Bootstrap web framework to develop a WordPress theme.
0 Comments
Leave a Reply. |