blogfreakz.com » Wordpress

Build A WordPress Network Navigation Menu

Keith@Blogfreakz — Tue, 07 Feb 2012 08:39:10 +0000

WordPress 3.0 has allowed users to host multiple independent websites with just one feature called Multisite. It also lets you share settings, content, and code between websites within your network.

Kevin Leary has shared some of the hacks he did to perform the aforementioned abilities in one of his articles; one of them involves building a network navigation menu. Below is a snippet of the code:

Simply paste this in your theme’s functions.php file.

/**

* Build a list of all websites in a network

function wp_list_sites( $expires = 7200 ) {

if( !is_multisite() ) return false;

// Because the get_blog_list() function is currently flagged as deprecated

// due to the potential for high consumption of resources, we’ll use

// $wpdb to roll out our own SQL query instead. Because the query can be

// memory-intensive, we’ll store the results using the Transients API

if ( false === ( $site_list = get_transient( ‘multisite_site_list’ ) ) ) {

global $wpdb;

$site_list = $wpdb->get_results( $wpdb->prepare(‘SELECT * FROM wp_blogs ORDER BY blog_id’) );

// Set the Transient cache to expire every two hours

set_site_transient( ‘multisite_site_list’, $site_list, $expires );

}

$current_site_url = get_site_url( get_current_blog_id() );

$html = ‘

’ . “\n\n”;

return $html;

}

You can use it in your theme by calling its wp_list_sites() function.

// Multisite Network Menu

$network_menu = wp_list_sites();

if( $network_menu ):

Cool, huh? Find out more about the rest of his WordPress hacks here!

Reduce Spam in WordPress with .htaccess

Keith@Blogfreakz — Tue, 31 Jan 2012 11:42:36 +0000

Here’s a very useful snippet from allguru.net that helps reduce spam in WordPress. Blocking spam at the .htaccess level is more efficient and effective than merely using plugins, and you may want to try this out.

It’ll help if make a backup copy of your .htaccess file first. Once you’re done, simply paste this code into your .htaccess file located in the root directory of your WordPress install.

RewriteEngine On

RewriteCond %{REQUEST_METHOD} POST

RewriteCond %{REQUEST_URI} .wp-comments-post\.php*

RewriteCond %{HTTP_REFERER} !.*yourdomainname.* [OR]

RewriteCond %{HTTP_USER_AGENT} ^$

RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]

Don’t forget to replace yourdomainname with your real domain name. This code will prevent spam bots from accessing your wp-comments-posts.php file directly and significantly help reduce the amount of spam on your blog.

Incoming search terms for the article:

Tumblr Importer for WordPress

Marvin@Blogfreakz — Tue, 31 Jan 2012 08:56:46 +0000

This new WordPress plugin called Tumblr Importer makes moving your Tumblr blog content to your self-hosted WordPress blog an easy feat. Since Tumblr is known for its multimedia posts, this plugin also keeps your audio, images and video intact.

Plugin features:

Imports posts, pages and drafts
It handles post formats correctly
Duplicate checking
Media sideloading for audio, video and image posts
WP-Cron based background importing: you can start it up and return later to check its progress.

Installation:

Download the plugin HERE.
Upload the files to /wp-content/plugins/tumblr-importer/ directory
Activate it through ’Plugins’ menu in your WordPress.
Go to Tools > Import and use the new importer.

Incoming search terms for the article:

review tumblr -tumblr com

6 Useful CSS Color Tools

Marvin@Blogfreakz — Tue, 24 Jan 2012 02:57:11 +0000

If you wish to design your WordPress blog’s appearance by yourself, you can rely on CSS. Here are 6 useful CSS color tools that could help get you started.

Color Scheme Designer

Color Scheme Designer provides colors in color wheel form. It has different color variations in percentage ratio like mono, tetrad, triad, analogic, accented analogic and complementary. This is especially useful in creating color combinations that work.

Ultimate CSS Gradient Generator

This gradient editor and generator tool allows you to make CSS gradients with cross-browser support. It has a Photoshop-like interface, opacity support with opacity stops, import from image and existing CSS, flexible preview panel, over 135 gradient presets and more!

CSS ColorCodes

With this tool, you can select any color from the color picker then copy its hexadecimal value from the bottom field. It also has 2 options which you can provide the RGB and hexadecimal color codes.

Colors Palette Generator

Colors Palette Generator allows you to upload any image you want for generating and using a color palette based on the image’s primary colors.

CSS Colors

This tool offers over 16 million colors with both RGB and hexadecimal color modes.

Gradient Image Maker

Gradient Image Maker creates gradient images that you can use in your website’s template design. It lets you generate 3 types of gradient images with instant previewing.

Incoming search terms for the article:

How to Create KnobKnob: A Shiny Knob Control with jQuery and CSS3

Marvin@Blogfreakz — Tue, 10 Jan 2012 12:56:46 +0000

This tutorial by Martin Angelov of tutorialzine.com will show you how to create a cool shiny knob control called KnobKnob. Made with jQuery and CSS3, this plugin uses CSS transformations and features jQuery’s new handling method. It will definitely give users a fun and interesying way of interactively selecting a pool of values from a range in your WordPress blog.

See the Demo and get the Download.

Step 1: HTML

Shiny Switches with CSS3 & jQuery | Tutorialzine Demo

Step 2: jQuery Code

assets/knobKnob/knobKnob.jquery.js

/**
 * @name               jQuery KnobKnob plugin
 * @author             Martin Angelov
 * @version    1.0
 * @url                http://tutorialzine.com/2011/11/pretty-switches-css3-jquery/
 * @license            MIT License
 */

