Skip to main content

Creating your own theme in Wordpress using Twitter Bootstrap - Part I


 Recently I came across twitter bootstrap(@twbootstrap) a front-end toolkit to develop web applications.  Since Eejot's website needed a facelift, I decided to use wordpress and create my own customized theme using bootstrap. 

Here are the steps that I followed:
 1. Install WordPress. Here are the instructions to do it  (wordpress installation guide).
 2. Download Bootstrap and extract it (bootstrap).
 3. Navigate to the wp-content > themes folder.
 4. Create a new folder named "eejot_ver1" and paste the bootstrap folder.
 5. Once we have done these, we need to create certain files to convert bootstrap files to WordPress template and WordPress file name requirement. We start by creating these files in the same folder we pasted the bootstrap folder in. 

index.php
header.php
footer.php
style.css

Folder Structure
6. For this website we are going to use the carousel template. The html code can be found under bootstrap->docs->examples->carousel.html. Copy the code from this file and paste it into index.php
 
7. We also need an image file with dimensions 300x225 px named "screenshot.png" which will be displayed in the admin area for our theme. We then log onto the admin area and navigate to Appearance -> Theme. Besides other themes we see "eejot_ver1" listed as one of the themes. 

 8. Click "Activate" under this theme to set it as the current theme for the website. 

 At the top of the WordPress admin bar click on localhost->visit site. This will bring up our website. We can see that CSS and JavaScript is not working on our site. We will go through the process of fixing this and changing it into a complete WordPress theme in the next post.



Labels:

Comments

Post a Comment

Popular posts from this blog

Geospatial queries in MongoDB - Part 2 : {"err": "location object expected, location array not in correct format" "code": 16804}

In my last post we saw we had to create a geospatial index on the " pos " field as follows: > db.foodtrucks.ensureIndex({pos:"2d"}) However, when executing the command above we get the following error:   > db.foodtrucks.ensureIndex({pos:"2d"}) {     "createdCollectionAutomatically" : false,     "numIndexesBefore" : 3,     "ok" : 0,     "errmsg" : "location object expected, location array not in correct format",     "code" : 16804 } After some further investigation I realized that we had some documents which didn't had any latitude/longitude information. Due to this some of the documents looked like this: {     "_id" : ObjectId("53d07bf1e3e11dacc21056a8") ,     "locationid" : 437222 ,     "Applicant" : "Natan's Catering" ,     "FacilityType" : "Truck" ,     "cnn" : 188101 ,     "Locatio...
Post a Comment
Read more

Commits not showing up on the contribution page in Github

I recently ran into an issue where my commits were not showing up on my github account. Initially I thought it had something to do with settings on my new machine as I started having this issue after I switched machines. However, the public activity page was listing all my contributions just fine which led me believe something else was wrong. After spending some time trying to debug this, I contacted github. They told me I was using an email address 'robin@Robins-MacBook-Air.local' in my .gitconfig which was the system login. Due to this, changes were not being attributed to my account. To change this I ran the following command: git config --global user.email <my_email_on_github_account> The email needs to match an email address in your GitHub account in order for the commits to be properly attributed to you. However, I also wanted my previous commits to be attributed to me. For that I had to add 'robin@Robins-MacBook-Air. local' to my GitHub account here...
Post a Comment
Read more

Running Docker on Linux Mint

Docker doesn't come natively installed on Linux Mint. To be able to run it you will need apparmor and cgroup-lite packages. Follow the steps below to get it working: Add repository to APT sources sudo echo deb https://get.docker.com/ubuntu docker main > /etc/apt/sources.list.d/docker.list Import repository keys sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 36A1D7869245C8950F966E92D8576A8BA88D21E9 Install Docker  sudo apt-get update sudo apt-get install -y docker.io cgroup-lite apparmor  Check if Docker daemon is running  ps aux | grep docker If docker daemon is not running, try the following command: sudo service docker start Check if docker.sock exists. This file needs to be owned by docker group to be able to connect to it without root permissions   ls -al /var/run/docker.* Check if user is part of docker group   id -a If user is not in the docker group you can add them using this command:  s...
Post a Comment
Read more