[WordPress Canada]Unstick Primary Nav in Malcolm and Marcus

A couple of weeks ago, March 4 to be exact, I released both the Malcolm and Marcus child themes for the Genesis framework. One of the popular features of both themes is the so-called sticky nav – the primary navigation that stays fixed to the top of the page as you scroll down.

Although most users seem to like it a few of you have asked how to unstick the menu so that it doesn’t stay fixed at the top. If this sounds like you then read on.

The process is actually quite easy and involves just a few modifications to the style sheet.

Malcolm

1. Download Malcolm’s style.css file to your hard drive, make a backup of it then open it in a plain text editor. Personally I like either Programmer’s Notepad or Notepad++.

2. At about line 141 you’ll see the following …

body {
	background-color: #fff;
	color: #666;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.625;
  	padding-top: 82px;
}

3. The part that needs to be changed is highlighted red. You can either delete that line or comment it out. In fact, I recommend simply commenting it out so that if some point down the road you change your mind and want to revert back it will be easy to do so.

4. That line should now look like this …

body {
	background-color: #fff;
	color: #666;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.625;
  	/*padding-top: 82px;*/
}

5. Next scroll down to about line 1140 where you’ll see this …

.nav-primary {
	background-color: #333;
	border-bottom: 1px solid #bbb;
	border-top: 1px solid #ddd;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2000;
}

body.admin-bar .nav-primary {
	top: 28px;
}

6. Once again comment out the lines I highlighted red. It should now look like this …

.nav-primary {
	background-color: #333;
	border-bottom: 1px solid #bbb;
	border-top: 1px solid #ddd;
	/*position: fixed;*/
	/*top: 0;*/
	/*width: 100%;*/
	/*z-index: 2000;*/
}

body.admin-bar .nav-primary {
	/*top: 28px;*/
}

7. The final step. Scroll even further down near the bottom to about line 2518 where you’ll see this …

@media only screen and (max-width: 767px) {

	body {
		padding-top: 0;
	}

}

8. This line is the final change you need to make. After you comment it out it should look like this …

@media only screen and (max-width: 767px) {

	body {
		/*padding-top: 0;*/
	}

}

That’s all there is to it. You can copy/paste directly from here if you like.

Marcus

1. Download Marcus’s style.css file to your hard drive, make a backup of it then open it in a plain text editor. Personally I like either Programmer’s Notepad or Notepad++.

2. At about line 133 you’ll see the following …

body {
	background-color: #f5f5f5;
	color: #666;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.625;
  	padding-top: 82px;
}

3. The part that needs to be changed is highlighted red. You can either delete that line or comment it out. In fact, I recommend simply commenting it out so that if some point down the road you change your mind and want to revert back it will be easy to do so.

4. That line should now look like this …

body {
	background-color: #f5f5f5;
	color: #666;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.625;
  	/*padding-top: 82px;*/
}

5. Next scroll down to about line 1162 where you’ll see this …

.nav-primary {
	background-color: #333;
	border-bottom: 1px solid #bbb;
	border-top: 1px solid #ddd;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2000;
}

body.admin-bar .nav-primary {
	top: 28px;
}

6. Once again comment out the lines I highlighted red. It should now look like this …

.nav-primary {
	background-color: #333;
	border-bottom: 1px solid #bbb;
	border-top: 1px solid #ddd;
	/*position: fixed;*/
	/*top: 0;*/
	/*width: 100%;*/
	/*z-index: 2000;*/
}

body.admin-bar .nav-primary {
	/*top: 28px;*/
}

7. The final step. Scroll even further down near the bottom to about line 2636 where you’ll see this …

@media only screen and (max-width: 767px) {

	body {
		padding-top: 0;
	}

}

8. This line is the final change you need to make. After you comment it out it should look like this …

@media only screen and (max-width: 767px) {

	body {
		/*padding-top: 0;*/
	}

}

That’s all there is to it. You can copy/paste directly from here if you like.

The post Unstick Primary Nav in Malcolm and Marcus appeared first on WPCanada.

[WPSNIPP]Remove login shake effect when error occurs

From: wpsnipp.com
By: Kevin Chard

Have you ever been annoyed by the login error shake? As if the shaking is mocking you every time you enter the incorrect username or password. Ya me neither but if you do wish to remove the shake after a login error add the following snippet to the functions.php of your wordpress theme.

link: Remove login shake effect when error occurs


Remove login shake effect when error occurs is a post from: wpsnipp.com - WordPress Snippets, Code, Hacks, 615+ for your wordpress theme or blog.