(function($){

        $.fn.knobKnob = function(props){

               var options = $.extend({
                       snap: 0,
                       value: 0,
                       turn: function(){}
               }, props || {});

               var tpl = '\
                               
\
                               
\
                       
';

               return this.each(function(){

                       var el = $(this);
                       el.append(tpl);

                       var knob = $('.knob',el)
                               knobTop = knob.find('.top'),
                               startDeg = -1,
                               currentDeg = 0,
                               rotation = 0,
                               lastDeg = 0,
                               doc = $(document);

                       if(options.value > 0 && options.value <= 359){
                               rotation = currentDeg = options.value;
                               knobTop.css('transform','rotate('+(currentDeg)+'deg)');
                               options.turn(currentDeg/359);
                       }

                       knob.on('mousedown', function(e){

                               e.preventDefault();

                               var offset = knob.offset();
                               var center = {
                                      y : offset.top + knob.height()/2,
                                      x: offset.left + knob.width()/2
                               };

                               var a, b, deg, tmp,
                                      rad2deg = 180/Math.PI;

                               knob.on('mousemove.rem',function(e){

                                      a = center.y - e.pageY;
                                      b = center.x - e.pageX;
                                      deg = Math.atan2(a,b)*rad2deg;

                                      // we have to make sure that negative
                                      // angles are turned into positive:
                                      if(deg<0){
                                              deg = 360 + deg;
                                      }

                                      // Save the starting position of the drag
                                      if(startDeg == -1){
                                              startDeg = deg;
                                      }

                                      // Calculating the current rotation
                                      tmp = Math.floor((deg-startDeg) + rotation);

                                       // Making sure the current rotation
                                      // stays between 0 and 359
                                      if(tmp < 0){
                                              tmp = 360 + tmp;
                                      }
                                      else if(tmp > 359){
                                              tmp = tmp % 360;
                                      }

                                      // Snapping in the off position:
                                      if(options.snap && tmp < options.snap){
                                              tmp = 0;
                                      }

                                      // This would suggest we are at an end position;
                                      // we need to block further rotation.
                                      if(Math.abs(tmp - lastDeg) > 180){
                                              return false;
                                      }

                                      currentDeg = tmp;
                                      lastDeg = tmp;

                                      knobTop.css('transform','rotate('+(currentDeg)+'deg)');
                                      options.turn(currentDeg/359);
                               });

                               doc.on('mouseup.rem',function(){
                                      knob.off('.rem');
                                      doc.off('.rem');

                                      // Saving the current rotation
                                      rotation = currentDeg;

                                      // Marking the starting degree as invalid
                                      startDeg = -1;
                               });

                       });
               });
        };

})(jQuery);

assets/js/script.js

$(function(){

        var colors = [
               '26e000','2fe300','37e700','45ea00','51ef00',
               '61f800','6bfb00','77ff02','80ff05','8cff09',
               '93ff0b','9eff09','a9ff07','c2ff03','d7ff07',
               'f2ff0a','fff30a','ffdc09','ffce0a','ffc30a',
               'ffb509','ffa808','ff9908','ff8607','ff7005',
               'ff5f04','ff4f03','f83a00','ee2b00','e52000'
        ];

        var rad2deg = 180/Math.PI;
        var deg = 0;
        var bars = $('#bars');

        for(var i=0;i

               deg = i*12;

               // Create the colorbars

               $('').css({
                       backgroundColor: '#'+colors[i],
                       transform:'rotate('+deg+'deg)',
                       top: -Math.sin(deg/rad2deg)*80+100,
                       left: Math.cos((180 - deg)/rad2deg)*80+100,
               }).appendTo(bars);
        }

        var colorBars = bars.find('.colorBar');
        var numBars = 0, lastNum = -1;

        $('#control').knobKnob({
               snap : 10,
               value: 154,
               turn : function(ratio){
                       numBars = Math.round(colorBars.length*ratio);

                       // Update the dom only when the number of active bars
                       // changes, instead of on every move

                       if(numBars == lastNum){
                               return false;
                       }
                       lastNum = numBars;

                       colorBars.removeClass('active').slice(0, numBars).addClass('active');
               }
        });

});

