[WordPress Canada]Custom Author Box With Genericons

In case you haven’t noticed I absolutely love the Genesis framework. It’s an awesome piece of software packed with oodles of features not the least of which is an author box that includes a brief summary about the author and a Gravatar image. You can choose to display the Genesis author box on single post pages, the author archive page or both.

Having said that, I wanted something a little bit different. There is nothing wrong with the built-in Genesis author box – it works just fine. But I’m the type of person who loves to tinker and break stuff. As such I wanted to see if I could come up with something just a tad bit different so off to Google I went. It didn’t take long for me to find exactly what I was looking for.

The end result is a completely custom author box complete with Genericons which are an icon font. You can see a live example of it in action at the end of this very post. Or you can check out the screen capture below.

custom author box with Genericons

Now you may be asking why I elected to use Genericons especially when I showed you how to integrate Dashicons in the previous post. The only reason for that is because I wanted to include a link to my GitHub profile but couldn’t find the icon font for it at Dashicons. Genericons has a GitHub icon font so I went that route. But you could certainly use Dashicons if you wanted to as they do have the appropriate icon fonts for some of the popular social media sites like Twitter etc.

Okay, enough of the small talk. Let’s get started.

This entire tutorial is based on code written by Vivek of WPStuffs which in turn is based on code written by Chris Wiegman. Chris’s original code included text links to social media profiles. Vivek modified it by adding images to the links. I further modified it by dropping the images in favour of an icon font. The other modification I made was dropping get_the_author_id() for get_the_author_meta( 'ID' ) as the former is now deprecated.

Grab the Genericons

First step is to head on over to the Genericons website and download the ZIP file. At the time of this writing it is v3.0.3. Once you’ve downloaded the ZIP extract the contents. You’ll end up with a folder called genericons. Inside that folder is another folder called font. That’s the one we want.

Upload the font folder to your child theme’s folder. The structure should look something similar to this,

/themes
- YourChildTheme
— font
— images
—– various child theme files

Next, add the following to the top of the child theme’s style sheet …

/*
Font Import
------------------------------------------------------------------------ */