[WordPress Canada]Install WordPress and XAMPP On Your PC Pt 2

Welcome to Part 2 of this tutorial. In Part 1 we went through the process of installing XAMPP which includes everything we need to run WordPress on our PC. Now we’ll go through the process of installing WordPress.

First, we need to download WordPress. Head over to http://wordpress.org/download/ to grab a copy and save it to your hard drive.

When working with XAMPP all of your web projects will be stored in the htdocs folder located at C:\xampp\htdocs. Your WordPress project(s) will go there as well as any other projects you care to create such as Drupal, SMF, Joomla! etc. You access the projects with a browser by navigating to http://localhost/YourProject

For example, put your WordPress folder in the htdocs folder so that the path looks like C:\xampp\htdocs\WordPress You can name the WordPress folder anything you want – it doesn’t have to be WordPress. In fact you’ll have to if you want to run more than one instance. My various WordPress folders are named as such wp01, wp02, wp03 and so forth.

If you go with WordPress then the path would be C:\xampp\htdocs\WordPress and the URL http://localhost/WordPress

If you named the WordPress folder wp01 then the path would be C:\xampp\htdocs\wp01 and the URL to access it http://localhost/wp01. You get the idea.

Okay, go to the WordPress ZIP file you downloaded moments ago and extract the contents to C:\xampp\htdocs. (minus the period) Your project will be located at C:\xampp\htdocs\wordpress and to access it with your browser you will navigate to http://localhost/wordpress

Next, fire up the XAMPP Control Panel and with your browser navigate to http://localhost/phpmyadmin/ for it is here that we will create a database for WordPress. If you created a password for the MySQL SuperUser as outlined in Part 1 you will need to enter that password at the phpMyAdmin login screen. The default username is root.

If you didn’t create a password you’ll enter the phpMyAdmin backend right away bypassing the login screen.

Once in the phpMyAdmin backend you will see the screen below.

click databases

Looking at the image above click Databases. You will then be presented with the screen below.

name your database

Looking at the image above choose a name for your new database – I chose wordpress. From the drop menu select a collation – I chose utf8_general_ci then click Create.

Success! You have just created a brand new database for WordPress. You can see it in the list in the sidebar. See the image below.

your new database

Now we’re ready to install WordPress.

Install WordPress

With your browser navigate to http://localhost/wordpress where you will see the screen below.

create configuration file

Looking at the image above click on Create a Configuration File. After that you will be presented with the screen below.

lets go

Looking at the image above, it is reminding you it will need some basic information to continue the installation. Click on Let’s Go!

At the next screen, as seen below, you will enter the basic information WordPress wants.

enter details

Looking at the image above it is asking for:

  • Database Name
  • User Name
  • Password
  • Database Host
  • Table Prefix

These are the details you will enter:

  • Database Name: wordpress (as chosen earlier)
  • User Name: root (the default MySQL SuperUser)
  • Password: the password you chose earlier for the MySQL SuperUser
  • Database Host: localhost (default)
  • Table Prefix: wp_ (default)

After entering the details click on Submit.

You will then see the screen below. Click on Run the install.

run the install

Now we come to the next screen where it asks for the details specific to this WordPress install. See the image below.

set up WordPress credentials

Looking at the image above enter your:

  • Site Title – I chose My Site
  • Username – I chose username
  • Password – I chose password (hence the weak password warning :) )
  • Your E-mail

Click on Install WordPress.

The installation literally takes a few seconds. You should then see a confirmation screen like the one below. Click on Log In.

WordPress installed

You will finally be presented with the WordPress login screen as seen below.

WordPress login screen

Enter the Username and Password you chose a few moments ago and Bob’s your uncle! Congratulations, you now have a fully functioning WordPress site on your PC. Have fun!

Further reading:

  • Apache Friends XAMPP forum (English) [link]
  • Apache Friends XAMPP FAQs (Windows) [link]
  • WordPress Codex [link]
  • WordPress Support Forums [link]

Go to Part 1

The post Install WordPress and XAMPP On Your PC Pt 2 appeared first on WPCanada.

[WordPress Canada]Install WordPress and XAMPP On Your PC Pt 1

In a post called A Clean Slate I explained why I decided to nuke this site’s archives and start fresh. I also stated that I saved a few of the more popular articles with the intention of posting them again. This is one such case.

In this 2 part tutorial I’ll show you how to install WordPress on your desktop PC using XAMPP. At the time of this writing the current version of XAMPP is v1.8.3-3.

