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

Installing Google styleguide in Intellij on Mac

Download the   intellij-java-google-style.xml  file from repo:   http://code.google.com/p/google-styleguide/ . Download it and go into  Preferences -> Editor -> Code Style .  Click on  Manage  and import the downloaded Style Setting file.  Select  GoogleStyle  as new coding style.      Additional Java Style Guides:       https://google.github.io/styleguide/javaguide.html       https://github.com/twitter/commons/blob/master/src/java/com/twitter/common/styleguide.md
Post a Comment
Read more

Remove and ignore files like .DS_Store, .classpath so that it doesn't get added to your github repo

When promoting code on github it is usually a good idea not to promote files like .DS_Store. .classpath etc. To accomplish this you can include a .gitignore file in your first commit . Git uses it to determine which files and directories to ignore, before you make a commit. Here is what my .gitignore looks like: /.buildpath /build/ */archive/ # Compiled source # ################### *.com *.class *.dll *.exe *.o *.so   .project .settings .classpath # Packages # ############ # it's better to unpack these files and commit the raw source # git has its own built in compression methods *.7z *.dmg *.gz *.iso *.jar *.rar *.tar *.zip # Logs and databases # ###################### *.log *.sql *.sqlite # OS generated files # ###################### .DS_Store .DS_Store? ._* .Spotlight-V100 .Trashes ehthumbs.db Thumbs.db Icon?     Alternatively, you can create a global .gitignor...
Post a Comment
Read more