@font-face {
    font-family: 'Genericons';
    src: url('font/genericons-regular-webfont.eot');
    src: url('font/genericons-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/genericons-regular-webfont.woff') format('woff'),
         url('font/genericons-regular-webfont.ttf') format('truetype'),
         url('font/genericons-regular-webfont.svg#genericonsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Alright, we’re done with this for now.

Add Profile Fields to Your Profile Page

If you navigate to Users > Your Profile you’ll see a few profile fields under Contact Info such as E-mail, Website etc. What we’re going to do is add a few more profile fields so that we can add some links to various social media sites.

For the purposes of this tutorial we’re only going to add links to Twitter, GitHub and Google+ although you can add as many as you want.

We do so via the child theme’s functions.php file. Using your favourite FTP client download the child theme’s functions.php file to your desktop and make a backup of it. Now open it up with a plain text editor and add the following …

//* Add fields to profile page
function change_contact_info($contactmethods) {
	$contactmethods['twitter'] = 'Twitter Username';
	$contactmethods['github'] = 'GitHub Username';
	$contactmethods['gplus'] = 'Google+ Username';
	return $contactmethods;
}
add_filter( 'user_contactmethods','change_contact_info', 10, 1 );

What we have just done is add 3 new profile fields to your Profile page. Check your Profile page to make sure they are there. If they are then continue on. If not go back and make sure you did everything correctly.

Replace Genesis Author Box

Our next step is to replace the Genesis author box with our custom author box. Add the following to your child theme’s functions.php file …

//* Replace Genesis author box with custom author box on single post page
remove_action( 'genesis_after_entry', 'genesis_do_author_box_single', 8 );
add_action( 'genesis_after_entry', 'theme_author_box', 8 );

//* Replace Genesis author box with custom author box on author archive page
remove_action( 'genesis_before_loop', 'genesis_do_author_box_archive', 15 );
add_action( 'genesis_before_loop', 'theme_author_box_archive', 15 );

What we have done is remove the Genesis author box from both single post pages and the author archive page (yikes!) and replaced it with our custom author box which we’ll actually build next.

The following also goes into the child theme’s functions.php file …

Note: while copy/paste from the normal code blocks is fine do not copy/paste directly from the Gist above. Use the view raw link.

We’re finished here so you can put the functions.php file away.

The CSS

Let’s head back over to the child theme’s style sheet.

Before we add the style rules I want to show you another screen capture of the custom author box, this time outlining the various elements so that you better understand the CSS.

custom author box elements

The following goes into the child theme’s style.css file …

/* Custom Author Box
--------------------------------------------- */

.postauthor {
	background-color: #fff;
	border: 1px solid #e1e1e1;
	border-radius: 3px;
	margin-top: 15px;
	overflow: hidden;
	padding: 32px;
}

.postauthor img {
	display: block;
	float: left;
	height: 100px;
	margin-right: 15px;
	width: 100px;
}

.postauthor h4 {
	color: #444;
	font-size: 20px;
	margin-bottom: 0px;
	margin-left: 105px;
	padding: 0 0 8px;
}

.postauthor p {
	color: #666;
	font-size: 16px;
	line-height: 27px;
	margin-bottom: 0;
}

.postauthor-bottom {
	margin-bottom: 20px;
	overflow: hidden;
	padding: 10px 20px 0 20px;
}

.postauthor-bottom span {
	font-weight: bold;
	font-size: 14px;
	margin: 0 10px 0 0;
}

.postauthor-bottom .author-gh::before,
.postauthor-bottom .author-gplus::before,
.postauthor-bottom .author-twitter::before {
	color: #666; 
	display: inline-block;
	font: normal 16px/1 'Genericons';
	margin-right: 5px;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
}

.postauthor-bottom .author-gh::before {
	content: '\f200';
}

.postauthor-bottom .author-gplus::before {
	content: '\f206';
}

.postauthor-bottom .author-twitter::before {
	content: '\f202';
}

.postauthor-bottom .author-gh,
.postauthor-bottom .author-gplus,
.postauthor-bottom .author-twitter {
	color: #666;
	font-size: 14px;
	margin: 0 10px 0 0;
	padding: 0 0 0 25px;
}

.postauthor-bottom .author-gh:hover,
.postauthor-bottom .author-gplus:hover,
.postauthor-bottom .author-twitter:hover {
	color: #a90000;
}

.postauthor-bottom .author-gh:hover::before,
.postauthor-bottom .author-gplus:hover::before,
.postauthor-bottom .author-twitter:hover::before {
	color: #a90000;
}

By referring to the screen capture you should be able to easier see what the CSS is doing.

Keep in mind the above CSS was written specifically for my theme. I included it so that you can use it as a starting point. You can customize it until the cows come home.

An important point: when adjusting the font size of the Genericons icon font it is best to use multiples of 16. At least that is what the official documentation says. For example, it is currently set by this rule …

font: normal 16px/1 'Genericons';

If you wanted to increase the size you would have to go up to 32 as such …

font: normal 32px/1 'Genericons';

According to the documentation the icon fonts may look fuzzy by using off-numbers although I haven’t personally seen it. Just something to keep in mind.

As I said earlier, you can add whatever and how many profile fields you want. Just study the code under the heading Add Profile Fields to Your Profile Page and the Gist under the heading Replace Genesis Author Box and follow the same format.

One more thing. When filling out your new profile fields you need only enter your username rather than the complete URL. For example my Twitter profile is https://twitter.com/wpcanada but I enter just the wpcanada part.

For Google+ enter +YourUserName if you are using their vanity URLs. For example, my Google+ profile is https://plus.google.com/+LenKutchma so I enter +LenKutchma. (minus the period) If you’re still using the old Google+ profile URLs it will look something like this https://plus.google.com/117573566699941542724 Just enter the number into the profile field.

Now go forth and build those custom author boxes!

Update: 29 March 2014
I’ve updated the CSS on this site for the custom author box. If you want to, check view source to compare the CSS in my style sheet to the CSS I posted above. The pertinent part starts at about Line 1850.

The post Custom Author Box With Genericons appeared first on WPCanada.

[WordPress Canada]Using Dashicons With Genesis

When I released the Malcolm and Marcus child themes a couple of weeks ago one of the features I incorporated into both of them was Dashicon support for .entry-meta items as well as the Twitter and RSS links in the primary navigation menu rather than go with images.

So what are Dashicons?

I’m glad you asked! They are an icon font. I won’t go into detail here about the advantages of using an icon font over an image as that has been covered numerous times elsewhere. However the reason why I chose to go with Dashicons over another icon font is because WordPress already includes built-in support for them.

The image below is a screen capture of the Malcolm child theme.

dashicons in use

I’ll walk you through the process of how I added them to both Malcolm and Marcus.

Enqueue the Dashicon Icon Font

First, we need to enqueue the dashicon style sheet by using wp_enqueue_style. Add the following to your child theme’s functions.php file …

//* Enqueue Dashicons
add_action( 'wp_enqueue_scripts', 'theme-prefix_enqueue_dashicons' );
function theme-prefix_enqueue_dashicons() {
	wp_enqueue_style( 'theme-prefix-dashicons-style', get_stylesheet_directory_uri(), array('dashicons'), '1.0' );
}

Make sure to change the 3 instances of theme-prefix to your actual child theme name.

Now, if you have seen either Malcolm’s or Marcus’s functions.php file you’ll notice the function above is slightly different than the one used in those themes. The only reason for that is I’m using several css and javascript files in those themes so I combined it all into one function.

Adding the CSS

In this section I’ll assume you want to target all of the .entry-meta items, those being,

  • .entry-author
  • .entry-categories
  • .entry-comments-link
  • .entry-tags
  • .entry-time

Just leave out the ones you don’t want.

Okay, add the following to your child theme’s style.css file …

.entry-author::before,
.entry-categories::before,
.entry-comments-link::before,
.entry-tags::before,
.entry-time::before {
	color: #666; 
	display: inline-block;
	font: normal 20px/1 'dashicons';
	margin-right: 5px;
	vertical-align: top;
	-webkit-font-smoothing: antialiased;
}

Everything above can be tweaked to your own specs of course and is fairly straightforward. If you decide to change the font size however pay attention to the format of the rule …

font: normal 20px/1 'dashicons';

Let’s say you wanted to change the font size to 25px. You would write it as such …

font: normal 25px/1 'dashicons';

Now let’s add the actual icon fonts themselves. We do so by using the content: "" property. The following also goes into the child theme’s style sheet.

.entry-author::before {
	content: "\f110"; /* dashicons-admin-users */
}

.entry-categories::before {
	content: "\f318"; /* dashicons-category */
}

.entry-comments-link::before {
	content: "\f101"; /* dashicons-admin-comments */
}

.entry-tags::before {
	content: "\f323"; /* dashicons-tag */
}

.entry-time::before {
	content: "\f145"; /* dashicons-calendar */
}

In the above example I included comments detailing the name of each icon font.

Maybe add a little padding to the .entry-header .entry-meta items?

.entry-author,
.entry-categories,
.entry-time {
	padding-right: 15px;
}

Again, adjust that to your liking.

The next step is optional. If you wish to display .entry-categories and .entry-tags on separate lines (I think it looks better that way) add this …

.entry-categories,
.entry-tags {
	display: block;
}

If you really wanted to get fancy you could also change the colour of the icon font hover state. Can you do that? Yes of course, they are simply fonts! You can style them exactly the way you style regular fonts.

Let’s say you wanted to change the .entry-author icon font hover state colour. As you can see above the normal state has already been defined as color: #666; Let’s change it to a shade of red …

.entry-author:hover::before {
    color: #a90000;
}

You can change the colour to anything you want for each of the items although you would probably want to match your theme’s regular link hover colour.

Moving on …

I mentioned earlier that I also used Dashicons for the RSS and Twitter links that appear in the primary navigation menu whereas many other Genesis child themes use images.

This is the CSS taken directly from the Malcolm child theme …

.genesis-nav-menu > .rss a::before,
.genesis-nav-menu > .twitter::before {
	color: #999;
	display: inline-block;
	font: normal 20px/1 'dashicons';
	margin-right: 5px;
	vertical-align: top;
	-webkit-font-smoothing: antialiased;
}

.genesis-nav-menu > .rss a::before {
	content: "\f303";
}

.genesis-nav-menu > .twitter::before {
	content: "\f301";
}

.genesis-nav-menu > .rss a:hover::before,
.genesis-nav-menu > .twitter:hover::before {
	color: #fff; /* using hover colour because of primary nav dark background */
}

You can change the above to your heart’s content. In fact, because it was written for Malcolm you may have to but it should get you started.

Further reading:
Dashicons website
Dashicons on GitHub

The post Using Dashicons With Genesis appeared first on WPCanada.

[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!

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