{"id":1411,"date":"2016-03-17T10:34:02","date_gmt":"2016-03-17T15:34:02","guid":{"rendered":"http:\/\/www.kuulstuff.com\/blog\/?p=1411"},"modified":"2016-03-17T11:23:47","modified_gmt":"2016-03-17T16:23:47","slug":"integrate-a-wordpress-blog-to-your-bootstrap-website","status":"publish","type":"post","link":"http:\/\/kuulstuff.com\/blog\/integrate-a-wordpress-blog-to-your-bootstrap-website\/","title":{"rendered":"Integrate a WordPress Blog to Your Bootstrap Website"},"content":{"rendered":"<p>So, you built a great website in bootstrap. Your site is live and great, works fine in all devices and browsers, everything is perfect. Now, your customer wants to add a blog to your website. WordPress has great themes for blogs but none of them are going to look like your custom website. Here is how you can integrate the WordPress blog into your website and make the blog look same as the rest of your website. You can create your own WordPress theme!<\/p>\n<p><strong>WordPress Blog<\/strong><\/p>\n<p>WordPress blog is great as it is perfect for content management, backend, and frontend. You can add multiple users, media, plugins, comments, and so on. Backups and versioning is great with WordPress blogs. Corporates have been building full fledged websites using WordPress Divi themes. Inorder to integrate a WordPress blog to your HTML site built using bootstrap, you can follow certain steps and achieve same functionality.<\/p>\n<p><strong>Settings in the cpanel<\/strong><\/p>\n<ol>\n<li>First install WordPress in your root folder and give the folder name blog.<\/li>\n<li>Download bootstrap and save in the wp-content-themes folder.<\/li>\n<li>Save additional css such as font-awesome and other css you used in your Bootstrap website in the same folder as bootstrap css<\/li>\n<li>Create new index.php, home.php, header.php, footer.php, sidebar.php, functions.php, page.php, single.php, style.css. Each of the files have their significance in creating your theme in WordPress.\n<ul>\n<li><strong>index.php: <\/strong>Loads your blog<\/li>\n<li><strong>home.php: <\/strong>Loads the blog posts from the database<\/li>\n<li><strong>header.php: <\/strong>Loads the header in every post when\u00a0the get_header() function\u00a0is called<\/li>\n<li><strong>footer.php: <\/strong>Loads the footer in every post when\u00a0the get_footer() function\u00a0is called<\/li>\n<li><strong>sidebar.php: <\/strong>Loads the sidebar contents when\u00a0the get_sidebar() function\u00a0is called<\/li>\n<li><strong>functions.php: <\/strong>Needed to load the jQuery in wordpress package to this website and also the sidebar contents<\/li>\n<li><strong>page.php: <\/strong>Loads the page you create and can act as a template for every page in your WordPress blog or Website<\/li>\n<li><strong>single.php: <\/strong>Loads the individual post which the user clicks in a page with comments function<\/li>\n<li><strong>style.css:<\/strong> Loads the styles for this blog<\/li>\n<\/ul>\n<\/li>\n<li>Edit header.php and copy paste the content including the navbar\u00a0from your existing website template.\u00a0Edit the css href to php function\u00a0bloginfo. Load the stylesheet_url using the function. Add wp_head and wp_enqueue_script to load jquery in this page. Save header.php. In the navbar list, add wp_list_pages function to get the additional blog page you created in the WordPress admin login. This way, your WordPress blog will be at the end of the menu items in your website. After the blog is setup, go ahead and edit all the pages of your website and add menu item blog to link it to the blog page.<\/li>\n<li>Edit footer.php and copy paste the footer section of your website template. Remove all the javascript functions at the end and add wp_footer() function. Save footer.php.<\/li>\n<li>Edit sidebar.php and add the function dynamic sidebar to get the sidebar content on all pages and make the sidebars widget friendly. It will load the sidebar contents if there are any existing. Save sidebar.php<\/li>\n<li>Edit index.php and load the get_header() function first. Next, in a loop check the posts and load the posts and the title and content using the the_title and the_content functions. If there are no posts display a message, saying there are no posts. At the ends, load the get_footer() function.Save index.php<\/li>\n<li>Edit page.php. Load the header and footer contents. Divide the page into two columns and load the posts in the left column and the sidebar in the right column. Save page.php<\/li>\n<li>Edit functions.php. Add function to register the scripts such as\u00a0bootstrap.min.js and script.js in the page. Then enqueue the scripts of your page. Add another function to register the sidebar contents and the before_widget, after_widget, before_title, and after_title style of the sidebar contents. Save functions.php. You can override the default jQuery that comes with the WordPress install with a latest version in the functions.php.<\/li>\n<li>Edit home.php and load the header, footer and sidebar. In a if condition, check if there are any existing posts. For every post, get the post title, links, content, and date, using respective functions. If there are no posts, display a message. Save home.php. WordPress uses home.php to load the blog posts. Save home.php<\/li>\n<li>Edit single.php and\u00a0and load the header, footer and sidebar. Get the contents of the post and get comments section. This page will be loaded if a single post is clicked. Save single.php<\/li>\n<li>Edit style.css and import the bootstrap, font-awesome, and other css used in your website. Edit the navbar and footer styles to load exactly the same way as the rest of your website. WordPress uses style.css to load the style for your blog. Save style.css.<\/li>\n<li>If you have multiplepages in your blog, you can have a front-page.php and load the header, footer, and sidebar there.<\/li>\n<\/ol>\n<p><strong>Settings in the WordPress login<\/strong><\/p>\n<p>Login to your website and blog using the WordPress credentials. Delete the existing page and create a new page called Blog. In the Settings, go to Readings and set the page to load the latest posts. In the appearance settings select the new them you have created. Go to Live Preview and test the site if it is loading properly. Make your current theme as the default theme for your WordPress and start writing blogs. Voila! you are almost done.<\/p>\n<p>Keep checking for the WordPress updates and backups. Test it in all devices and browsers for responsiveness. Maintain your site and the WordPress blog at the same time with minimal distraction to the user. Add some ads to your blog to make some dollars!! \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So, you built a great website in bootstrap. Your site is live and great, works fine in all devices and browsers, everything is perfect. Now, your customer wants to add<a href=\"http:\/\/kuulstuff.com\/blog\/integrate-a-wordpress-blog-to-your-bootstrap-website\/\" class=\"more-link\">Read More <span class=\"screen-reader-text\">Integrate a WordPress Blog to Your Bootstrap Website<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21,61],"tags":[112,1154,1043,1161,1057,1158,1153,1152,1155,1159,1032,115,1151,1160,1150,1156,1044,1127,1149,1157],"class_list":["post-1411","post","type-post","status-publish","format-standard","hentry","category-daytoday","category-technology","tag-blog","tag-blog_info","tag-bootstrap","tag-content-management-system","tag-css","tag-functions-php","tag-get_footer","tag-get_header","tag-get_sidebar","tag-home-php","tag-html","tag-javascript","tag-mysql","tag-page-php","tag-php","tag-reading-settings","tag-twitter","tag-website","tag-wordpress-blog","tag-wordpress-themes"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p4AvRz-mL","jetpack-related-posts":[{"id":1281,"url":"http:\/\/kuulstuff.com\/blog\/forget-everything-just-learn-angularjs\/","url_meta":{"origin":1411,"position":0},"title":"Forget Everything: Just Learn AngularJS!","author":"KP","date":"October 10, 2015","format":false,"excerpt":"Angular or Angular JS is the next most powerful Javascript framework out there which is becoming increasingly popular among the tech world. Angular JS along with CSS frameworks such as Bootstrap coupled with the REST services is redefining Website development.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1287,"url":"http:\/\/kuulstuff.com\/blog\/angularjs-how-to-begin\/","url_meta":{"origin":1411,"position":1},"title":"AngularJS: How to Begin","author":"KP","date":"October 10, 2015","format":false,"excerpt":"AngularJS is the Javascript framework for website development. It is widely popular for the features including modularity and separation of concerns. Here are some of the keywords you must be familiar with in order to build web applications with AngularJS.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1311,"url":"http:\/\/kuulstuff.com\/blog\/angularjs-directives\/","url_meta":{"origin":1411,"position":2},"title":"AngularJS Directives","author":"KP","date":"October 18, 2015","format":false,"excerpt":"AngularJS directives are a cool way of defining behavior and using it any way you want. You can have a directive with your name and have it do any kind of work you want depending on the situation. AngularJS directives control your DOM behavior.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1715,"url":"http:\/\/kuulstuff.com\/blog\/amazon-polly\/","url_meta":{"origin":1411,"position":3},"title":"Amazon Polly","author":"admin","date":"October 20, 2021","format":false,"excerpt":"Add Amazon Polly to Your WordPress Website using AWS Management Console and quick setup options. Login to your AWS Management Console. Configure a new IAM role with AWSforWordPressPluginPolicy and attach it to your new EC2 instance. Login to your blog admin and download AWS for WordPress Plugin. Configure AWS Polly\u2026","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/kuulstuff.com\/blog\/wp-content\/uploads\/2021\/10\/image.png?fit=1024%2C768&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/kuulstuff.com\/blog\/wp-content\/uploads\/2021\/10\/image.png?fit=1024%2C768&resize=350%2C200 1x, https:\/\/i0.wp.com\/kuulstuff.com\/blog\/wp-content\/uploads\/2021\/10\/image.png?fit=1024%2C768&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/kuulstuff.com\/blog\/wp-content\/uploads\/2021\/10\/image.png?fit=1024%2C768&resize=700%2C400 2x"},"classes":[]},{"id":1467,"url":"http:\/\/kuulstuff.com\/blog\/contact-forms-comparison\/","url_meta":{"origin":1411,"position":4},"title":"Contact Forms Comparison","author":"admin","date":"July 15, 2016","format":false,"excerpt":"Contact form is an integral part of any website. It provides a medium for the customer to connect directly with the users. Traditional html forms always work but Wufoo, Google Forms, WordPress Contact Form, and so on are the latest contact forms taking over the website world. They are equipped\u2026","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1472,"url":"http:\/\/kuulstuff.com\/blog\/why-do-small-businesses-need-a-website\/","url_meta":{"origin":1411,"position":5},"title":"Why do Small Businesses Need a Website?","author":"admin","date":"October 11, 2016","format":false,"excerpt":"Yes, small businesses do need a website to promote their business. Many argue that the Facebook page they have will suffice to give out the basic information. But, that information may not always enough to convince your customers to choose your business. A complete website is required to improve the\u2026","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/comments?post=1411"}],"version-history":[{"count":3,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1411\/revisions"}],"predecessor-version":[{"id":1415,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1411\/revisions\/1415"}],"wp:attachment":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/media?parent=1411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/categories?post=1411"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/tags?post=1411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}