The post UltraSeven – A WooCommerce theme for WordPress is coming soon appeared first on cssigniter.com.

The post Pintores – A Pinterest-like theme is coming soon appeared first on cssigniter.com.

Just a quick post to let you know that we’ve just released an update to our newest theme “Mozzy”.

The theme now includes a frontpage template with a fixed width slider, for people that find the full width an overkill, and also an option to have that fixed width slider as your portfolio template. That means Mozzy now comes with 2 frontpage templates and 3 (three) portfolio templates to choose from!

You can check out Mozzy here: http://www.cssigniter.com/demo2/?theme=mozzy

The post Mozzy updates to v1.1 appeared first on cssigniter.com.

I’m not famous for my icon design skills, but hey, it serves its purpose for this tutorial…

Note that AnastisBook originally appeared on the bottom of the screen, but I rearranged it by drag-and-drop. Here is a screenshot of the widget in action (featuring our latest theme, Mozzy):

Yeah, that’s it. I made the icons darker so that readers would know which ones I’ve added. Sounds legit

Adding new icon sets

Adding new sets of icons is quire easy really. The process is more or less the same, as with adding any other additional icons, just a few lines of code more. There are some issues that you need to consider (that also apply when adding individual icons) which I will mention at the end of the tutorial, but as long as you have consistent icons sets, you’ll be fine.

Anyway, I decided to create a textual icon set for this tutorial, in color (default) and in greyscale, each available in one size, 32×32. The first step, is to create the folder structure that the icons will be stored. Inside the my-socials-ignited/images/ folder, I created a folder named text. Inside the text folder, I created a folder named default and another one named greyscale. Inside each of those two folders, I created a folder named 32 and within these folders I placed the icons I prepared.

What the Textual icons structure looks like

You might have noticed that I’m including an icon for the imaginary AnastisBook social website (service), as I’m still extending code from the previous part of the tutorial. If you don’t need custom services, you can just skip the my_icons_add_services() function, hooked on the cisiw_services filter.

The first thing you absolutely need, is let Socials Ignited know of any new paths to look for icons. We did this previously with the my_icons_lookup_paths() functions hooked on the cisiw_lookup_paths filter, so make sure you have that in your code.

The icon set information array

Then, we need to let the plugin know of our new icon set. We need to pass a structured array containing information about our set, by hooking onto the cisiw_icon_sets filter. Let’s take a look on how the array should be formed:

$my_sets = array(
	// First level is the set's name.
	'text' => array(
		// Second level are the available variations
		'default' => array(
			// Third level are the available sizes for the specific variation.
			// If we had more sizes, the next line would be like
			// '32', '48', '64'
			'32'
		),
		'greyscale' => array( '32' )
	)
);

Not really complicated, right? If you did kept your promise to have an understanding of PHP’s arrays, then the above shouldn’t make you sweat. $my_sets is just an array of key-value pairs. The key is the icon set’s slug, i.e. the same name as the folder inside the /images/ folder, and the value is an array of variations. If needed, you can have multiple sets defined in the $my_sets array by just adding more key-value pairs.

Now, the set’s value as mentioned before, is an array of variations. It’s a key-value array itself as well, where the key is the variation’s slug, and the value is an array of sizes. The variation’s key must (once again) match the folder name within the icon set’s folder, i.e. default and greyscale.

Finally, the sizes array is a simple array of strings, that (again) match the folder names of the available sizes.

Now, we need to merge the $my_sets array with the Socials Igniter array that holds all registered icon sets. This can be done by hooking onto the cisiw_icon_sets filter, which passes us the registration array.

add_filter('cisiw_icon_sets', 'my_icons_sets');
function my_icons_sets($sets)
{
	$my_sets = array(
		// First level is the set's name.
		'text' => array(
			// Second level are the available variations
			'default' => array(
				// Third level are the available sizes for the specific variation.
				// If we had more sizes, the next line would be like
				// '32', '48', '64'
				'32'
			),
			'greyscale' => array( '32' )
		)
	);

	$sets = array_merge($sets, $my_sets);
	return $sets;
}

Here, $sets holds the registered icon sets. We could have added our set’s info directly to the $sets array, and we could also unset() some sets if we wanted to. In essense, $my_sets is a subset of $sets and the indirect merging of the two is what I consider best practice. You can do it in any way you want, as long as you return a well formed array (structured like $my_sets above).

The labels array

The structured information array we added above is the most critical and complex piece of information that Socials Igniter need in order to know what icons we have available to show. It’s not the only piece of information though.

If you were in hurry to try out your new set, you should probably saw something like this:

