- Get link
- Other Apps
With so many devices with different resolutions, screen sizes and operating systems, responsive websites and applications have become an essential requirement for the brand's online presence.
More than 52% of all web traffic comes from mobile devices and the number is increasing. Web developers, marketers, and designers understand the enormous potential if a website is responsive and can be easily viewed, navigated, and viewed easily on any device regardless of resolution and aspect ratio.
Responsive Theme is an approach to web designing in which the elements of a website are self-adjusting according to screen size and browsers for better readability, user-experience and load time.
In November 2013, Matt Cutts, head of Google's webspam team, released a video stating that responsive design would not negatively affect you in SERPs. In addition, Google has also published its guidelines on mobile-friendly websites that contain details about how Google treats responsive websites.
With the rise of smartphones and other similar devices, desktop and laptop usage is on a (slow) decline. This means that people are using their smartphones to do just about anything: from news to local stores, from flight inquiries to the latest movies. This growing trend presents a huge business opportunity for the online community.
WordPress and Responsive Web
WordPress is the most popular CMS that powers an important part of the Internet. It is supported by a strong community of open-source developers and designers. With the rise of responsive web design, many well-known theme developers switched to responsive design and introduced easy-to-understand frameworks such as the Redux Framework, Carrington Core and Bootstrap, which is ideal desing for creating a responsive WordPress theme from scratch.
What is bootstrap?
Bootstrap is a toolkit that simplifies the dev process for complex web Pages. It is the brainchild of the Twitter dev team and was made available to the open-source community. This framework became popular because of its lightweight structure as it is coded in LessCSS.
By adding Bootstrap to your website, you can call its classes to add pre-made elements like buttons, grids, tables, menus, etc. Similarly, you can make existing elements responsive without adding complex media queries.
WordPress and Bootstrap can help you create a responsive theme that is suitable for a wide variety of screen sizes. Let us see how a responsive theme is created using Bootstrap.
Create a WordPress Bootstrap Theme
Creating a WordPress Bootstrap Theme is actually an 8-step easy process. Good news - creating a bootstrap powered theme is easy.
Step 1: Unpack Bootstrap
First, install WordPress on your domain.
Download and unzip Bootstrap.
Once done, connect using an FTP client like Filezilla
Navigate to wp-content> theme.
Create a new folder in the Themes folder and name it Bootstem.
Upload the contents of unzipped bootstrap to this Wordpress folder.
Almost every WordPress installation has the following files:
footer.php
header.php
index.php,/p>
style.css
Now, create four empty files with the above names in the bootstem folder.
Step 2: Configuring Bootstrap
In the BootSTheme folder, open style.css and paste the following code.
/* Theme Name: MyTheme Theme URI: https://cloudways.com Description: Mytheme Built on bootstrap Version:1.1 Author: Ahsan Parwez Author URI: https://cloudways.com */
These are basically commentaries that provide details and details about the topic. I highly recommend changing these comments to reflect the details of your topic.
Step 3: Copying Code
For this tutorial, I will not be using all the CSS and JS files provided in the bootstrap package. To start the dev process, copy the code in the bootstrap.min.css file and paste it into the style.css file. At this point, the style.css file should look like this.
Note: You can get the full minimum CSS code from the Bootstrap website.
Step 4: Setting up HTML Templates
I need a basic HTML template to work. To make things easier, I will use this HTML theme. I recommend you download to continue with the tutorial.
The built-in functions in WordPress are get_header() and get_footer() which by default call files header.php and footer.php respectively.
First start by cutting the HTML code up to the container div and putting it in the header.php file. The file will look like this:
The rest of the code in the footer.php file will be:
At this point, if you upload a Bootstrap WordPress theme and activate it, you won't see anything because there is nothing in index.php.
To load the header and footer, I will use the WordPress built-in function to call these elements. For this, paste the following code in index.php:
<?php get_header(); ?> <?php get_footer(); ?>
Now the header and footer elements will load on our website, but we will get an original page which is without any kind of style.
Step 5: Setting the header and footer
In the header.fap file, I will import the bootstrap stylesheet using the WordPress function echo get_stylesheet_uri () (read more functions in the WordPress codecs). Th will import style.css to the website and you will now see a top menu bar.
You can also add style.css by adding the following code at the top of the header.php file.
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>">
But that's not all, the JavaScript features on our page still won't work, and we won't see any drop-down menus. To enable this, we are going to import our JS files directly to the file via URLler. Paste the following code before the closing body tag in file.
<title><?php wp_title(' | ',true,'right'); ></title>
WordPress is known for its customization and plugins. To tell WordPress where to put the plug-in hook, we're going to paste <?php wp_head(); ?> And <?php wp_footer(); ?> In the header. php and footer.php files. Also, to set the dynamic title of the website, we are going to use wp_title(); Work in the header between <title> tags.
The above code compares the site name to the title of the post. Will separate from '. The bullion will display the true title. If you set it to false, it will only return the value and will not display it. The 'right' defines the location of the post title for the separator to be correct.
Step 6: Displaying Featured Posts
Next, I will call the posts dynamically on the homepage (as displayed) and display them at the top (similar to the featured posts we see on many WordPress powered sites).
Write the following code in your index.php:
<?php
query_posts('posts_per_page=1');
while(have_posts()) : the_post(); ?>
<div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
</div>
<?php endwhile; wp_reset_query(); ?>
As you can see, I am using a while loop and setting the number of posts to one using post_pay_page. This line will only display the latest blog posts at the top of the page, and after the loop closes, query_posts resets.
The class jumbotron is defined in the bootstrap.min.css file. I'll use it to style the posts depicted using the <h2> tag and the_permalink(); Function. The hyperlink is created on the post title, and the_permalink(); Function link to the URL of the entire post. To show an excerpt of the post, I've used another built-in WordPress function, the_excerpt();
Step 7: Listing Your Categories
Now I will list the categories on the left side of the homepage. I will create several examples of div styled with bootstrap classes and the WordPress function wp_list_categories();
Paste the following code in Theme file index.php:
<div class="panel panel-default panel-body">
<div>
<div>
<ul>
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>
</div>
</div>
</div>
This will list the categories by name with a good hover effect.
Step 8: Display latest posts and authors
Finally, we are going to show the latest blog post on the homepage. We are going to start another div tag and under this div, we will use the same as the loop technique, which we have used in the featured post, but we are not going to limit it with query_posts();
<div> <?php while(have_posts()) : the_post(); ?> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <p><?php the_excerpt(); ?></p> <p> posted by <?php the_author(); ?> <?php endwhile; wp_reset_query(); ?> </div>
WordPress function the_author(); And get the username of the post's author. We can use this to dynamically display the author's name with every post.
Once you complete everything successfully, you will have a page like you see in the image shown above.
Adding Bootstrap to an existing WordPress theme
If you are using a WordPress theme that is not responsive, you can add Bootstrap to make it mobile friendly. You can use WordPress and Bootstrap in two different ways.
Adding bootstrap using CDN
You can use bootstrap elements only by adding a CDN to your header.php file.
Note: This method can cause compatibility issues, so, be sure to take a full backup before adding the following code.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
You header using FTP or by using a plugin. Can access php file. The above code contains minor versions of CSS and JS files that provide better performance.
Adding bootstrap inside functions
In this method, you need to download the bootstrap library. Upload the Bootstrap.min.css file and the Bootstrap-theme.min.css file in your Theme CSS folder and upload the Bootstrap.js file to the theme folder named "js" of your WordPress theme.
Now, access your functions.php file to understand these scripts.
Add the following code inside your functions.php file.
function reg_scripts() {
wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');
You can also skip the uploading part and attach the bootstrap CDN directly like this.
function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, NULL, 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );
Save the file and upload it back to the server.
Comments
Post a Comment