background preloader

HTML5 Blank WordPress Theme

HTML5 Blank WordPress Theme

34 Responsive Grid System Migrate a local WordPress installation in 5 minutes If you build new WordPress websites on a regular basis, you may be familiar with the process of setting up a local WordPress installation using WAMP or XAMPP to do your development work before migrating the site to your live server. It’s a great way to speed up the development process, as you don’t have to keep uploading your changes before you can view them, and besides, it’s not good practice to make changes to a live website. The biggest drawback of using a local WordPress development server, is the long-winded process of migrating a site from one server to another. The process involves backing up all your WordPress files, exporting your database, creating a new database on your live server, uploading your WordPress files to the live server via FTP, importing your data into the new database, editing all references to the local server in the new database, and configuring settings/widgets etc. Full instructions can be found in the WordPress Codex. Fortunately, there is. Getting started

One page WordPress theme DW Page « Guide « DesignWall Introduction This guide will show you how to install and setup one page WordPress theme DW Page. DW Page is a One Page WordPress theme with great looking design, simple to setup. DW Page allows you to keep your contents only in one page using sliders, infinite scrolling, popups and combination with other content presentation methods. Built upon the responsive Bootstrap & LESS framework, the theme is highly optimized for both mobile and desktop platforms. This product packed with 6 beautiful design theme styles and 3 attractive bonus landing pages. Note: Compatible Browsers: Firefox, Chrome, IE 9+, Safari, OperaWe don’t support other 3rd party plugins Recommended Plugins Installation Responsive premium theme DW Wall is compliant with the latest version of WordPress 3.9.1.Quickstart Installation: Install the theme using Quickstart package is to have a new website that look like our theme demo site. Layout Structure Here is the screenshot of the sections of the DW Page theme. Create A New Section

Hacking a WordPress Theme from HTML5up Template with some API goodies This is a hastily written description of a little mystery site I put together at The sliding images in the background are done by an HTML5up template called Eventually, but the dynamic text in the middle is done via some calls to the WordPress API via jQuery. The whole thing started when building out a WordPress multisite where the main site I was working on at the time was one of the subsites- This is for the NetWorked Narratives open course I am co-teaching with Mia Zamora and is at I wanted more or less a holding page, or just a landing page for the main site. But I did not find the kind of thing I had in mind in the WordPress themes. What I wanted was a static HTML5 template I have used before, as a holding spot for a yet to be built local project site but also for the Open Education 2016 presentation I did with Paul Stacey. But how do I get that to sit at the main site for a WordPress Multisite? I got that going in about an hour.

How to Build a Custom Wordpress Theme from Scratch If you’re confident with your CSS and HTML, it’s not hard at all to step up to the challenge of building a custom WordPress theme. This overview shows the process of how my latest custom WordPress theme was built from design concept through to completed theme. See how the static design is split up into the various WordPress theme files, and discover how the simple PHP snippets can add that dynamic functionality of a blog. The theme I'm working on is named Sticky. With the post focusing on the production of the theme, I won't go into too many details on how the design was built, but you can see from the Photoshop previews that it uses a 16 column grid with 24px baseline; a fairly muted colour palette of a beige and grey, with a dark red as a highlighting colour for links; typography is set to serif font throughout for that touch of class! Before getting stuck into the build process, it's important to know how WordPress themes work. Configuring the stylesheet Populating the header

SelectNav.js - responsive drop-down menu - pure JavaScript About SelectNav.js is a JavaScript plugin that lets you convert your website navigation into a select drop-down menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices. Inspired by TinyNav.js, it was rewritten from scratch to become jQuery independent and customizable. To see it in action just resize this page and observe the topbar. Features Independent - no external library or other dependecies Ligthweight - only 1.5KB minified and 0.8KB minified+gziped Customizable - to make it suit your needs Compatible - tested with IE 6+, Firefox 3.6+, Chrome 4+, Safari 3+, Mobile Safari iOS 3.2+, Android 2.3+ Browser, Opera Mobile, Opera Mini. Usage 1. <ul id="nav"><li><a href="homepage.html">Homepage</a></li><li><a href="about.html" class="active">About us</a></li><li><a href="contact.html">Contact</a></li></ul> Selectnav.js works with every navigation in form of ul or ol lists that follow the example above. 3. 4. Examples Result