Screenshot of what your screen will look like if you are not patient enough

That’s because you need to let Socials Ignited know of a label for your icon set. I mean, text might suggest something, but Textual would be a better word for the set, don’t you agree? Plus, what about your Bulgarian users? You should take care of translating it to текст, right?

So, how do you provide a label for your set? Easy peasy. Like everything, there is a filter for that. It’s named cisiw_icon_set_names and it passes a key-value array, where the key is the icon set’s slug and the value is the actual label. You’ve seen the pattern before, so I’ll just let the code talk for itself.

add_filter('cisiw_icon_set_names', 'my_icons_set_names');
function my_icons_set_names($names)
{
	$my_names = array(
		'text' => 'Textual'
	);

	$names = array_merge($names, $my_names);
	return $names;
}

And a translatable version of it:

add_filter('cisiw_icon_set_names', 'my_icons_set_names');
function my_icons_set_names($names)
{
	$my_names = array(
		'text' => _x('Textual', 'icons set name', 'plugin_domain')
	);

	$names = array_merge($names, $my_names);
	return $names;
}

Of course, you could have added more entries if you had more sets, or even change the label of a set but manipulating the $names array before the merge. For example, to rename the round set’s label from Round to Circle:

$names['round'] = _x('Circle', 'icons set name', 'plugin_domain');

That should be it. If you refresh your Socials Ignited settings page and/or the widget, you should see the icon set available for your use, without any warnings. Note that on the screenshot I rearranged the social networks.

That’s what you should see if you did things right

See that # that I’ve entered on some of the social networks? It can be used as a dummy URL, pointing to the top of the current page, so, no tricks here. Instead of actually entering my URLs, I just used that legitimate value.

And this is the actual output of the plugin. Note how AddThis and Apple have a URL, but since there are no icons for them, are completely omitted.

You wouldn’t hire me for icon design, would you? Thankfully we have Helen for that.

Common issues

You might have noticed how the settings screen is able to only preview one color variation out of each icon’s set. The variation used is the first one defined for each set, so, in the Textual icons’ case, the default was used. If I swapped their declaration order in the array, then the greyscale would have been used for the preview. This may lead to substantial confusion, especially if the variations have inconsistent icon completeness. For example, you might have a Textual Apple icon for greyscale, but not a colored one, so there would be no icon to show in the settings screen. The best solution for that is to always be consistent with your icons coverage. All variations and sizes combinations should have the same icons present. If not possible, you’d better leave out some variations or sizes completely.

Similarly, the first size defined (of the first color variation) is the one used for previewing. But the settings screen will stretch/squeeze the icon to 32×32 no matter what, so don’t scratch your head if you see something you don’t like. You can either leave it as is, or just place first the closest matching size (if you have multiple sizes of course).

Internationalization

There are two instances where internationalization may be applicable. On the social website name and on the icons set name. In particular, the following two pieces of code can be modified from:

	$my_services = array(
		'anastisbook' => 'AnastisBook'
	);

	$my_names = array(
		'text' => 'Textual'
	);

to:

	$my_services = array(
		'anastisbook' => _x('AnastisBook', 'website name', 'mycisiw')
	);

	$my_names = array(
		'text' => _x('Textual', 'icons set name', 'mycisiw')
	);

While I previously used plugin_domain as the gettext domain, I’m changing it to mycisiw as I think is more appropriate.

Now, we need a folder where we will be storing our language files (we don’t want them scattered all around, do we?), let’s call it languages, and a line of code that loads the translation files.

At the very top of your my-socials-ignited.php file, right after the Plugin information header, add this line:

load_plugin_textdomain('mycisiw', false, dirname(plugin_basename(__FILE__)).'/languages/');

So the top of your file should now be looking like this:

<?php
/*
Plugin Name: My Icons for Socials Ignited
Description: My own icons for the CSSIgniter's Socials Ignited widget
Version: 1.0
License: GPL
Plugin URI: http://www.mydomain.com/my-socials-ignited-icons
Author: Me, myself and I
Author URI: http://www.mydomain.com/
*/
?>
<?php
load_plugin_textdomain('mycisiw', false, dirname(plugin_basename(__FILE__)).'/languages/');

Note how the first parameter, mycisiw matches the domain that we replaced on the labels before. And also note that /languages/ strings that should match the folder created. You can change both of these, as long as you are consistent with your changes.

Now, all you need to do, is generate you .pot or .po or .mo files and place them in the languages folder. If you are interested to learn more about creating language files, you can check-out the WordPress – Poedit: Translation Secrets post that I’ve written.

