Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
wordpress tutorials
Just run the following query on your WordPress database to delete comments with nastyspamurl as url. Don’t forget to replace the table prefix wp_ if your database is using another prefix.
And of course, create a backup of your database before running the query!
DELETE from wp_comments WHERE comment_author_url LIKE "%nastyspamurl%" ;
Just run the following query on your WordPress database to delete comments with nastyspamurl as url. Don’t forget to replace the table prefix wp_ if your database is using another prefix.
And of course, create a backup of your database before running the query!
DELETE from wp_comments WHERE comment_author_url LIKE "%nastyspamurl%" ;
The post WordPress tip: Bulk delete comments with a specific url appeared first on WPRecipes.
Simply paste the following snippet into your functions.php file:
remove_shortcode('gallery');
add_shortcode('gallery', 'custom_size_gallery');
function custom_size_gallery($attr) {
$attr['size'] = 'medium';
return gallery_shortcode($attr);
}
The desired size can be changed on line 5.
Thanks to emoticode for the cool tip!
Ultimatum is more than just a WordPress theme or framework. It’s a total all-in-one WordPress solution written in HTML5 and CSS3.
It’s definitely one of the most customizable WordPress solutions on the planet, users can modify everything from specific font elements to the overall layout structure using the super simple and user-friendly admin interface. You’d be hard pressed to find a more flexible and simple WordPress solution.
Here’s a short video with a feature overlook:
Ultimatum theme features:
So, are you impressed by Ultimatum‘s features? To be fully honest, I always prefer coding my own themes, but I have to admit that those guys did a great job, as I never saw a so complete solution for creating complex WordPress themes with no coding. A perfect solution for those who aren’t familiar with PHP/WordPress development, or for developers looking to an easy way to build websites for their clients.
CatsWhoCode long time partner Mighty Deals are currently offering Ultimatum for the low price of $35 (instead of $65) so don’t wait and pick your copy!
Fluid images are a central aspect of a responsive design. Happilly, making your images fluid is pretty easy to do. The CSS code below will make sure that images are as big as possible. For example, if the image is displayed within a 600px width container, the image will be 600px. Resize the container to 350px, and the image will be automatically resized to the maximum width available, in this case 350 pixels.
img {
max-width: 100%;
}
As the HTML5 specification allow you to easily embed videos in your webpages, why not using it? Making HTML5 responsive videos is just too easy: Just add the following to your css file and you’re good to go!
video {
max-width: 100%;
height: auto;
}
As I just shown you, there’s nothing complicated in making images or html5 videos responsive. But what about videos from popular sites? Indeed, YouTube is the most popular video host on the web, so chances are you’ll have to work with a YouTube video someday.
First, consider this HTML code:
<div class="video-container">
<iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>
Then, add this to your CSS file:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Here you go, your YouTube videos are now responsive!
Here is an example video, featuring french punk band Secular Plague:
This code also works well with Vimeo videos, as demonstrated below:
<div class="video-container"> <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe> </div>
Source: http://avexdesigns.com/responsive-youtube-embed/
Navigation menus are the easiest way for visitors to quickly find what they’re looking for on your site. But when viewing a website on a mobile device, navigations menus are often unreadable or very hard to use. In fact, for smaller displays, it is way better to use a <select> dropdown menu instead of a traditional horizontal menu.
Here’s an easy technique you can implement on any site. Let’s start with the HTML, we’ll be creating two menus: a standard <ul> menu for standard displays, and a <select> dropdown menu for mobile devices:
<nav>
<ul>
<li><a href="/" class="active">Home</a></li>
<li><a href="/collections/all">Books</a></li>
<li><a href="/blogs/five-simple-steps-blog">Blog</a></li>
<li><a href="/pages/about-us">About Us</a></li>
<li><a href="/pages/support">Support</a></li>
</ul>
<select>
<option value="" selected="selected">Select</option>
<option value="/">Home</option>
<option value="/collections/all">Books</option>
<option value="/blogs/five-simple-steps-blog">Blog</option>
<option value="/pages/about-us">About Us</option>
<option value="/pages/support">Support</option>
</select>
</nav>
And here is the CSS. Nothing complicated here: We hide the <select> by default, and only show it if the document width is smaller than 960px.
nav select {
display: none;
}
@media (max-width: 960px) {
nav ul { display: none; }
nav select { display: inline-block; }
}
Source: http://css-tricks.com/convert-menu-to-dropdown
Tables and responsive design generally do not fit very well together. But here’s a really useful technique created by talented developer Chris Coyier to help you made responsive tables.
Let’s start by creating a basic table. Here’s the HTML…
<table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Job Title</th> </tr> </thead> <tbody> <tr> <td>James</td> <td>Matman</td> <td>Chief Sandwich Eater</td> </tr> <tr> <td>The</td> <td>Tick</td> <td>Crimefighter Sorta</td> </tr> </tbody> </table>
And the CSS:
/*
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
Now that we have a table and its basic styling, let’s make our table responsive. What we’re going to do is to force the table to not behave like a table by setting every table-related element to be block-level. Then by keeping the zebra striping we originally added, it’s kind of like each table row becomes a table in itself, but only as wide as the screen. No more horizontal scrolling! Then for each “cell”, we’ll use CSS generated content (:before) to apply the label, so we know what each bit of data means.
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Porn Name"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
Source: http://css-tricks.com/responsive-data-tables
Simply paste the following code snippet into your functions.php file. Title text can be customized on line 2.
function custom_login_title() {
return 'Your desired text';
}
add_filter('login_headertitle', 'custom_login_title');
Thanks to Dave Clements for this code!
ThemeFuse is one of the most popular actors in the premium WordPress Themes market. They provide lots of themes with a great design and solid code.
They have lots of different designs for lots of different needs, so you should definitely have a look to their website! Also, ThemeFuse is on Facebook, so don’t forget to go like their page!
Joining the giveaway is free and easy. First, have a look to ThemeFuse WordPress Themes and find the theme you’d like to win. Then, simply leave a comment below to let me know which theme you want.
In one week (Tuesday february 18) I’ll randomly pick 3 winners. They’ll receive the chosen theme directly from ThemeFuse.
Good luck everyone!
Open you functions.php file and paste the following code:
$wpdb->query( " DELETE FROM $wpdb->posts WHERE post_type = 'revision' " );
Save the file and open your blog homepage to run the code. Once done, there’s no need to keep the code snippet in your functions.php file, as it will always delete all post revisions. So simply remove it.
Thanks to Hardeep Asrani for the tip!
I rarely publish sponsored posts on my blogs, but today here’s a very good deal that can benefit to many of you. For $39, Mighty Deals let you download a bundle of 3 premium plugins from Tribulant.
Those 3 plugins are:
Want to know more about those plugins? Then just have a look at this page where you can learn more and buy.
Open your functions.php and paste the code below in it:
function the_breadcrumb() {
echo '<ul id="crumbs">';
if (!is_home()) {
echo '<li><a href="';
echo get_option('home');
echo '">';
echo 'Home';
echo "</a></li>";
if (is_category() || is_single()) {
echo '<li>';
the_category(' </li><li> ');
if (is_single()) {
echo "</li><li>";
the_title();
echo '</li>';
}
} elseif (is_page()) {
echo '<li>';
echo the_title();
echo '</li>';
}
}
elseif (is_tag()) {single_tag_title();}
elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
echo '</ul>';
}
Once done, open header.php and call the function:
<?php the_breadcrumb(); ?>
Thanks to emoticode for this snippet!
Let’s start this list by a very popular and useful snippet: Those 4 lines will allow your visitors to smooth scrool to the top of the page simply by clicking a a link (with #top id) located at the bottom of your page.
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Source: http://stackoverflow.com/questions/1144805/how-do-i-scroll…
For a better readability of your tables, it can be a good idea to clone the table header on the bottom of the table. This is what this useful snippet do.
var $tfoot = $('<tfoot></tfoot>');
$($('thead').clone(true, true).children().get().reverse()).each(function(){
$tfoot.append($(this));
});
$tfoot.insertAfter('table thead');
Source: http://lunart.com.ua/jquery
Do you need to add some external content to a div? It is pretty easy to do with jQuery, as demonstrated in the example below:
$("#content").load("somefile.html", function(response, status, xhr) {
// error handling
if(status == "error") {
$("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
}
});
Source: http://api.jquery.com/load/
When you’re using columns to display content on your site, it definitely look better if the columns have an equal height. The code below will take all div elements with the .col class and will adjust their heights according to the bigger element. Super useful!
var maxheight = 0;
$("div.col").each(function(){
if($(this).height() > maxheight) { maxheight = $(this).height(); }
});
$("div.col").height(maxheight);
Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/
When displaying data on a table, alternating colors on each row definitely increases readability. Here’s a snippet to automatically add a CSS class to one row of out two.
$(document).ready(function(){
$("table tr:even").addClass('stripe');
});
Source: http://www.alovefordesign.com/5-jquery-must-have-code-snippets/
If you need to refresh only a portion of a page, the 3 lines of code below will definitely help. In this example, a #refresh div is automatically refreshed every 10 seconds.
setInterval(function() {
$("#refresh").load(location.href+" #refresh>*","");
}, 10000); // milliseconds to wait
Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/
jQuery make it easy to preload images in the background so visitors won’t have to wait forever when they would like to display an image. This code is ready to use, just update the image list on line 8.
$.preloadImages = function() {
for(var i = 0; i<arguments.length; i++) {
$("<img />").attr("src", arguments[i]);
}
}
$(document).ready(function() {
$.preloadImages("hoverimage1.jpg","hoverimage2.jpg");
});
Source: http://css-tricks.com/snippets/jquery/image-preloader/
The target="blank" attribute allows you to force opening of links in new windows. While it is relevant to open external links in a new tab or window, same domain links should definitely be opened in the same window.
This code detect if a link is external, and if yes, adds a target="blank" attribute to it.
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_blank');
});
}
});
Source: http://css-tricks.com/snippets/jquery/open-external-links-in-new-window/
This handy piece of code allows you to create a full width/height div according to the viewport. The code also handles window resizing. Great for modal dialogs or popups.
// global vars
var winWidth = $(window).width();
var winHeight = $(window).height();
// set initial div height / width
$('div').css({
'width': winWidth,
'height': winHeight,
});
// make sure div stays full width/height on resize
$(window).resize(function(){
$('div').css({
'width': winWidth,
'height': winHeight,
});
});
Source: http://www.jqueryrain.com/2013/03/div-full-widthheight-of-viewport-with-jquery/
When you let users defining their password, it is generally a good thing to indicate how strong the password is. This is exactly what this code do.
First, assume this HTML:
<input type="password" name="pass" id="pass" /> <span id="passstrength"></span>
And here is the corresponding jQuery code. The entered password will be evaluated using regular expressions and a message will be returned to the user to let him know if his chosen password is strong, medium, weak, or too short.
$('#pass').keyup(function(e) {
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#passstrength').html('More Characters');
} else if (strongRegex.test($(this).val())) {
$('#passstrength').className = 'ok';
$('#passstrength').html('Strong!');
} else if (mediumRegex.test($(this).val())) {
$('#passstrength').className = 'alert';
$('#passstrength').html('Medium!');
} else {
$('#passstrength').className = 'error';
$('#passstrength').html('Weak!');
}
return true;
});
Source: http://css-tricks.com/snippets/jquery/password-strength/
Although you should resize your images on server side (using PHP and GD for example) it can be useful to be able to resize images using jQuery. Here’s a snippet to do it.
$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_cat_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});
Source: http://snipplr.com/view/62552/mage-resize/
Some websites such as Twitter loads content on scroll. Which means that all content is dynamically loaded on a single page as long as you scroll down.
Here’s how you can replicate this effect on your website:
var loading = false;
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
if(loading == false){
loading = true;
$('#loadingbar').css("display","block");
$.get("load.php?start="+$('#loaded_max').val(), function(loaded){
$('body').append(loaded);
$('#loaded_max').val(parseInt($('#loaded_max').val())+50);
$('#loadingbar').css("display","none");
loading = false;
});
}
}
});
$(document).ready(function() {
$('#loaded_max').val(50);
});
Source: http://fatfolderdesign.com/173/content-load-on-scroll-with-jquery
Here’s a snippet I often use when working with images, as it is the best way to know if an image is loaded or not.
var imgsrc = 'img/image1.png';
$('<img/>').load(function () {
alert('image loaded');
}).error(function () {
alert('error loading image');
}).attr('src', imgsrc);
Source: http://tympanus.net/codrops/2010/01/05/some-useful…
On some cases, it can be very useful a sort a long list by alphabetical order. This snippet take any list and order its element alphabetically.
$(function() {
$.fn.sortList = function() {
var mylist = $(this);
var listitems = $('li', mylist).get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : 1;
});
$.each(listitems, function(i, itm) {
mylist.append(itm);
});
}
$("ul#demoOne").sortList();
});
Source: http://stackoverflow.com/questions/13394796/javascript-jquery-to-sort…
ThemeFuse is one of the most popular actors in the premium WordPress themes market. They provide lots of themes with a great design and solid code.
They have lots of different designs for lots of different needs, so you should definitely have a look to their website!
Scroll down to the bottom of this very post, and leave a comment for us. Tell us how you would implement your new WordPress theme, and why you should be one of our three winners.
Head over to Twitter and spread the word to your followers about this giveaway by tweeting: Win a free copy of @ThemeFuse #WordPress Theme from @catswhocode (RT to Enter).
Let your Facebook friends know how much you enjoy ThemeFuse by visiting the ThemeFuse Facebook page and clicking the “Like” button.
The three winners will be announced here in one week (January 23, 2014), so stay close!
For those who hear about IM Creator for the first time, it is a free to use web builder that makes it possible to have sites made without the slightest use of code, just as easy as drawing in a graphic editor. This means that you can have your website made in a matter of minutes without having to employ a web designer. It’s quite versatile and at the same time easy to use.
If you are tempted to give it a try, why not do so with a free one year subscription. In order to participate, all you need to do is follow @IMC_official on Twitter and mention them in a tweet along with your favorite template from app.imcreator.com/new. Best of luck!
Probably the most popular PHP framework right now. Laravel is powerful and elegant while still being easy to learn and use. Definitely worth giving a try!
→ More info/download
Flight is a fast, simple, extensible micro framework for PHP which enables you to quickly and easily build RESTful web applications. Easy to use and to learn, simple yet powerful.
→ More info/download
Yii is a high-performance PHP framework for developing Web 2.0 applications. Yii comes with rich features: MVC, DAO/ActiveRecord, I18N/L10N, caching, authentication and role-based access control, scaffolding, testing, etc.
→ More info/download
Medoo is the lightest PHP database as it consists of only one file of 10,9kb. A great micro framework for small and simple applications.
→ More info/download
Originally a fork of the Kohana framework, PHPixie is among my favorite new frameworks: MVC compliant, fast to learn, powerful. You should try it sometime soon!
→ More info/download
Although being a bit old and reaching the end of its life, I definitely love CI which is a great MVC framework. I’ve used it countless times on many project and I never was disappointed.
→ More info/download
Kohana is an open source, object oriented MVC web framework built using PHP5 by a team of volunteers that aims to be swift, secure, and small.
→ More info/download
Created in 2005, Symfony is a very powerful MVC framework and is quite popular in the enterprise world. It was heavily inspired by other Web Application Frameworks such as Ruby On Rails, Django, and Spring. Symfony is probably one of the most complete PHP frameworks.
→ More info/download
While some PHP frameworks are pretty complex and intense, Pop has been built with all experience levels in mind. Pop has a manageable learning curve to help beginners get their feet wet with a PHP framework, but also offers robust and powerful features for the more advanced PHP developer.
→ More info/download
Phalcon is an open source, full stack framework for PHP 5 written as a C-extension, optimized for high performance. You don’t need to learn or use the C language, since the functionality is exposed as PHP classes ready for you to use. Phalcon also is loosely coupled, allowing you to use its objects as glue components based on the needs of your application.
→ More info/download