There are two ways to install XAMPP:

  • using the ZIP file
  • using the installer

What’s the difference you ask? If you use the installer method XAMPP will automatically install the necessary services needed to run. This method also comes with an uninstaller should you decide you no longer want the program.

Using the ZIP method doesn’t actually install anything. You simply extract the contents of the ZIP file to C:\ and manually start the services. When you no longer want the program there is nothing to uninstall, there are no added or modified registry entries. You simply delete the XAMPP directory which is located at C:\xampp This is my preferred method but I’ll walk you through the process of setting up XAMPP using both methods.

Setting up WordPress on your PC is a great idea for several reasons:

  • maintain a backup or clone of your live blog
  • test new functionality such as plugins, themes etc without affecting your live blog
  • general experimentation

I have dozens of WordPress instances running on my PC including several SVN installs.

In order to run, WordPress requires a server (Apache), and that server needs to support both PHP and MySQL. XAMPP will set these components up for you.

Ready? Then let’s go!

Using the ZIP method

Head over to the Apache Friends website to obtain XAMPP. See the image below.

Apache Friends website

We are using the ZIP method so make sure to click the green graphic that says Download Click here for other versions. Don’t click the graphic to download the installer, we’ll go through that later.

After clicking the green graphic that says Download Click here for other versions you’ll see the the image below.

XAMPP more downloads

Looking at the image above click on More Downloads.

After clicking on More Downloads you’ll see the image below.

list of XAMPP packages

Looking at the image above click the first item XAMPP Windows.

After clicking XAMPP Windows you’ll see the following screen. Click the first item 1.8.3.

XAMPP versions

After that you’ll see the following image with a list of available packages.

XAMPP packages

Looking at the image above take the item labelled xampp-win32-1.8.3-3-VC11.zip. It should be the 2nd item in the list. You could also take the 7z package (3rd item in the list) but for purposes of this tutorial we’re using the ZIP.

Download the ZIP somewhere to your hard drive and extract the contents to C:\ Do not extract it to C:\Program Files or some such thing. It must be extracted to the root of the drive which is C:\

Extracted properly the directory should be C:\xampp

Using the Installer

Head over to the Apache Friends website to obtain XAMPP. See the image below.

Apache Friends website

This time we want to download the installer, we don’t want the ZIP. Looking at the image above click the graphic labelled XAMPP for Windows. After a few seconds the download will begin. Again, save it somewhere to your hard drive.

When the download is complete double click it to start the installation. You’ll see the image below. Click Next.

begin XAMPP installation

After clicking Next you may see the next screen. It’s a warning that your antivirus may interfere with the installation process.

antivirus warning

At this point you can temporarily halt the installation in order to shutdown your antivirus for a few moments or simply continue. I opted to shutdown the AV for a few minutes.

Next, you’ll see the image below.

select components

Looking at the image above, it is asking what components you want to install. All you need is Apache, MySQL, PHP and phpMyAdmin. After selecting the components click Next.

Now we come to the screen below.

choose installation directory

Looking at the image above, it is asking what directory XAMPP should be installed in. It should default to C:\xampp but if it doesn’t for some reason make sure to manually select C:\xampp As I stated earlier, XAMPP must be installed at the drive’s root. In fact you may see a screen warning you about User Account Control (UAC) protection and reminding you to install the package at root.

After clicking Next we come to the screen below.

Bitnami for XAMPP

Bitnami is an open source project that provides installers and virtual appliances for various web packages. For the purposes of this tutorial we won’t be using it so clear the check box labelled Learn more about Bitnami for XAMPP. Click Next.

After clicking Next we come to the Welcome to XAMPP installation screen below.

XAMPP install screen

Be patient while the installation is underway. It takes only a few moments. Once complete you’ll see the screen below.

XAMPP setup complete

Looking at the image above clear the check box that says Do you want to start the Control Panel now? Click Finish.

And we’re done. XAMPP is now installed. The reason why I said to clear the check box and not to start the Control Panel is because I will show you how to start it each time you want to use it.

Now that XAMPP is installed let’s start using it.

Using XAMPP

If you set up XAMPP using the ZIP method you’ll need to navigate to C:\xampp\xampp-control.exe to access the Control Panel. You may want to add this shortcut to your Start Menu or Desktop or Taskbar etc for convenience in the future.

If you set up XAMPP using the installer it will have added the shortcut for the Control Panel to your Start Menu.

You’ll need to start the Control Panel with administrative rights so right click xampp-control.exe and select Run as administrator. See the image below.