Putting it all together

All in all, you should have end up with one .php file and two folders, one for the images and one for the languages.

Your my-socials-ignited.php file should be looking something like this by now:

<?php
/*
Plugin Name: My Icons for Socials Ignited
Description: My own icons for the CSSIgniter's Socials Ignited widget
Version: 1.0
License: GPL
Plugin URI: http://www.mydomain.com/my-socials-ignited-icons
Author: Me, myself and I
Author URI: http://www.mydomain.com/
*/
?>
<?php
load_plugin_textdomain('mycisiw', false, dirname(plugin_basename(__FILE__)).'/languages/');

add_filter('cisiw_services', 'my_icons_add_services');
function my_icons_add_services($services)
{
	$my_services = array(
		'anastisbook' => _x('AnastisBook', 'website name', 'mycisiw')
	);

	$services = array_merge($services, $my_services);
	return $services;
}

add_filter('cisiw_icon_sets', 'my_icons_sets');
function my_icons_sets($sets)
{
	$my_sets = array(
		// First level is the set's name.
		'text' => array(
			// Second level are the available variations
			'default' => array(
				// Third level are the available sizes for the specific variation.
				// If we had more sizes, the next line would be like
				// '32', '48', '64'
				'32'
			),
			'greyscale' => array( '32' )
		)
	);

	$sets = array_merge($sets, $my_sets);
	return $sets;
}

add_filter('cisiw_icon_set_names', 'my_icons_set_names');
function my_icons_set_names($names)
{
	$my_names = array(
		'text' => _x('Textual', 'icons set name', 'mycisiw')
	);

	$names = array_merge($names, $my_names);
	return $names;
}

add_filter('cisiw_lookup_paths', 'my_icons_lookup_paths');
function my_icons_lookup_paths($paths)
{
	$paths['dir'][] = plugin_dir_path( __FILE__ );
	$paths['url'][] = plugin_dir_url( __FILE__ );

	return $paths;
}

?>

You can get the whole plugin, including the icons used in this tutorial and sample language files, by downloading the my-socials-ignited tutorial files.

I hope you enjoyed reading this tutorial as much I enjoyed writing it. Please let me know of your thoughts, in the comments section below.

The post Extending the Socials Ignited plugin – part 2 appeared first on cssigniter.com.

Well, I promise to show you how, as long as you promise to know some PHP, especially how to manipulate arrays. The rest of the code (hooking onto WordPress filters) is pretty much self explanatory or can be copied verbatim, and even if you don’t fully understand how filters work, you can still get something usable. Of course, the more you know allows you to go one step further…

Prerequisites

• A WordPress installation (duh!)
• The latest Socials Ignited plugin (v1.1 at the time of writting)
• A reason to extend the plugin, i.e. some new icons (must be .png files)

v1.1 of the plugin introduced filters for you to hook and extend the list of services and icon sets, so make sure you have at least this version for the rest of the tutorial to work.

Creating a new plugin

So, the first thing we need to do is to create a new plugin. There, we will write the code to manipulate the Socials Ignited plugin, and we will store our new icons, so that they won’t be deleted on a future plugin update.

So, go to your wp-content/plugins directory and create a new folder, named my-socials-ignited

In there create new file, named my-socials-ignited.php and paste in it the following code:

<?php
/*
Plugin Name: My Icons for Socials Ignited
Description: My own icons for the CSSIgniter's Socials Ignited widget
Version: 1.0
License: GPL
Plugin URI: http://www.mydomain.com/my-socials-ignited-icons
Author: Me, myself and I
Author URI: http://www.mydomain.com/
*/
?>
<?php

// Rest of the code goes here...

?>

This is a special header that gives information to WordPress about our little plugin. The minimum required is the first line, Plugin Name: as without it WordPress will never recognize the file as a plugin. The rest of the lines are used by WordPress to display the appropriate information in the Plugins management screen.

The rest of the code of this tutorial should be placed where the // Rest of the code goes here… line is.

Icon sets, variations, sizes, paths, oh my…

If you used the Socials Ignited widget, you must have noticed that you can choose among 2 icon sets, Square and Round. The Round set has two color variations, dark and light, and each variation is available in a 32×32 size.

The Square icon set on the other hand, is only available in one color, default, but comes in three different sizes, 32×32, 48×48 and 64×64.

This is what this hierarchy looks like organized in folders:

Simple stuff, right?

These are all stored inside the plugins folder, inside an /images/ directory. In order to add a new icon, we have to mimic this structure.

Adding a missing icon

