Simple & responsive WordPress theme that uses Bootstrap modals as it's main component.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
inc
languages
.gitattributes
.gitignore
404.php
README.md
footer.php
functions.php
header.php
index.php
screenshot.png
single.php
style.css

README.md

CreativeBox

Simple & responsive WordPress theme that uses Bootstrap modals as it's main component.

Creative Box is my first WordPress theme. It uses simple box-grid to display 4 posts per page with featured images as tile backgrounds, estimated reading time and custom transition & one-sentence excerpt on hover. Creative Box uses responsive Bootstrap modal feature to display content of each post without the need to actually load the post single page. It’s a great theme for small personal blogs.

It's based on a 4-box grid designed by codrops which you can check out here. If there are less then 4 posts on page CSS takes care of that using Lea Verou's technique of selecting element siblings.

After theme's been activated users is prompted to install Ajaxed Comments and Estimated Reading Time plugin which are neccessary for the theme to work properly. They come packaged with the theme itself so there's no need to download them separately.

Suggested use of W3 Total Cache or other caching plugins for better performance.

Note: Be sure to set maximum amount of posts to show in Settings->Reading to 4.

Demo

http://creativebox.matijaculjak.com

Creative Box 1.2

Minified the CSS & JS files. Removed most of unused Bootstrap & Font Awesome styles. If you want to use them replace bootstrap.css with the fresh copy. Created a backup of bootstrap.js in case that script stops working after minification.

Adjusted viewport settings & added additional media queries for mobile devices.

Creative Box 1.1

*Added support for mobile & tablet detection using mobiledetect PHP script. Links on homepage now load single pages of respective posts on mobile, while on desktop posts load in Bootstrap modal.

*Bootstrap modal now loads via <div> element instead of <button> thus reducing syntax errors.

Known issues

*Ajax calls to modal windows with hashes at the end of links could be added to aviod using single post pages to view the posts via links on social media or any other external sites. Something like Remodal. Feel free to tinker around with it.

*Right now posts load automatically when the page loads but are hidden as long as you don't activate the modal. To speed things up and reduce the overall code Ajax could be implemented to load posts only on click - when the modal loads.