run as administrator

After that Windows firewall will throw up 2 warnings at you. One informing you that some features of the Apache HTTP Server have been blocked and the other informing you that some features of mysqld.exe have been blocked. Grant access to both. You’ll only need to grant access this one time. It will add a permanent rule so that these dialogues won’t bother you in the future. See the images below.

allow access to Apache HTTP Server

allow access to mysqld.exe

After granting access to both Apache HTTP Server and mysqld.exe you’ll be greeted by the XAMPP Control Panel. See the image below.

XAMPP Control Panel

Looking at the image above click the appropriate buttons to start both Apache and MySQL. Clicking the red x at the top right corner minimizes the Control Panel to the taskbar while clicking Quit shuts down the Control Panel.

Now that everything is running open your favourite browser and navigate to http://localhost/xampp/ The first time you visit this URL you will see the splash screen below.

XAMPP spash page

Looking at the image above select your language. I chose English.

You will now arrive at the XAMPP backend where you can access its various tools and functions. For instance, you can access phpMyAdmin by clicking its link in the sidebar. You can also reach phpMyAdmin by navigating directly to http://localhost/phpmyadmin/ in your browser.

While in the XAMPP backend you’ll see a link in the sidebar labelled Security. Since this is localhost it’s not necessary to activate any security measures because only you can access it. That’s why you should never install this package on a live, remote server. It’s meant to create a development environment on your PC.

But in case you do want to activate some very basic protection click the link I mentioned labelled Security. See the image below.

XAMPP security

After clicking that link you’ll see the following screen. See the image below.

unsecure items

Looking at the image above you can see a list of unsecure items. Click the link http://localhost/security/xamppsecurity.php to correct that.

After clicking that link you’ll be taken to the XAMPP Security Console where you can activate some basic security measures. See the image below.

XAMPP security console

Looking at the image above you can set a password for the MySQL SuperUser. The default username is root. Make sure to retain this password because you will need it not only to access phpMyAdmin in the future but to install WordPress later on. You can also set a username and password to protect the XAMPP directory.

After completing those steps you need to shutdown then restart both Apache and MySQL in order for the changes to take effect. Maximize the Control Panel (if minimized) and click the buttons labelled Stop for both Apache and MySQL. See the image below.

stop services

Looking at the image above you don’t need to click the button labelled Quit. You only click that when your session is over and you want to close everything. Our session is not over as we’re restarting Apache and MySQL.

Once both services are stopped, wait a few seconds then start them again.

That’s it. We have installed XAMPP which includes everything we need to run WordPress on our PC. In Part 2 we’ll go through the process of installing WordPress.

Go to Part 2

The post Install WordPress and XAMPP On Your PC Pt 1 appeared first on WPCanada.

[WPSNIPP]Upload user-submitted files from the frontend

There are many use cases for allowing users to upload files from the frontend, but the trick is making sure the file is uploaded and saved in the WordPress media library correctly. You can easily use standard PHP functions to handle the upload and then store the file wherever you like, but then you won't be able to take advantage of the attachment system that WordPress uses. An image that is uploaded correctly, for example, will have all the various sizes available as well as the meta data, such as title, description and caption. You will also be able to edit all of this from the media library in your WordPress dashboard.

Upload user-submitted files from the frontend is a post from: wpsnipp.com - WordPress Snippets, Code, Hacks, 615+ for your wordpress theme or blog.

[WordPress Canada]Malcolm, Marcus Updated v1.0.1

Both Malcolm and Marcus child themes have been updated to v1.0.1. This is a maintenance release that fixes an error in the functions.php file related to the dashicon integration.

The function which enqueues the style sheet used get_stylesheet_directory_uri() when it should have used get_stylesheet_uri(). This has been fixed.

If you want to make the change directly to either theme yourself rather than uploading the new version read on.

Malcolm

Open up the functions.php file in a plain text editor such as Notepad and look for the following,

//* Enqueue Malcolm scripts
add_action( 'wp_enqueue_scripts', 'malcolm_enqueue_scripts' );
/**
 * Enqueue responsive javascript
 * @author Ozzy Rodriguez
 * @todo Change 'prefix' to your theme's prefix
 */
function malcolm_enqueue_scripts() {

	wp_enqueue_script( 'malcolm-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Oswald:400,700|Open+Sans:400,700', array(), CHILD_THEME_VERSION );
	wp_enqueue_style( 'malcolm-dashicons-style', get_stylesheet_directory_uri(), array('dashicons'), '1.0' );

}

