background preloader

How to Build a Responsive WordPress Theme with Bootstrap

How to Build a Responsive WordPress Theme with Bootstrap
In this tutorial, we will learn how to make our own responsive WordPress theme using Bootstrap. Bootstrap is a responsive framework for building web sites and applications, and it’s a great starting point for building a responsive WordPress theme. Check out Zac’s other WordPress courses and enjoy a free, two-week trial of Treehouse. You don’t have to have built a theme from scratch before to successfully follow along. However, we do assume that you are comfortable doing things like adding and editing posts in the admin area or installing plugins. The theme we will build is based on the Basic marketing site example you can find over on the Bootstrap examples page. Custom homepage designAbout pageContact pageNews section with commentsA widgetized sidebar Getting Started Before we get started there are a few things you will need to do: Install WordPressDownload and Unzip BootstrapInstall the Theme Test Drive plugin* Once you navigate to that folder create a new folder called “wpbootstrap.” <? <!

Fuel UX Example Below is a working radio example. Using radio Call the radio via javascript (optional): $('#myRadio').radio() If you need to deactivate a radio button, the only way to do this currently is through javascript using: //note that this will deselect ALL radio buttons on the page. Methods Fuel UX's radio exposes the following methods: Markup You can activate radio on your page easily without having to write a single line of javascript. <label class="radio radio-custom"><input type="radio"><i class="radio"></i>Item One</label> Additionally, you can add a highlight effect to the radio control by adding the class highlight to its label element.

Full Page/ Full width Background Slider A great plugin that allows you to add full page background slider to your website with a lots of custom features. - Adds full page slider to use to your website. - You can add up to 6 images to the slider. - You can add single full page background image to your site. - You can add different slider to different pages of the website. - Easily manageable back-end. - Comes with 6 Great Backgrounds ready to use - Last but not the least its FREE Read more instructions about how to use here Features Adds full page slider to use to your website.You can add up to 6 images to the slider.You can add single full page background image to your site.You can add different slider to different pages of the website.Easily manageable back-end.Comes with 6 Great Backgrounds ready to useLast but not the least its FREE

WordPress WYSIWYG Editor Customization I don’t know how many WordPress bloggers use only the Text tab in the editor, but I’m pretty sure that couple more buttons will definitely save their time, since there will be no need to add tags and styles manually. My habit of watching the code through the tab text appeared quite a long time ago, when TinyMCE was constantly adding extra < br > tags, and I really hated that. That’s why the tab Visual is something that I’m not using at all. Today was one of those fine days when I realised that I need to automate my routine work a bit, that’s why I decided to add couple more buttons with tags that I’m using most oftem, and to share this knowledge with you. Every blog has it’s own styles for formatting the text, so you can customize WordPress editor for your own needs. In this blog post you will find a good piece of advice concerning customization of a WordPress editor. What will you get from thids function? If you want to create your own button you need to take this line of code: WP Editor

Ctrl Alt Geek » Tuto vidéo #1 : Découverte du bootstrap de twitter! J’inaugure aujourd’hui le premier tutoriel vidéo du site réalisé par mes soins. Il n’est pas encore dit que je fasse une série de tutoriels (même sur le #1 semble indiquer l’inverse ), mais c’est une facette que je n’ai jusqu’alors jamais testée. Il était donc temps pour moi de m’essayer à cette pratique pour vous faire découvrir aujourd’hui le bootstrap Twitter! Je me suis donc équipé de quelques logiciels (j’y reviendrai dans un prochain article) pour réaliser ce premier tutoriel vidéo, premier d’une longue série je l’espère! Késako? Le bootstrap Twitter, qu’est-ce? Il ne restera plus ensuite qu’à intégrer le design de votre site pour avoir un résultat très satisfaisant et propre! Ce kit permet également de réaliser facilement et rapidement un template correct et propre de votre site répondant même si vous le souhaitez à l’effet de mode « Responsive webdesign » (j’y reviendrai dans un prochain article). Présentation et découverte du bootstrap Twitter en vidéo!

Site Creator Ultimate This is an all around plugin that allows you lots of control on how your front page, posts, pages and website looks. It can enhance the look of your front page or make a website look like a professional magazine or news website. Usage By posting a short code on a page you can display a layout. Example front page Example blog page Example uses Create a great news, magazine or business looking front pageEnhance the look of your website or blogCreate widgets such as top posts or latest posts etcCreate complex sub pages Features Effects Image changes to another image when hover over with mouseImage changes to another image automatically (simple slideshow)Image fades when hoverBackground color effect marks the post you are hovering overPut text over imagePut text in a pop up Introduction This plugin works by using layouts. [sitecreator show="1"] Up to 20 layouts that can be used but sometimes you only need one. Example: How do I create a widget?

Adding a 'mega menu' to my site without a plugin Create Clean Webpages with Twitter Bootstrap Introduction Do you need to a lay out a webpage in a clean and straightforward way? Do you find yourself Googling how to deal with tabs, menus, popups, forms and other UI elements? Do you find other layouts and samples and end up ripping out the basics to get started? Bootstrap is a very good framework to get a page up and running quickly - and provides plenty of advanced features. In this article, I'm going to show you how to get started with Bootstrap, and why you should bother. What're We Going To Use? We're going to be dealing with very basic code and only a few files - however, for the screenshots and example project I'll use Visual Studio 2012. Creating the Project Let's create an empty web project: We should have something pretty clean and lean, like so: Now head to Twitter Bootstrap's site and download the package: The bootstrap download contains three folders - css, img and js. <! This is the basic project structure. Setting up Bootstrap First, we need to include jQuery. <! <! <body><! <!

