DevDmBootstrap3

Twitter Bootstrap 3 WordPress Starter Theme for Developers

Listed below are the themes files and their intended usage.

404.php – The template for a returned 404.

comments.php – The comments template for pages and posts.

footer.php – Pulls in template-part-footernav.php, the author credits theme option, wp_footer(), and the tracking code theme option.

functions.php – Contains all the template functions. Mostly just standard stuff for declaring menus, sidebars, and enqueuing scripts/css.

header.php – Start of html tags for the entire site. This file includes the wp_head() function and ends with the <body> tag.

index.php – This file contains the code for the main post loops. It detects a single post and the blog list of posts displaying appropriately that which is being called by the user.

page.php – A much slimmer version of the index.php used for displaying a single page.

rtl.css – Right to left language CSS. This was lifted from the 2012 Theme (I think) this is on the list to refine and trim.

shortcodes.php – Contains the available shortcodes to aide in implementing Bootstrap Native features. See the Shortcodes page for more information.

sidebar-left.php – The left sidebar. It detects the theme option to display and then calls the dynamic_sidebar function with the name ‘ Left Sidebar .’

sidebar-right.php – The right sidebar. It detects the theme option to display and then calls the dynamic_sidebar function with the name ‘ Right Sidebar .’

style.css – Theme information and @import “css/bootstrap.css” for all CSS styles. There are no styles here except the blank styles I’ve attached to elements for Child Themeing.

template-part-footernav.php – The footer bootstrap menu. Duplicate this in your child theme or edit directly to change the Menu Attributes. By default it is “sticky” at the bottom like you see on this page.

template-part-head.php – Starts the main container div and contains the logo, blog name, and header text code.

template-part-postmeta.php – Contains all the meta data that is displayed on posts: Author, Date, Category, Tags, and will also display the edit link for logged in admins.

template-part-topnav.php – Contains the top main menu code. Again, duplicate this file for your child theme or edit this one to change to a different Bootstrap style menu.

theme-options.php – Contains all the functions for the theme options page, custom background theme support, and header theme support. This should not be edited if you don’t have an in depth understanding of how these functions work. You could break something and you might end up buying me dinner to fix it.

Directories

css/ 

– admin.css (Misc Admin styles for the different theme options areas)

– bootstrap.css (The compiled version of “less/bootstrap.less” it is not minified so it can be read)

– editor-style.css (Just a place holder for editor styles. I figured this wasn’t something a developer would want tampered with.)

fonts/

– glyphicons-halflings-regular.eot(.svg,.ttf,woff)

Bootstrap3 has changed the way icons are used. These are the required files to use the glyphicon library across all browsers.

img/

Contains some simple DevDm related branding images.

js/

– bootstrap.js (This file is the only auto enqueued JS script and can be overwritten with the child theme. We are letting WordPress pull in jquery to keep things clean)

– bootstrap.min.js (unused but there in case you want it)

languages/

Contains en_US.mo and en_US.po files for you to use as templates for translation.

less/

All the bootstrap LESS files from the Bootstrap repository with some customized specific includes for WordPress. See the LESS page for information about using them.

lib/

– bootstrap-custom-menu-widget.php (see the widget page for more information)

– wp_bootstrap_navwalker.php (our ever so popular navwalker for WordPress Bootstrap based Menus)

 

 

17 Comments

  • Sanjin says:

    Where can we find the language files (po and mo) for translation?

    Thanks in advance

    • danny says:

      Sanjin I’m working on this. It is my own education about how to correctly implement them that is the hold up. I also didn’t quite understand the value before but I certainly do now.

      It is on my list of ToDos.

      • Sanjin says:

        Hello Danny. I see. No problem. I have a client for whom I need another language. I’ll wait while you do that. In the meantime, I’ll translate the words in the source. I hope that this is possible.

        Thanks again

        • danny says:

          Hey Sanjin,

          I’m not sure if you are still following this but I wanted to let you know the translation stuff is in now.

  • Krabbe says:

    Hey Danny. Thanks for this great theme. I will give it a try on my next project.
    One question concerning the logo. How can I upload or use a different logo. I don’t find a way to change it in the settings. I can only disable the logo. If I change the deafaultlogo.png in the img-folder, I still have the dimensions in the code, which doesn’t fit in my case.
    Do I have to change it manually in template file?

    • danny says:

      Hello Krabbe,

      Glad you like it.

      The logo image is managed with WordPress’s built in customization options. So from your dashboard you will go to: Appearance -> Header and from there you can manage your logo images.

  • Connor says:

    Hi I am new to less and get how it works but I just having a problem compiling it. I have the correct application its just which file to I edit to create my own theme and where to I set the output css to. Is it automatically put into the head?

    • danny says:

      Hey Connor,

      Inside the child themes css directory is the bootstrap.css. This is where I assumed the compiled LESS would spit out too. “Bootstrap.css” is the file that is automatically included in the child theme’s stylesheet. You can actually use ANY css file you want just do the @import in the child themes stylesheet as I have done with with the bootstrap.css.

  • thanh says:

    Thanks Danny,
    How to make full width footer?

    • danny says:

      Hey Thanh,

      To make a full width footer you will duplicate the “footer.php” file in your child theme and move the “end main container” closing div to the top of the file. This will close off the main container and open up your footer area to be full width. You can then give the dmbs-footer div an extra class of “row” or “container-fluid” or assign your own css to make it full width.

  • Hi Danny, great theme!
    But I would like to know how I could add for instance an link around the featured image of an post?
    For some reason it’s not outputting the link?

    regards!

    • danny says:

      Glad you are liking it MrBlackDrag0nfly!

      You are right! There is no link. So the best way to go about customizing this for yourself is to duplicate the “index.php” file into your child theme or create one of the other files from the template hierarchy, single.php for example.

      If you look at this screen shot I’ve outline the parts of the code inside index.php that deal with “the_post_thumbnail.”

      http://devdm.com/DevDmBootstrap3/wp-content/uploads/ss-postthumbs.jpg

      At a minimum you could wrap the < ?php the_post_thumbnail(); ?> function inside the same a href=”< ?php the_permalink(); ? rel="nofollow">” that the post title is using. This would link the image to the post.

  • David says:

    If I’m using your child theme do I need to duplicate any template files from the parent theme (for example, “page.php”)? Or would I edit the template files in the parent theme?

Leave a Reply

Your email address will not be published. Required fields are marked *