The part that needs to be changed is highlighted red. So that entire block should now look like this,

//* Enqueue Malcolm scripts
add_action( 'wp_enqueue_scripts', 'malcolm_enqueue_scripts' );
/**
 * Enqueue responsive javascript
 * @author Ozzy Rodriguez
 * @todo Change 'prefix' to your theme's prefix
 */
function malcolm_enqueue_scripts() {

	wp_enqueue_script( 'malcolm-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Oswald:400,700|Open+Sans:400,700', array(), CHILD_THEME_VERSION );
	wp_enqueue_style( 'malcolm-dashicons-style', get_stylesheet_uri(), array('dashicons'), '1.0' );

}

You can copy/paste it right from this post if you like.

Marcus

Open up the functions.php file in a plain text editor such as Notepad and look for the following,

//* Enqueue Marcus scripts
add_action( 'wp_enqueue_scripts', 'marcus_enqueue_scripts' );
/**
 * Enqueue responsive javascript
 * @author Ozzy Rodriguez
 * @todo Change 'prefix' to your theme's prefix
 */
function marcus_enqueue_scripts() {

	wp_enqueue_script( 'marcus-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Oswald:400,700|Open+Sans:400,700', array(), CHILD_THEME_VERSION );
	wp_enqueue_style( 'marcus-dashicons-style', get_stylesheet_directory_uri(), array('dashicons'), '1.0' );

}

Once again the part that needs to be changed is highlighted red. After the change it should now look like this,

//* Enqueue Marcus scripts
add_action( 'wp_enqueue_scripts', 'marcus_enqueue_scripts' );
/**
 * Enqueue responsive javascript
 * @author Ozzy Rodriguez
 * @todo Change 'prefix' to your theme's prefix
 */