Duplicator With over 25 million downloads Duplicator successfully gives WordPress users the ability to migrate, copy, move or clone a site from one location to another and also serves as a simple backup utility. Duplicator handles serialized and base64 serialized replacements. Standard WordPress migration and WordPress backups are easily handled by this plugin as are zero downtime migrations. For complete details visit snapcreek.com. Quick Video Demo Overview Duplicator is the most powerful migrator available. Move, migrate or clone a WordPress site between domains or hosts with zero downtimePull down a live site to localhost for developmentTransfer a WordPress site from one host to anotherManually backup a WordPress site or parts of a siteDuplicate a live site to a staging area or vice versaBundle up an entire WordPress site for easy reuse or distributionPerform a full WordPress migration without struggling with messy import/export sql scripts Migrate WordPress and Run WordPress Backups Duplicator Pro

Pods Basics: Pulling Pods Data to your Theme If you haven’t had a chance to read the first two articles in the series, I would definitely suggest taking a few minutes to read both An Overview of and Introduction to Pods CMS for WordPress as well as Pods Basics: Installation and Setup. There are details discussed in each article explaining how we’ve worked our way to this stage, pulling data from Pods into our theme. Pods Pages Pods comes standard with a feature called Pods Pages baked right in. There is a ton of documentation available in the User Guide, and an entire section set up in the Pods admin screens: While I’m really impressed with the Pods Pages implementation, I actually prefer not to use it. Setting up our Team page For the purposes of this example, I’m going to work with the default WordPress theme that ships with every download. <? At first glance, it may look like there is a ton going on here but once we break it down, you won’t be very intimidated, I promise! $team = new Pod('team'); This is huge! When we fire: <? <? <?

Bootstrap HTML Helpers Download link: Introduction The guys over at Twitter have done a serious favor for developers worldwide with their Bootstrap framework. This is especially useful for us coders with limited skills in UI design. With the Bootstrap Helpers project I have made things even easier for .NET developers. Update (2013.05.10) Note that the Bootstrap Helpers are now available as a Nuget package! Usage Here are some examples of the most useful of HTML helpers using the Razor syntax. Modal Dialog Tabs @using (var tabs = Html.Bootstrap().Begin(new Tabs())) { tabs.Tab("Tab One", "tab1"); tabs.Tab("Tab Two", "tab2"); tabs.Tab("Tab Three", "tab3"); using (tabs.BeginPanel()) { <p>This is tabs panel 1 content</p> } using (tabs.BeginPanel()) { <p>This is tabs panel 2 content</p> } using (tabs.BeginPanel()) { <p>This is tabs panel 3 content</p> } } You could also place the tabs on the left or right. @using (var tabs = Html.Bootstrap().Begin(new Tabs(TabPosition.Left))) { }

WordPress Themes » Montezuma Note: This is a completely different theme than the old “Montezuma” theme from 2007/2008. Montezuma is my second theme for the wordpress.org theme directory. Montezuma is a responsive, totally customizable, search engine optimized HTML5/CSS3 theme with various CSS3/jQuery animations. A little bit of HTML/CSS knowledge is recommended, or at least the desire/willingness to read & learn. (If the theme is running a bit slow it is probably due to various theme check plugins running in the background. Responsive Choose from 10 responsive, 5 flexible and 5 static layouts. Edit & create templates online Montezuma has a virtual file system that lets you edit and create new page templates online in the Montezuma admin area, without the need for uploading files with FTP. Edit PHP code online You can use a limited set of about 60 WordPress and Montezuma PHP functions while editing or creating page templates. Auto post thumbnails Cached auto post thumbnails. Advanced post excerpts Numbered page navigation

Quotable: Highlight and Share WordPress Posts on Twitter Readers may not always identify with the title that you’ve chosen for your posts but they may find a gem within your article that is more “quotable” and worth sharing. Quotable is a new WordPress plugin that capitalizes on this, allowing readers to highlight any text within your content to quote the article on Twitter. The plugin, developed by Josiah Sprague, was partially inspired by the toolbar on Medium.com that enables visitors to tweet or comment on the text they select. Sprague said that he created it out of his love for both WordPress and Twitter: I love how both platforms make it easy for people to share ideas and communicate openly and freely. I love that both serve as a sort of “public square” of the web and support discourse, democracy and free society. Quotable adds a tiny Twitter icon to the end of blockquotes for quick sharing. When you click the Twitter bird, a tweet modal will automatically launch with the quoted text inserted. Related The Beginning Of The Friday Happy Hour

#TEST : Le Nabaztag:Tag n’est pas mort ! Faites parler votre installation domotique à moindre coût! Salut à tous! Il y a quelques temps j’ai fait l’acquisition d’un Nabaztag:Tag d’occasion, vous savez, l’ancienne version de l’actuel Karotz, ce petit lapin connecté capable de communiquer avec vous ! Le but était de pouvoir faire communiquer mon installation domotique avec les personnes (et animaux ) vivant dans ma maison. Par exemple, rappeler qu’une fenêtre est ouverte depuis trop longtemps si la température extérieure est faible, annonce des heures creuses … Bref Si je n’ai pas choisi le Karotz, et bien, c’est tout simplement à cause du prix! Voici une petite photo du joujou accompagné de ses Flatnanoz : Pour ceux qui ne connaissent pas, ces petits portes clef (flatnanoz) servent à déclencher des actions lorsqu’on les passe devant le lapin (ex: annoncer la météo, appeler une Url..). Une fois votre lapin fraichement déballé du carton et branché, vous allez devoir le synchroniser avec un serveur afin de vous en servir. Les plus connus sont : Exemple de services proposés par Nabalive :

Related: