- US: +1 347 223 5853 UK: +44 20 8 1234 790
- support@getahost.net
Even with the huge choice of plugins and different themes we have it is always pleasant to build our own theme in code that is easy to understand. Nothing as simple as installing a plugin, but what the day the author keeps his hands off it definitely and it stopped being updated?
Let’s make a simple theme called “My Real Estate”, just to demonstrate how we make custom post types and an advanced search. In the themes directory of your WordPress installation add directory “MyRealEstate” or any what name you prefer. If you haven’t a selfhosted WordPress website yet, go here to get free webspace and a free one-click WordPress installation. Just fill in the form for free hosting, there is nothng to pay unless you buy a domain.
Go to getbootstrap.com, click on the “download bootstrap” button and choose always to keep it simple the first download of the three: Bootstrap, Source code and Sass.
This Bootstrap download only includes the “bootstrap-3.3.6-dist” directory you can upload immediately in your “MyRealEstate” directory”. The “dist” directory has three subdirectories: “CSS” for .css files, “JS” for javascripts and “FONTS” for the fonts. As you see these directories are already filled and they just need to be linked to the header of the WordPress site you will now start to build. Under the header “Precompiled Bootstrap” when you scroll down you find a tree with all the files included.
Change “bootstrap-3.3.6-dist” in “dist”.
Find under “Basic template” the code for a webpage in Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Copy and paste this code into a file in the root directory of “My Real Estate” and name it “index.php”. You still have to adapt the urls for the css and the javascript:
<link href="<?php bloginfo('url');?>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="<?php bloginfo('url');?>/dist/js/bootstrap.min.js"></script>
Also add a file “style.css” in your root directory containing:
/*
Theme Name: My Real Estate (English)
Theme URI:
Description: 2 columns Bootstrap
Version: 1.0
Author: Your Name
Author URI: Your URL
*/
@charset "UTF-8";The URL of your new site will always show the default theme. To change it to “MyRealEstate” log in and go to “themes”. If you have a multisite you first have to enable this new theme in the dashboard of the network after which you can switch to it in the dashboard of your site.
activate theme
In first instance, you will only get a white page on which in big letters “Hello World” as below:
hello world
Scroll a little more down on “Getbootstrap – get started” or go immediately to the examples section and download the Bootstrap repository. This pack contains the files to install any what basic template you see below it.
Find in this download “examples” under “docs”. Of course, you do what you want but I thought that “jumbotron” is just convenient for the purpose. Change “index.html” in “index.php” and change it for the existing “index.php”. I put “jumbotron.css” (or the .css file in the example of your choice) in the dist > CSS subdirectory.
Add next to “style.css”:
/* Import Bootstrap core CSS */
@import url("dist/css/bootstrap.min.css");
@import url("dist/css/jumbotron.css");And replace
<!-- Bootstrap core CSS -->
<link href="<?php bloginfo('url');?>/dist/css/bootstrap.min.css" rel="stylesheet">in the header of “index.php” by
<!-- link to stylesheet -->
<link href="<?php bloginfo('template_url'); ?>/style.css" rel="stylesheet">You may now delete the line
<link href="jumbotron.css" rel="stylesheet">in “index.php” as we put “navbar.css” in dist > css and linked to it from in style.css.
This is what we get if you did the same as described above:
jumbotron
Under the jumbotron you see three section that we will use for demo real estate items.
In the upper bar right you see an inlog form that can be used to lead to the member site where the user can add houses of apartments to follow.
Other posts by admin