You can use this versatile plugin anywhere in your website as part of the administrative pages or even in the control panels.

Incoming search terms for the article:

Create Preload Images with jQuery in WordPress

Marvin@Blogfreakz — Fri, 06 Jan 2012 13:55:49 +0000

This is a lightweight and user-friendly jQuery plugin that makes page loading faster. DynamicWP.net PR and editor Eko Setiawan created it exclusively for WordPress’s TwentyTen Theme.

Check out this plugin’s demo HERE:

This tutorial will teach us how to preload images with jQuery.

Step 1:

Download the loading image HERE.

Step 2:

Upload the loading image folder you have just downloaded to the themes file.

Step 3:

This code should be on your file header.php of your TwentyTen Theme as it serves to call the jQuery function.

Step 4:

Below the wp_head(); insert this jQuery preload function.

Step 5:

For styling the CSS, open the style.css and add this below on class .post-thumbnail-title.

background: url(images/loading.gif) no-repeat 50% 50% scroll transparent;

It should look like this:

.post-thumbnail-title {
        border: 1px solid #ccc;
        height: 150px;
        padding: 4px;
        width: 600px;
        position: relative;
        background: url(images/loading.gif) no-repeat 50% 50% scroll transparent;
        }

Incoming search terms for the article:

5 jQuery Snippets For A More Responsive Web Page

Keith@Blogfreakz — Sun, 04 Dec 2011 08:24:08 +0000

Enable HTML5 markup on older browsers

We all know that HTML5 is the future of web development. The only problem is some people still use older versions of web browsers that don’t support this language yet. So for that, here’s a script that will force those browsers to recognize the new tags introduced by HTML5 such as

and

Download the script (.js file) here .

Then link it (the .js script) to your page by inserting this code below in the portion of the HTML.

Test browser for CSS3 support

Here’s a nice code that you can modify to see if a browser supports a particular CSS3 property. Just remember that every time you pass the property, you should take out or omit the dash so like say instead of “border-radius”, pass “BorderRadius”, etc.

var supports = (function() {

var div = document.createElement(‘div’),

vendors = ‘Khtml Ms O Moz Webkit’.split(‘ ‘),

len = vendors.length;

return function(prop) {

if ( prop in div.style ) return true;

prop = prop.replace(/^[a-z]/, function(val) {

return val.toUpperCase();

});

while(len–) {

if ( vendors[len] + prop in div.style ) {

// browser supports box-shadow. Do what you need.

// Or use a bang (!) to test if the browser doesn’t.

return true;

}

return false;

};

})();

if ( supports(‘textShadow’) ) {

document.documentElement.className += ‘ textShadow’;

}

Preloading images

Spare your visitors from having to wait a few seconds for a large image to load up every time they click on a thumbnail. With this code you can just preload the images in the background so they’re ready to be displayed.

(function($) {

var cache = [];

// Arguments are image paths relative to the current page.

$.preLoadImages = function() {

var args_len = arguments.length;

for (var i = args_len; i–;) {

var cacheImage = document.createElement(‘img’);

cacheImage.src = arguments[i];

cache.push(cacheImage);

}

})(jQuery)

You can check out this code’s source page to get a better understanding on the code’s step-by-step process.

Add class to tag if JavaScript is enabled

What this code simply does is just add a hasJS class in the tag if it detects that JavaScript is enabled on the client’s browser setting.

$('body').addClass('hasJS');

Disable the “Enter” key in forms

This fourth and last one’s not really about making your web page more responsive but I thought I’d include it anyway since I think that this can be a very helpful code to your web site’s visitors, especially if they’re viewing or filling up a form page. This code will prevent any unwanted or accidental form submission by disabling the function of the “Enter” key.

$(“#form”).keypress(function(e) {

if (e.which == 13) {

return false;

}

});

Incoming search terms for the article:

A Simple Edit WordPress Theme to Support Sidebar Widgets

Nancy — Mon, 14 Nov 2011 21:24:32 +0000

What do you do, when after an exhaustive search for the perfect WordPress theme that you love, all of a sudden you run into an error message saying that your new theme doesn’t support your sidebar widgets?

Try these steps to edit the sidebar widgets to fix it!

1. Backup your theme files and folders.

2. Edit the functions.php file, and paste these lines of code to the top of the file — and Save It.

if ( function_exists(’register_sidebar’) )
register_sidebar();
?>

3. Edit the sidebar.php file, and paste these lines of code right below of the first
tag of the file.

|| !dynamic_sidebar() ) : ?>