function marcus_enqueue_scripts() {

	wp_enqueue_script( 'marcus-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true );
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Oswald:400,700|Open+Sans:400,700', array(), CHILD_THEME_VERSION );
	wp_enqueue_style( 'marcus-dashicons-style', get_stylesheet_uri(), array('dashicons'), '1.0' );

}

You can copy/paste it right from this post if you like.

Reference:

The post Malcolm, Marcus Updated v1.0.1 appeared first on WPCanada.

[WPSNIPP]Add wordpress post types to the dashboard ‘At a glance’ widget

The WordPress dashboard includes a handy widget that displays some brief information about your site at a glance – rather creatively, it’s titled ’At a Glance’. By default it shows you the number of posts, pages and comments on your site allowing you to click through to edit each of those sections if you have the right permissions.

Add wordpress post types to the dashboard ‘At a glance’ widget is a post from: wpsnipp.com - WordPress Snippets, Code, Hacks, 615+ for your wordpress theme or blog.

[WP First Aid]Keep Your Plugin Script Version Current

Something to keep in mind when you are creating and maintaining WordPress Plugin code is to ensure you are also keeping its scripts and stylesheets versions up-to-date; and possibly more importantly, relevant to the current plugin version. If you are including your own JavaScript or custom stylesheet then you should also be providing a version number for them. I recommend using the same version number as the actual plugin so it is consistent and easily recognized. Now the question is: how do I do this easily and dynamically?

First off, you can gather up the plugin data with a relatively simple (and generic) function:

/**
 * Plugin Data
 * Returns the plugin header data as an array
 *
 * @uses       get_plugin_data
 *
 * @return array
 */
function wpfa_plugin_data() {
    /** Call the wp-admin plugin code */
    require_once( ABSPATH . '/wp-admin/includes/plugin.php' );
    /** @var $plugin_data - holds the plugin header data */
    $plugin_data = get_plugin_data( __FILE__ );

    return $plugin_data;
} /** End function - plugin data */

There we go, now we have the plugin header data in a nice little array that we can work with … and this function is easily used as a method in your plugin class. You are putting your plugins into their own classes, right? (Yes, I know, the WPFA Sample Widget needs to be updated to move all of its code into the class.)

Now, let’s look at the standard enqueue functions you would use to add your scripts and/or styles to a plugin. This is for scripts …

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

… as found in the WordPress codex here. We’ll be looking at the $ver parameter for our purposes.

The following is for stylesheets …

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

… as found in the WordPress codex here; and, again, we’ll be looking at the $ver parameter for our purposes here as well.

Let’s create a simple function/method to be used for enqueueing our scripts and styles.

/**
 * Plugin Scripts and Styles
 * Add plugin scripts and styles to be used on front facing views
 *
 * @uses       plugin_dir_url
 * @uses       wp_enqueue_script
 * @uses       wp_enqueue_style
 */
function Scripts_and_Styles() {

    /** @var object $header_data - plugin header data */
    $header_data = wpfa_plugin_data();

    /** Enqueue Scripts; 'jQuery' is enqueued as a dependency */
    wp_enqueue_script( 'WPFA-Sample-Script', plugin_dir_url( __FILE__ ) . 'wpfa-sample-script.js', array( 'jquery' ), $header_data['Version'], true );

    /** Enqueue Styles */
    wp_enqueue_style( 'WPFA-Sample-Style', plugin_dir_url( __FILE__ ) . 'wpfa-sample-style.css', array(), $header_data['Version'], 'screen' );

} /** End function - scripts and styles */

… and were done! Now your plugin script and stylesheet versions will always match the version of your plugin; and, you will never need to worry about a script or stylesheet using an older cached version because it has the same version number as the last one you released.

You should already be hooking the Scripts_and_Styles function but for completeness I will add that action call here as well:

/** Add Scripts and Styles */
add_action( 'wp_enqueue_scripts', 'Scripts_and_Styles' );

This is easily translated into class friendly code but I will leave that as an exercise for the reader.

Enjoy!

[WPSNIPP]Navigate next, previous adjacent post with jquery and the left, right keys

If you are using adjacent post relational links in the head of your wordpress theme add this little bit of jquery. This will let people navigate next, previous adjacent post with the left and right arrow keys.

Navigate next, previous adjacent post with jquery and the left, right keys is a post from: wpsnipp.com - WordPress Snippets, Code, Hacks, 615+ for your wordpress theme or blog.

[WordPress Canada]Tutorial: Full Width Breadcrumbs

In many of the Genesis child themes the built-in breadcrumbs use the genesis_before_loop hook. Depending on the type of child theme you are building what if you wanted the breadcrumbs to span full width instead? This is how I achieved it when I built the Malcolm child theme.

//* Reposition the breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
add_action( 'genesis_after_header', 'genesis_do_breadcrumbs' );

In the code block above (which is added to the child theme’s functions.php file) I unhooked the breadcrumbs function from the genesis_before_loop hook and added it to the genesis_after_header hook. This caused the breadcrumbs to span the full width of the site.

Next, I added a wrapper as seen in the code block below. (also added to functions.php)

//* Add wrapper to breadcrumbs
add_filter( 'genesis_breadcrumb_args', 'malcolm_breadcrumb_args' );
function malcolm_breadcrumb_args( $args ) {
	$args['prefix'] = '<div class="breadcrumbwrapper"><div class="breadcrumb">';
	$args['suffix'] = '</div></div>';
	$args['sep'] = ' &raquo; ';
    return $args;
}

As you can see I added a new class called breadcrumbwrapper to the existing breadcrumb class. I also modified the separator to display a &raquo;

And now for the CSS used in the Malcolm child theme.

.breadcrumbwrapper {
	background-color: #1b1b1b; 
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1f1f1f), to(#1b1b1b));
	background-image: -webkit-linear-gradient(top, #1f1f1f, #1b1b1b); 
	background-image:    -moz-linear-gradient(top, #1f1f1f, #1b1b1b);
	background-image:     -ms-linear-gradient(top, #1f1f1f, #1b1b1b);
	background-image:      -o-linear-gradient(top, #1f1f1f, #1b1b1b);
	border-bottom: solid 1px #333;
}

Now the styling I went with in the code block above isn’t important. I chose a background colour, used a gradient and added a bottom border. But as I said it’s not important, it’s merely a wrapper.

The important part is centering the breadcrumb within the breadcrumbwrapper. Here is what I did,

.breadcrumb {
	margin: 0 auto;
	max-width: 1160px;
	padding: 20px 0;
}

The first line margin: 0 auto; centers the breadcrumb nicely within its wrapper. On the second line I added max-width: 1160px; because the Malcolm child theme uses a max-width of 1160px for both .site-inner and .wrap I then added a top and bottom padding of 20px.

That’s all there is to it. You can see it in action by visiting the Malcolm demo site and clicking on a post.

If you’re interested there are quite a few arguments that can be used with the Genesis breadcrumbs function. Have a look at the link below.

http://my.studiopress.com/snippets/breadcrumbs/

The post Tutorial: Full Width Breadcrumbs appeared first on WPCanada.

Planet WordPress Canada theme by WPDesigner, syndication by Pipes, FeedWordPress, and Feedburner, powered by ?