Skeleton WordPress Theme Skeleton is a Responsive, Mobile-Friendly Theme for WordPress Skeleton is a simple, responsive (video) theme from Simple Themes. If you like this theme, we encourage you to try some of our other WordPress themes. Today, people visit your website from a variety of devices ranging from desktop computers, tablets, and smart phones. The tabs are clean and simple unordered-list markup and basic CSS..The tabs are cross-browser, but don’t need a ton of hacky CSS or markup.The tabs work like a charm even on mobile devices. Downloads Get started with Skeleton. Documentation Learn more about how Skeleton works and how you can customize it to fit your development needs.

Remove Styles and Scripts from a WordPress Parent Theme Occasionally, I use a parent-child theme relationship to build sites. Many times, the parent themes come loaded with extras that get in the way, slow down the site, and just don’t need to be there. Here are few tips for cleaning up that extra bloat. The following post provides code examples for adjusting parent theme functionality. De-enqueue Extra WordPress Parent Theme JavaScripts One of the most common gripes I have with many themes is the number of JS files they output. Find the “handle” of the script or styleDe-enqueue the script or style with that handle How do I find the handle of the script or style in my site? There are a couple ways you can do this: With a plugin: Using the Debug Bar plugin and the add-on Debug Bar List Script & Style Dependencies we can output which scripts are loaded in each page of your site. How Do I De-Enqueue the Scripts? Now that you have the handles of the styles or scripts that you want to de-enqueue, you’ve got to actually de-enqueue them. Using Code

3 Ways to Animate WordPress Have you ever wanted WordPress animations to spice up your website with some subtle effects? The freely-available animate.css toolset can help you make it happen in most decent browsers–and won’t break things for older browsers, either. Check out the general animate.css demo, and then learn how to use it to add some hop, skip, and jump to WordPress! Essential first step for WordPress animate.css I’ll show you different ways to animate your web content. Download the animate.css files and unzip First, visit the animate.css github page. Unzip the downloaded file and have a look inside. Copy animate.min.css file to your WordPress theme folder For this tutorial, I’m using the Twenty Eleven theme. Tell WordPress to include animate.min.css in your page head You might think it’s okay to just put a style link directly in your head area, usually found in header.php for WordPress themes. Open your theme’s “functions.php” file, scroll to the end, insert the following code, and save the file. Credits

Theme Development Languages: বাংলা • English • Español • 日本語 • 한국어 • Português do Brasil • Русский • 中文(繁體) • (Add your language) This article is about developing WordPress Themes. If you wish to learn more about how to install and use Themes, review Using Themes. This topic differs from Using Themes because it discusses the technical aspects of writing code to build your own Themes rather than how to activate Themes or where to obtain new Themes. Why WordPress Themes WordPress Themes are files that work together to create the design and functionality of a WordPress site. You may wish to develop WordPress Themes for your own use, for a client project or to submit to the WordPress Theme Directory. To create a unique look for your WordPress site. A WordPress Theme has many benefits, too. It separates the presentation styles and template files from the system files so the site will upgrade without drastic changes to the visual presentation of the site. Why should you build your own WordPress Theme? style.css

CSS3 Responsive Slider / Carousel Using Radio Buttons Select catcher Created by Ian Hansson (@teapoted) Art from Brendan Zabarauskas (@bjzaba_). Icons from the iconSweets set. Browser Support: Best In Test: Firefox (transition performance) Full Support: Chrome, Firefox, Opera, Safari (latest versions of all browsers) Partial Support: IE9 (Functional, but does not support transitions) *No JavaScript Functionality (1 compatability fix though) iOS devices don't handle labels properly. You can view this page without the js iOS fix here. How Does It Work? The actual slider is much like any JavaScript slider. To save our input we are using radio buttons. We put the radio buttons at the top so when they are :checked we can use a general sibling selectors (~) to change our slider. That is all the essential CSS, the other gaff is just styling and animation. Created by Ian Hansson (@teapoted), Feb 2012.

How to turn any jQuery plugin into a Wordpress one Part 1: Anatomy of a jQuery Plugin In this part, we'll analyse what a jQuery plugin is usually made of, where each of those elements should be placed, and how do we usually work with them. Throughout this article, we'll take for example the jQuery FancyBox plugin, (even if there is an existing WordPress adaptation for it already, it's just to have a concrete example). A) The Javascript Source jQuery is a javascript library, and plugins are there to help us extend the capabilities of it, so they are written following the same jQuery syntax. //Include the plugin script<script type="text/javascript" src="Path_to/jquery.fancybox.js"></script> B) The Javascript Snippet Once you have included the plugin script within your application, most of the time you'll be asked to write a little snippet of code that will make your site or application use the plugin when required. //Write the plugin setup<script type="text/javascript"> //Fancybox overlayShow: true, overlayOpacity: 0.7 });});</script>