4. Still inside the sidebar.php file, paste these line of code right above of the last
tag of the file and save it.

Now try to edit your sidebar widgets, it should be working now.

Incoming search terms for the article:

edit php files

incoming search terms wordpress

light simple theme wordpress 2011 november

simple wordpress theme

wordpress theme frameworks html5

wordpress themes simple

Image file errors after moving to new server?

Nancy — Fri, 11 Nov 2011 19:00:59 +0000

An Error Uploading After Server Move…

Say anyone of you Blogfreakz out there experienced this error when trying to upload an image?

I didn’t realize until after moving my blog onto a new server that, the directory on above image is pointing to the directory on my old server.

So here are the steps I followed to fix it :

Login to wordpress, on the Dashboard, go to Settings > Media

On the “Uploading Files” section, the “Store uploads in this folder” option shows the old setting.
3. Next we need to change it to the default setting: wp-content/uploads

4. Then don’t forget to Save Changes.

Now the error disappears and I’m able to finally upload the image!

Incoming search terms for the article:

after migrating wordpress images disappear

fiximagefile

gallery images disapear after wordpress moved to another server

moving picture error

There was an error uploading this file to the server

Rebranding Rules that You cannot Override

ContentLabz — Fri, 04 Nov 2011 00:29:07 +0000

Rebranding is certainly not a common practice among marketers. It raises my hackles whenever I am asked to take part in a re-branding exercise because there are so many examples of great failures that I think twice before committing myself to action. It is not just about money, other things are involved intrinsically and a minor mistake could be snowballed into massive marketing disaster. And so like any other sane marketing professionals, I do not like the idea of being branded as failed marketer. Such appreciation might not be that much helpful for landing a job. So, here are some must follow rules that every marketer should follow before rebranding your blog’s name:

Make Sure Rebranding is A Necessity: You should to take to rebranding only if the practice is unavoidable and not just to rub off the rust. If your blog has been around for quite a while, you may need to change the logo or the slogan time to time just to make your company look relevant with the change of time. Google has done the same thing and Microsoft has done it too. But make sure there is a solid reason behind this otherwise, backlash is waiting for you at the end.

Rebranding for Good: You need to make it a point that the rebranding exercise is doing good to your online reputation, and not the other way around. It does not make any sense to make changes in the name or in the logo just for the sake of doing something good. There are some glaring examples when the old one looks and sounds better than the new one. Make sure that you are not going to add another example to this vast list.

Test it: It is good practice to have a test run of the rebranding marketing mix on a small group of people and get their feedback. If the feedback is positive and impressive, you can go ahead with the plan and have a blast. But if the result is less than positive, you should stop and try to figure out what went wrong with it. After fixing it rerun the same marketing plan and see if thing is taking a favorable turn or not.

Do Not negate Existing reputation: This is where most marketers go wrong. They give little attention or no attention to existing brand reputation. You need to get into the mindset of the people before digging into something new. Your rebranding exercise should not play with the emotion of existing customers. The rebranding exercise should be a welcome move and not an aggressive move.

Stick To history: Unless the purpose is to make a dramatic move from previous stance, rebranding exercise should be linked with the history of the blog. You are free to expand, revitalize and reenergize brand image of your blog but make sure that people can still relate it to you. A complete deviation is certainly not a welcome move by any standard.

Put On Your Thinking cap: Yes before you make a single move in the direction of refreshing the public image of your organization, you need to have a clear idea how your targeted audience are going react. Just make sure that you are planning to make them happy and you are good.

This is a the first guest post of Michael Evans. I hope all you blogfreakz out there, find this new article informative and refreshing.

Author Bio
Michael Evans is a passionate writer and he has been writing for Site2You which is the best online website builder. He has written different article on web design, online marketing and SEO. He is equally enthusiastic about latest gadgets.

Incoming search terms for the article:

rebranding

re-branding

rebranding rules

rebranding examples in 2011

rebranding images

rebranding nesessity

rebranding logo why not to test it

rebranding rules colour

rebranding exercise

rebranding examples 2011