So, let’s suppose you really like and use the Round – Dark set of icons, 32×32 in size. But the AddThis icon is missing. Let’s try and add it, shall we?

Y U NO HAV ADDTHIZ IKON?

Let’s go back to our plugin, and create an images folder. In there, create a round folder. In there, create a dark folder. In there create a 32 folder. In there, place your icon. You should have something like this:

What your plugin’s file structure should look like at this point.

Note the icon’s file name. It’s like a slug version of the service’s name, followed by the .png extension. Since there are some exceptions, and some services even have alterative icons, you can see a full list of supported filenames by opening/editing socials-ignited/socials-ignited.php lines 57-114.

They are in the form

'addthis' => _x('AddThis', 'website name', 'cisiw'),

where the left hand side, i.e. addthis is the name that should be used as a file name.

Here is a list of currently supported names/icons:

addthis, amazon, amazon_alt, apple, apple_alt, blogger, behance, delicious, designfloat, designbump, deviantart, digg, dopplr, dribbble, email, evernote, facebook, flickr, forrst, friendfeed, github, github_alt, gplus, grooveshark, gtalk, instagram, lastfm, linkedin, myspace, netvibes, newsvine, orkut, paypal, picasa, pinterest, posterous, reddit, rss, sharethis, skype, soundcloud, spotify, stumble, technorati, tumblr, twitter, twitter_alt, viddler, vimeo, virb, virb_alt, yahoo, yahoo_alt, youtube, youtube_alt, windows, wordpress, zerply

Back to adding our new icon. You’ve created the folders, copied the icon in the right place with the right name, you were probably on a hurry and went ahead an refresh the Social Igniter’s settings page, but you didn’t see the new icon. What went wrong?

Well, you need to tell our plugin that it needs to look for icons from some other locations as well, by hooking on the cisiw_lookup_paths filter. Paste this in your plugin:

add_filter('cisiw_lookup_paths', 'my_icons_lookup_paths');
function my_icons_lookup_paths($paths)
{
    $paths['dir'][] = plugin_dir_path( __FILE__ );
    $paths['url'][] = plugin_dir_url( __FILE__ );

    return $paths;
}

The cisiw_lookup_paths filter passes a two-element array to our hooked function. The $paths['dir'] element is itself an array containing a list of local paths that the plugin uses in order to know where to look for icons, and whether they exist or not. The $paths['url'] element is again an array, only this time it contains a list of URLs that are used to output the icons’ URLs. Both local and URL paths in the $paths array need to be absolute, and the rest of the structure is created automatically. You do remember what we said about the /images/set/variation/size/icon.png structure, don’t you?

Make sure you set both paths, as their (implied) numeric indexes must match in order to properly determine and handle icons.

Save your file, and refresh the Socials Ignited settings page. You should now see the new icon:

Hooray!

That’s it really. Assuming you have entered a URL for the AddThis service, and you have you widget showing the Round – Dark – 32×32 icons, you should see the AddThis icon among the others.

Adding a new service

So, our list of 50+ social networks is not enough, and you want to add a one we missed (or we didn’t care to add). How do you do it? It’s quite easy actually. What you’ve done so far with the plugin serves as the basis for adding icons to ANY service (social network).

Let’s say that we want to add an icon for the imaginary social network that I have built, AnastisBook. We, again, want to add the icon in the Round – Dark – 32×32 icon set. Go on and rename your icon to anastisbook.png and place it in my-socials-ignited/images/round/dark/32/anastisbook.png alongside the addthis.png icon (if you opted to add it).

Of course, it won’t show up just yet, as Socials Ignited doesn’t know anything about AnastisBook. What we need to do, is hook onto the cisiw_services filter and add our service to the list of the allowed ones.

add_filter('cisiw_services', 'my_icons_add_services');
function my_icons_add_services($services)
{
    $my_services = array(
        'anastisbook' => 'AnastisBook'
    );

    $services = array_merge($services, $my_services);
    return $services;
}

The $services array contains a list of key-value entries, where the key is the service’s slug name, and the value is the actual name that will be printed on the settings page. Make sure the key contains only letters, numbers, dashes and underscores, as it will map to the filename of the icon. You DON’T want to have illegal character issues with the filesystem.

Anyway, we create a new array, $my_services and we add an element with key ‘anastisbook‘ and value ‘AnastisBook‘. The value can also be internationalized like __(‘AnastisBook’, ‘plugin_domain’) if you put some more effort into the plugin.

Then, we merge the original $services array with our own $my_services and we return the resulting array. AnastisBook should now be in the list of available services.

If you need to clear things up a bit, you can even remove some services. All you need to do is unset() a service from the original $services array before merging. For example, in order to remove the Amazon service, you’d have:

add_filter('cisiw_services', 'my_icons_add_services');
function my_icons_add_services($services)
{
    $my_services = array(
        'anastisbook' => 'AnastisBook'
    );

    unset($services['amazon']);

    $services = array_merge($services, $my_services);
    return $services;
}

End of part 1

This concludes the first part of the tutorial. In the next (and probably last) part, I’ll show you how to add your own icon sets, variations, as well as explain some limitation and issues that you may encounter.

Until then, happy coding!

[UPDATE 4 Jan. 2012] Part 2 is now available!

The post Extending the Socials Ignited plugin – part 1 appeared first on cssigniter.com.

The post New Theme Coming Soon: Mozzy appeared first on cssigniter.com.

just a quick note to let you know that Pinfinity was just updated to version 1.4

What’s new is:

• Some issues with WordPress v3.5 have been resolved.
• The “Love it” feature now works for logged in users as expected. Loved articles are saved with each user’s account.
• Registered users and visitors can “unlove” a post.
• Added a page template to show the current user’s loved posts.
• Added a page template to show the most loved posts first.

Have fun!

The post Pinfinity 1.4 appeared first on cssigniter.com.

This course is aimed at those who are just starting out with WordPress and probably are not familiar with the Dashboard. While we provide written documentation for all of our themes, there are members who ask questions like “Yes, i did read the documentation and it clearly states that i have to assign XYZ template to a page, but how do i create this page and how do i assign a template to it?”

Well, now they’ll be able to setup WordPress and learn about the Dashboard in 3.5 hours!

Sample video: The famous 5 minute install

Here’s the outline of the course:

WordPress Overview

• What is WordPress
• WordPress.com vs. WordPress.org
• Software Needed for Installation
• Move WordPress Software to Server
• Configure the MySQL Database
• 5-minute Install
• Configure WordPress Manually

WordPress Administration

• Touring the Dashboard
• WordPress Toolbar
• Editing User Profiles
• Using Gravatar
• Managing Users
• Site Settings

Creating Posts

• Creating a New Post
• ext Formatting Options
• Creating and Editing Hyperlinks
• Insert Images
• Working with an Image Gallery
• Editing Images
• Working with Media from External Sources
• Categories and Tags
• Managing Posts, Categories, and Tags
• Publishing a Post

Creating Pages

• Creating a Page
• Organizing Pages
• Page Templates
• Using a Static Page as a Home Page

Customize Default Theme and Managing Media

• Customizing the Background
• Customizing the Header
• Showcase Template
• Theme Options
• Custom Menus
• Managing Media
• Understanding Widgets
• Theme Customize Window

Extending WordPress with Plugins and Themes

• Understanding Plugins
• Installing Plugins
• Using Plugins
• Useful Plugins
• Installing and Activating Themes
• Installing Premium Themes

WordPress Settings

• Press This
• Managing Comments
• Updating WordPress
• What’s in the Update?
• Conclusion

The post Video Series: WordPress fundamentals appeared first on cssigniter.com.

Want! How do i enter?

Use the widget at the bottom of this page. You gain entries buy following us on Twitter, like us on Facebook, leave a comment, tweet about the giveaway (you can do it once per day) and follow us on Pinterest.

Great! What do i get?

You’ll get an annual subscription to our themes catalog. That means that you will be able to download our current themes (35 of them) plus new themes for a whole year (24 themes). A total of 59 themes.

Can’t wait! When am i going to put my hands on them?

If you are one of the 31 lucky ones, you’ll receive a warm introduction through email on January 1st, 2013

Game on again!

a Rafflecopter giveaway

This giveaway is now over! Winners have received an email with instructions on how to get their subscriptions! Congratulations to everyone who won one!

The post Xmas Giveaway appeared first on cssigniter.com.

During the month of November each year, Movember asks men across the world to grow a moustache with the aim of raising vital funds and awareness for men’s health issues. Movember moustaches were first grown in Australia back in 2003 and since that time word of Movember and its men’s health messages have spread across the globe

So all you have to do is spread the word, donate if you wish and in the meantime download our theme and build an amazing new website with it. For more information on how you can participate check out the movement’s website.

Giveaway ended! Thank you for your support

For support issues concerning Mustache, don’t hesitate to post here in the comments’ section and we’ll be happy to help.

Spread the love!

The post Movember: Grab our Mustache theme for free and help the cause! appeared first on cssigniter.com.