Archive

Archive for March, 2012

Weekly Web Design and Development Inspiration – N.132

March 31st, 2012 Comments off

This is our weekly selection of our favorite web designs from the past week, thanks to everybody for their recommendations. Feel free to comment and let us know what you think.

Have you tried StylesInspiration yet? It is our web design showcase that aims to not only showcase the best and most innovative web design styles currently available, it also aims to give you a visual overview of current web design trends and highlight the latest in innovative web technologies. You’ll love it :)

Inception Explained

Inception Explained

Pulpfingers

Pulpfingers

Dearest Nature

Dearest Nature

Luhse Tea

Luhse Tea

Marcus Thomas

Marcus Thomas

COOP

COOP

Discover Bagigia

Discover Bagigia

You may like to browse our previous Weekly Inspirations

Weekly Web Design and Development Inspiration Archives →



Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/ARNdqgljmzw/

Categories: Web development Tags:

Best Practices for Preventing BuddyPress Spam User Registrations

March 31st, 2012 Comments off

The BuddyPress plugin turns any WordPress installation into a rich social networking site complete with forums, friend requests, and … countless numbers of fake bot users that will comment spam you to death unless you protect your site. Although you probably installed BuddyPress to allow more engagement and interaction among your visitors in the hopes of creating a thriving community, you will soon rue the day you installed it unless you take precautions to prevent fake users.

A disclaimer: there cannot truly be a definitive guide to stopping user-agents and spam bots, as the methods of attack are ever-evolving. As soon as a solution to block them becomes widespread, new threats arise to bypass these safeguards. Nonetheless, here are a few best practices that will safeguard most BuddyPress installations from spam bots while still allowing legitimate visitors to comment and register.


Remove the Default Footer Text

Most spammers do not specifically target BuddyPress installations through manual search and registrations. That is a lot of work, and they prefer to release their bots to search for specific criteria that indicate BuddyPress installations, find default registration pages, and sign up accounts by the dozens or even hundreds.

The first level of security is to change the footer text to remove mentions of WordPress and BuddyPress. Spammers target the words “proudly powered by WordPress and BuddyPress” in search engines to find sites they can compromise. See for yourself by performing the following search in Google: “inurl:/register/ Account Details Proudly powered by WordPress and BuddyPress” and see how many targetable sites show up. The search string gives us a clue to another fix that we we’ll address in the next section, but first let’s fix the BuddyPress footer file.

The location of the code will vary based on the theme you are using, but you are looking for something like:

WordPress and BuddyPress.', 'BuddyPress' ), 'http://WordPress.org', 'http://BuddyPress.org' ); ?>

Delete this.

You might have to dig a little to find this code. As an example, in Themekraft’s popular Custom Community theme, you would navigate to theme-generator.php found in your “wp-content -> themes -> custom-community -> core -> includes -> theme-generator” folder and delete the following:

WordPress and BuddyPress. ', 'cc' ), bloginfo('name') ); ?>

Note: many themes require their own links be left alone as a condition for free use of the theme, so make sure you do not delete any of their links without checking the terms of use.

“Spammers target the words ‘proudly powered by WordPress and BuddyPress’ in search engines to find sites they can compromise.”


Rename the Default Registration Slug

In BuddyPress, the default URL for the registration page is “http:/yoursitedomain.com/register”. This is why spambots include the “insite:register” when performing the search described in the above section. Make it harder for them to find your site by easily changing the default slug for BuddyPress in your wp-config.php file. Simply insert the following anywhere above the line that says /* That's all, stop editing! Happy blogging. */ towards the bottom of the file:

define( "BP_REGISTER_SLUG", "your-new-slug" );

This will block the page from showing up in “insite:register” searches and seamlessly direct your visitors to “http://yourdomain.com/your-new-slug” when they wish to register.


Add a Security Question to Your Registration Page

A Captcha or other security question adds a field which helps thwart automatic bot registrations. I personally dislike those indecipherable squiggly-letter Captchas and avoid using them whenever possible, as they might interfere with the user experience and cause some legitimate users to avoid registering on a site that takes two or three attempts to do so.

I prefer the use of easy questions written in legible letters, such as simple math problems. One plug-in that provides this is the fittingly titled Captcha.

Here is another Captcha tool that takes a different approach, allowing registration only after a visitor chooses and drags the correct icon, called Sweet Captcha.


Tweak Your .htaccess File

The .htaccess file located on your site’s root folder is used to control how your visitors interact with your site. It enables you to block IP addresses and even entire domains from accessing your site, a very useful thing to do against known bots trying to create fake BuddyPress user accounts.

Once you have identified a specific troublesome IP address, say by looking at the access logs on your server, block them from accessing your site again by adding this to your .htaccess file, replacing the 0s with the IP address you want to block:

deny from 000.000.00.000

Lists of domains known to harbor spam bots have been published by various developers and WordPress experts. One excellent basic one is the Ultimate htaccess Blocklist by Jeff Starr of Perishable Press. Jeff provides the entire code that you can copy and paste into your own .htaccess file to greatly reduce your BuddyPress bot registrations, comment spam and other unwanted activity. For an even more extensive list, check the 4G list which has over 8000 spammers on it.

Another BuddyPress-specific .htaccess tweak is provided by WordPress Must Use Tutorials. Replace the “yourbpsignupslug” and “yourhomedomain” with the appropriate data for your site. You can also choose where to send the attacking bots by modifying the “http://die-spammers.com/” with whatever URL you like.

# BEGIN ANTISPAMBLOG REGISTRATION
RewriteCond %REQUEST_METHOD POST
RewriteCond %REQUEST_URI .yourbpsignupslug*
RewriteCond %HTTP_REFERER !.*yourhomedomain.* [OR]
RewriteCond %HTTP_USER_AGENT ^$
RewriteRule (.*) http://die-spammers.com/ [R=301,L]
# END ANTISPAMBLOG REGISTRATION

Keep Up to Date With Security Exploits and Defenses

Stay educated on the latest exploits affecting blogs and plugins. A blog owner is ultimately the only one responsible for maintaining the various layers of protection needed for site security. This can only be done by staying well-informed and keeping up-to-date on what the rest of the WordPress and BuddyPress community is experiencing and their solutions. Visit the WordPress Support forums and the Buddypress Support forums regularly. Follow @buddypressdev on Twitter.

Spy on the Enemy

Another excellent source of information is to visit hacker/blackhat SEO forums, if you are brave. Spammers do not do what they do just for fun, spamming is serious business, and it pays to know their motivation and see the conversations they are having among themselves. This will help you understand their mindset and see some of the programs and scripts they share, allowing you to better protect your site. I won’t link to any of these sites directly, but performing a search for “blackhat SEO” will bring up quite a few. Make sure your antivirus program is up to date and that your browser is protected against malicious scripts … just in case.


Use Security Plugins

Be wary of trying every single security plugin under the sun, as this slows down your site and adds to your maintenance workload by having more things to update and go through if something breaks. At first, stick to the highest rated ones that have proven themselves over time with a lot of users. One such plugin, which is highly recommended by many BuddyPress and WordPress users, is Bad Bahavior. This plugin will not only block a lot of spam, but will make your site invisible to many bots in the first place and thereby prevent fake registrations.

A good place to start exploring plugins is the WordPress Plugin Directory.


Conclusion

The liability of putting together a Best Practices article like this is that some angle is bound to be missed, as black hats are always eager to develop exploits for BuddyPress and WordPress due to the number of users and ease in locating their websites. Although the tips in this article will go far in protecting your site from the most common threats, the only real way to protect a BuddyPress installation is, unfortunately, constant vigilence against unwanted activity and education on new defenses.

Original from: http://wp.tutsplus.com/tutorials/security/best-practices-for-preventing-buddypress-spam-user-registrations/

The Deeply Graphic DesignCast

March 31st, 2012 Comments off

As graphic designers, it is so important for us to always keep learning in order to stay at the top of our game. Outside of classes, and actual on-the-job learning, there are many outlets for us to teach ourselves new tricks. One of my favorite new places to go for a bi-weekly dose of design inspiration, education, and yes – entertainment – is a fairly new podcast available on iTunes called The Deeply Graphic DesignCast.

The Deeply Graphic DesignCast

The Details

Started around the beginning of this year by The Deep End design studio in Los Angeles, Deeply Graphic is a podcast with a mission: to educate designers in an informal, conversational way. Each episode runs anywhere from 30-60 minutes and covers a single design-related topic.
So far, covered topics include online portfolios, fixed vs. hourly pricing, and web design trends for 2012. There are three hosts, Wes McDowell, Brandon Voss and Mikelle Morrison, all of whom come from different design backgrounds. This makes for some interesting and lively conversation, because we as listeners get a nice mixture of viewpoints on any given topic. So far, there has been a new episode released just about every 2 weeks, usually on Mondays. The podcast is free to subscribe to on iTunes.

The Format

In addition to the topic of the day, the Deeply Graphic crew takes turns answering a question sent in by a listener. They usually do a very thorough job of this, and again, this is where the differing viewpoints really make things interesting. They then round out the show in a segment they call “Do Yourself a Favor,” in which Wes, Mikelle and Brandon each offer a random tip they discovered within the past week that has made their design lives easier.

The Review

I discovered Deeply Graphic in a graphic design forum, and it sounded like a cool idea, and something that I might really enjoy listening to for educational purposes. And I do. The thing I didn’t count on was that it is actually very entertaining at the same time. I get excited whenever I see a new episode listed, because as trite as it sounds, listening is like having a great conversation with friends about a topic I love talking about. After listening to 8 episodes, I feel like I know these guys, and the best part is, I know that I am going to learn something from them every time.

While Deeply Graphic may hold the most surface appeal for newbie designers, there really is something for everybody here. Younger designers will love it because it covers so many practical topics they they just don’t teach in school. More experienced designers such as myself will love it because it makes you think of things in new ways. For instance, in episode 5, titled “Fixed vs. Hourly Pricing For Designers,” the three hosts all had differing views on which was the better way to price themselves, and the points they brought up actually inspired me to reconsider my own pricing structure that I had been using for years. That’s the beauty of this podcast. They don’t tell you what to do. In fact, in most cases, they disagree about how to handle certain situations, but just in listening to their opinions, you begin to form one for yourself.

All three hosts are very knowledgable and they have a very natural chemistry. Even though the podcast is relatively new, you get the sense that Wes, Mikelle and Brandon are actually friends. They joke with each other, and the mixture of information and levity is refreshing. Since they have such differing backgrounds and areas of expertise, each will step forward to lead the conversation at different points, depending on who has the most experience with the given topic.

All things considered, The Deeply Graphic DesignCast is a gem of a podcast for designers of all stripes – new, experienced, freelance or corporate. It is always thoughtful and never condescending, and even if you don’t agree with the viewpoints expressed, it will at the very least encourage you to think of what you already know in a new way.

Have you listened to the show? What do you think about it?



Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/a5vDsFGb-AY/

Translating Your Theme

March 30th, 2012 Comments off

It’s very easy to turn a blind eye to other languages when developing your WordPress theme, but this is a very bad habit and immediately turns away a whole market of WordPress users and potentially thousands of dollars in lost revenue. Out of the top 10 countries that search Google for “WordPress themes”, only one is native English speaking (the USA) and that comes 9th. As of writing this, there are only 269 themes in WordPress’ theme database that are tagged as translation-ready out of more than 1,500 themes. That’s only 18% of the themes. I’m going to show you how to make yours one of them.


How It Works

When you usually make a theme, you will simply hardcode any theme text such as the 404 error message in the 404.php file, or labels such as “comments:” or “author:”. If the user’s WordPress is German for example, these snippets of text will still display in English. The solution to this is to return or echo these statements using one of four WordPress functions which are designed to reference a language file for the correct text. Once you have your text wrapped in these functions, you can create a file containing all the translations that is referenced every time the theme is loaded. There are three translation files that we use:

  • .pot (Portable Object Template) – This is the template file that contains a reference to each text string in your theme that needs translating. This file does not contain any translation. It is a plaintext file.
  • .po (Portable Object) – Made from the .pot file, the .po contains all your string references as well as their translations to one specific language. This is also a plaintext file that can be edited.
  • .mo (Machine Object) – A binary version of the .po file. By using machine code, the file can be used much faster than its plaintext alternative.

Step 1 The Four Functions

Each of the four functions requires at least one argument, which is the text that is to be translated. The functions are:

  • __()(two underscores) The basic function that you will use the majority of the time. It returns the text in the correct language.
  • _e() – The same as __() except it echoes the text instead of returning it.
  • _n() – Used when the text has the potential to be plural, so for example if you were to display how many comments have been made, you might want to output either “X comments” or “X comment” depending on how many comments you have.
  • _x() – Useful for when the translation of the word depends on the context. “Post” could mean “a post (noun)” or “to post (verb)” depending on context. It is important for the translator to know which you mean when translating to be accurate. _x() is mainly used where single words are used.

__() & _e()

These are the simplest translation functions that WordPress has to offer. Let’s take a look at an example of each:



Both of these functions are doing exactly the same thing here. The statement “this is a post” is being checked against the .mo file if there is one, and returning the result. __() and _e() only require one argument to be passed to them, which is the text we want to be translated. A second optional argument is available and we’ll come to that later. The only difference between the two is that __() needs the echo statement here. Let’s look at an example where __() works better than _e():


Instead of passing a string to the the_content() function, we have used __() so that the text can be translated. If we had used _e() here instead, you would have the translation of “Click here to read more” echoed to the document instead of being passed to the_content() which would cause all sorts of unhelpful problems.

_n()

What if you have a situation where the text you output could potentially be a plural or a singular like the “X comments” example above? Instead of giving two different text strings for the translator, you can say that you have a single piece of text that needs a singular and plural translation. The following two examples both output the same result to the user:



_n() requires three arguments. The first is the singular version of the text, the second is the plural, and the third is the number that it’s referencing. In this case, get_comments_number() is finding how many comments are on a post and then _n() is choosing the appropriate text to use.

_x() & _ex()

Let’s say you’re translating a .pot file, and you come across an entry “scroll”. Are you going to interpret that as “a piece of rolled paper” or “pan up or down the website”? You could really do with some context to describe what you need to translate it to. These functions give you that ability, by having a second required attribute which asks for a short description to describe the phrase or word. Check the example below:


The example shows you the difference between _x() and _ex(). It is the same e, as with _e, to make the function echo the output instead of returning it. For both, our first parameter is our text that needs translating, and the second is a comment or note about the translation text to make it clear what is meant.

Advanced Techniques

Let’s say that you have a situation where the text you want to generate is composed of a text string with the result of a function or the value of a variable put somewhere inside it. You might be tempted to right something like this:


When it comes to making your .pot file, POEdit will ignore this because it doesn’t want to use a variable in the middle of a sentence. The reason being is that it will submit the string You have chosen the $color theme to the .pot file, but when it comes to searching for the translation when the script is executed, it will search for the string You have chosen the blue theme which it won’t find. So what if we do this instead:


The script will now be able to retrieve the translations, but now it’s become too difficult to translate because the sentence has been broken up. This sentence might not even be translatable in some languages that have largely different syntax, such as in German where their word for “chosen” would appear at the end of the sentence. You would need to go through the trouble of explaining that these two separate text strings are part of one, and that “theme” might not translate to “theme” at all.

The solution is to use a single text string that has single-quotation-friendly syntax. This is where the printf() or sprintf() functions become useful. Let’s take a look at what our code needs to look like:


Not only does this solve all our problem we had before, but it’s a lot tidier and only uses one line of code. The printf() or sprintf() functions’ first arguments are the string to output which contains at least one placeholder, in this case %s (which means “string”), and any other arguments are variables that are to be placed inside the initial string. There are many different placeholders you can use inside your string and you can find a full list under sprintf in the PHP manual. Note that the different between printf() and sprintf() is similar to _e() and __() respectively.


Step 2 Introducing POEdit

Now that you have successfully tagged all your text output on your theme, you now need to collect this information into a .pot file. POEdit is a fantastic program that gives you the ability to create your .pot file, and also provides an easy to use GUI that can be used to make your .po and, more importantly, your .mo files too.

First, you will need to download POEdit, which you can find here for Windows, Mac and Linux:
http://www.poedit.net/download.php

Once POEdit is installed, you can create your .pot file. To do this, go to File > New Catalog. You will be presented with a dialog box where you need to enter some basic information. The essentials in the “Project Info” tab are the project name and your language/country. You also must enter the following in the “Plural Forms” box:

Plural Forms: nplurals=2; plural=n != 1;

POEdit project info

On the “paths” tab, enter the path where the files can be found relative to the save destination of this .pot file. For example, if you are putting the .pot file in the theme’s root folder, enter . (period). If you want to place the .pot file in a “language” folder inside the theme root, enter .. (two periods).

POEdit path

Next, you need to tell POEdit which keywords to look for when scanning our files. Enter the following:

  • __
  • _e
  • _n:1,2
  • _x:1,2c
  • _ex:1,2c

The :1,2 extension tell POEdit that these keywords have two parts to them. By default, the second argument is the plural unless you include the c which mean the second argument is a comment.

POEdit keywords

You’re good to go! Click “OK” and choose a place to save your .pot file. Remember that it has to relate to the path you defined earlier. POEdit will now scan through your files and find all the occurrences of your translation functions and save them without translations into your .pot file. If you only want to provide the bare minimum support for international translation you can ship your .pot file with your theme and stop here, however if you are able to translate your theme into another language yourself, you can ship your theme with a premade translation as described in step 3.


Step 3 Translating and Making Your .po File

POEdit translating singular
  1. A list of all the text strings to be translated
  2. The current string being translated
  3. Your translation of the string
POEdit translating plural
  1. Singular and plural of current string
  2. Tabs to switch between singular and plural of your translation
  3. Your translation

Once you have translated all the strings in the .pot file, you can save this as your .po file. Any string that you haven’t provided a translation for will show in the original language when someone views your theme.

The filename of your .po is crucial. Gettext uses the ISO 639 standard for language abbreviations and ISO 3166 for locales. If your translation is written in American English for example, your file name will look like en-US.po. Capitalization is also important here. For a full list of language and country codes, check out these two links:

Once you save, POEdit by default automatically creates a .mo file alongside your .po file. It is recommended you include all three of your translation files with your theme so that people can create their own translations and edit your existing translations easily.


Step 4 Setting Up WordPress

Let’s recap what you have done so far. You have told WordPress all the text that you want to be translatable, and then you used POEdit to collect each string and place them into a .pot file which can be translated into a .po and .mo file. These files are then included in the theme files. The final step is to zip your theme, install it and let WordPress know which language .mo file you want it to use. This is a very straight forward procedure where you access your wp-config.php file found in your WordPress’ root folder.

/**
 * WordPress Localized Language, defaults to English.
 *
 * Change this to localize WordPress. A corresponding MO file for the chosen
 * language must be installed to wp-content/languages. For example, install
 * de_DE.mo to wp-content/languages and set WPLANG to 'de_DE' to enable German
 * language support.
 */
define('WPLANG', '');

Your file should already contain define('WPLANG', ''); but if it does not, you can add it in. You simply need to add your language and locale code into the define. If you were to translate your theme into German, you would have this:

define('WPLANG', 'de_DE');

Your internationalization is complete! Remember to include your .pot file with your theme, and if you were able to translate your theme to another language, to include the .po and .mo files too.

Original from: http://wp.tutsplus.com/tutorials/theme-development/translating-your-theme/

To Revamp or Not to Revamp?

March 30th, 2012 Comments off

I guess everybody can think of site revamps that went terribly wrong and of revamps that really improved a site. However, when you discuss somebody else’s site it is much easier than when you need to decide if your own site needs a revamp.

There are times when you need to revamp your site and times when it is best not to touch a thing. While there is no universal prescription when a site revamp is a good idea and when not, there are some factors to keep in mind when wondering what to do. Here are some ideas.

What Do You Plan to Revamp?

One of the questions you need to answer before you start with the revamp itself is what your revamp plans are. For instance, you need to think about these:

Will you be doing minor cosmetic changes only (which is not much of a revamp) or more in-depth ones?

Will you need to revamp only the design, or are modifications to the logic behind it (i.e. the database and the programming) required?

What will you keep from the present design/functionality?

These all questions need to find answers and very often when you start pondering, you will discover that actually a revamp is not only unnecessary but it could do more damage than good. Also, even if your revamp makes sense and is a good one, be prepared to hear negative feedback from your users about the redesign – people are just used to what it was and aren’t always easy to accept changes even when they are better.

Some Good Reasons to Revamp Your Site

Generally speaking, if any of the following are true, then your site does need a revamp:

1. A change in business. A site is the face of a business, so if your business has changed, this might imply site modifications are mandatory. In some cases even change in ownership might require a new design in order to make the site consistent with the rules of the new owner.

2. You need new functionality that can’t be accommodated with the present design. Even if your business hasn’t changed and the owner stays the same, it is very probable you need new functionality. For instance, if you decide to add a shopping cart to your site, you might be able to do it without much hassle but very often you will need to modify the existing design a lot in order to accommodate the new functionality.

3. A major shift in online trends. Good Web sites are designed in a way that makes them good for years but when online trends shift majorly, even the best site looks outdated. For instance, when Web 2.0 became popular, Web 1.0 sites became so old. Of course, such drastic changes in technology happen once or twice in a decade but you need to think about them.

A more common reason to revamp a site is the advent of new technology. For instance, many sites were revamped to take advantage of CSS3 when it became popular and supported by more browsers because CSS3 can do many things CSS2 wasn’t safe to use for.

4. The frequent minor changes have made your site a mess and it is best to start from scratch. In the Things I Hate About My Clients article I gave the example of a client whose site has become an incredible mess due to lame updates but I guess this isn’t the worst to see in this department. When many small changes have been made over the years, then it might be easier to revamp your site completely than to continue maintaining the spaghetti code. Still, don’t take this as a firm recommendation but think with your head – you might have to clean the code only, not perform a major revamp (though the time this will take might be more than the time needed for a revamp).

Times When You Shouldn’t Even Think of Revamp

In addition to the reasons that give you food for thought if a revamp is necessary, there are also reasons that in fact are not reasons for a revamp. Here are some of them:

1. My designer left me or I fired him/her. It is true that a site is best maintained by its author but the departure of your designer is definitely not a reason to revamp your site. You can find somebody to revamp it for sure but if they leave again, do you think you can revamp your site with every change of your designer? Rather, find somebody to maintain the present version and this solves your problem.

2. My competitors are revamping their sites. The “me too” approach is never good. Your competitors might have sound reasons to revamp their sites but this doesn’t mean it’s the same for you. Besides, who says their revamp will be successful?

3. It has been N years since the last revamp. The mere fact that you haven’t revamped your site in N years isn’t a reason to do it now. Of course, if it has been 3, 5, or more years since the last revamp, it is more likely that your site needs new functionality or that it will benefit from the use of new technologies but the number of years in itself isn’t a reason to revamp. There are many successful sites that have kept their designs for years and many unsuccessful sites that are constantly changing their designs, so it is obvious which group you’d like to belong to.

If I Could Turn Back Time

If you want to get more ideas about how others have revamped their sites, you might want to have a look at the Before and After Redesigns of Popular Design Blogs article. The sites there are design blogs only but still it gives an idea of what kinds of revamps are popular. Unfortunately, not all redesigns are successful and I do agree with the comments under the article that many sites look like templates from 5 years ago after the redesign but still even negative examples are a good learning experience.

If you are interested in old versions of popular sites, one really useful tool is the Wayback machine. It is a free service that allows to browse through the snapshots of popular sites from years ago. For instance, here are some snapshots of how SpeckyBoy looked throughout the years:

You might also like…

How Much Code Should Web Designers Need to Know? →
Things I Hate about My Clients →
Good Old Static HTML Sites Aren’t Dead Yet. Should They Be? →
Should You Keep Your Website Open Source? →
Should Designers know how to code? What do you think? →
Is a Design House-Style Really Necessary? →



Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/JsVFbhbi8sU/

Categories: Web development Tags:

How to Add Social Media Icons to Your Sidebar, Without Using a Plugin

March 29th, 2012 Comments off

Social media should be a critical part of your website in that you can share your website articles with your followers and interact with them through your social media channels. You should consider putting social media icons on your website so visitors can learn more about you and follow, like or friend you on these social media outlets.

It is simple to add social media icons with a plugin. But this tutorial will show you how to add social media icons the customized way. Adding these icons in this way is critical if you are creating your own icons for your website. Plus, customizing your website without using a plugin is a satisfying experience!


Step 1 Getting Social Media Sharing Icons

There are 3 options for getting social media icons. The first is to create your own. You can do this by going to sites like, Goodies to find the logos directly from the company. Read the terms of service on how you can and cannot use their logos. Now that you have the official logo, you can create your own dimensions, background and more. Get creative and match the icon to your website style. This is where you get to show off your creativity!

The second way is to find free social media icons. There are plenty of places that give away these icons for free for your website or blog, but always read the terms of service since many of these free icons giveaways are only for use on personal blogs.

The third place to find great social media icons are websites that sell premium icons. The benefit of purchasing your social media icons is that you are using a premium icon set. Premium icon sets not only look great and it will save you a lot of time from creating them yourself. If you want your website to stand apart from others, spend a little money and buy premium icons, rather than finding the free icon sets that everyone else is using.


Step 2 Determine the Size of Your Sidebar

It is important to know the size of your sidebar so you aren’t adding social media sharing buttons that are too large for your needs. If your sidebar is only 300px wide, it doesn’t make sense to add icons that are 512px. The best way to do this is by using a measuring extension for your browser.

Once you know the size of your sidebar, you can calculate the number of social media sharing icons and determine how large each one of them needs to be in order to fit.


Step 3 Saving as a .PNG or .JPG File

You may have to use a photo editor to save the icon for the web. It’s important that if your icon has any transparency, that you export it as a .PNG file. If your icon does not have any transparency, you can use a .JPG file.


Step 4 Upload the Icons to Your Website

Create a new blog post and upload your social media sharing icons using the media uploader. Yes, it really is that simple!


Step 5 Add Links to Each Icon

Once your icons are added to your blog post, it’s critical that you assign an external website link to each icon. Click the, “insert/edit link” button, to add links to each of your social media sharing buttons. This will make each icon, “clickable”, and once clicked will take the visitor to your social media pages where they can learn more about you and follow you.


Step 6 Copy the HTML Code for These Icons

Many people never stray from the visual editor within WordPress, but you may quickly find that it’s easy to customize your website once you know a little HTML. Select the “HTML” tab in your post editor. Copy ALL the code that is associated with these social media icons. Feel free to save it to a text editor so you don’t lose the HTML code.


Step 7 Create a Sidebar Widget and Paste Your HTML Code

This is the final step to the process. Simply drag a new widget, titled, “Text or Arbitrary HTML” to the sidebar of your choice. Then, paste in the HTML code into the text widget. Lastly, click the “save” button to save your changes.

That’s it! All your hard work is done. Your website will stand out from all the others now that you have your own custom social media icons on your website. Now you can promote your social media channel through your website and let the traffic from one direct traffic to the other.

Original from: http://wp.tutsplus.com/tutorials/creative-coding/how-to-add-social-media-icons-to-your-sidebar-without-using-a-plugin/

40 Examples Of Tilt-Shift Photography

March 29th, 2012 Comments off

Here is another round up for all you photography lovers out there. Today, we are showcasing some of the best examples of tilt-shift photography. You’ll love it.

In a nutshell, tilt-shift photography is an inspired and mesmorizing photography technique that requires manipulating the camera or image so that a life-sized location or subject looks like a miniature-scale model. If you would like to learn how to achieve this marvelous effect, we have posted some useful resources and tutorials at the bottom of the round-up.

Little Game

Ermoupolis Village: Syros, Greece

Ermoupolis Village: Syros, Greece

Pier 39 Gets the Tilt

Pier 39 Gets the Tilt

Toy-Sumo

toy-Sumo

Snowdon Railway

Snowdon railway

The Thrills: Big Sur

the thrills:big sur

Mini Ruins

Mini Ruins

Dubrovnik Miniature Fake

Dubrovnik tilt-shift miniature fake

Tilt-Shift Zebra Stripe

Tilt-Shift Zebra Stripe

London

London

Toy Kuala Lumpur

Toy Kuala Lumpur

Oasis Miniature

Oasis Miniature

Cliff 3000

Cliff 3000

Mini Off-Roaders

Mini off-roaders

Tilt Shift Rush Hour

Tilt shift rush hour

Tilt Shift Train

Tilt shift train

Tilt Shift

Tilt Shift

Trains’n’Rails

Trains’n'Rails

Tilt-Shift Volei

Tilt-shift Volei

Millook Beach, Cornwall

Millook beach, Cornwall tilt-shift

Mini Multnomah Falls

Mini multnomah falls

Tilt Shift Sofas

Tilt shift sofas

Big Miniature World

biG miNiaTURe wOrLd

Christchurch

Christchurch tilt-shift experiment

Tilt-shift Train

Tilt-shift train

Tilt-Shift

Tilt-shift

Elephants

Elephants

Penguins

Penguins

Stadium

Stadium

Tilt Shift

Tilt shift test

Euroflora 2006

Euroflora 2006

Positano

Positano

Vegas Tilt Shift

Vegas Tilt Shift

Washing Clothes

Washing Clothes

Looking down on Sydney Harbour

Looking down on Sydney Harbour

Miniature

Miniature

Tilt-Shift Manhattan

Tilt-Shift Manhattan

Tiny happy people

Tiny happy people

South Manhatten Tiltshift by Night

New York City USA - South Manhatten Tiltshift by Night

Bergen, Norway

Bergen. Norway (Tilt-Shift, miniature, HDRi)

How to Create Real Life Tilt Shift Images

In order to add a good miniature effect to your photos, you need to take photographs from a high angle, possibly from the air. Taking pictures from a high angle create the illusion as if you are looking down at a miniature subject. You will need a camera with a tilt-shift lens as this stimulates a shallow depth of field.

Here are some guides to help you:

How to Make Fake Tilt-Shift Photos

Just in case you do not have a camera with a tilt-shift lens (it is an expensive piece of kit after all), then you can use these Photoshop tutorials to give your photographs the miniature tilt-shift look. you can see above. Here they are:

You might also like…

Inspirational and Free Downloadable Photography Magazines →
Beautiful Examples of Photoshopped Smoke Art and Technique Tutorials →
Amazing Images That Could Be HDR – But are definitely Not →
Tutorials for Creating Beautiful HDR (High Dynamic Range) Imagery →
Amazing Examples of Conformal Photography. How do they do this? →
50 Beautiful HDR Images from 50 World Cities →
Beautiful Examples of Photoshopped Smoke Art and Technique Tutorials →
Creative Photography Examples using the Polar Panorama Effect →
Creative and Inspirational Photographs – Distil Ennui →
Examples of Stylish Sabatier (or Solarised) Effect Photography →
Amazing Examples of Conformal Photography. How do they do this? →



Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/6lYl8gqq8Yo/

Categories: Web development Tags:

Adding Custom Styles in WordPress TinyMCE Editor

March 28th, 2012 Comments off

If you are creating a WordPress theme to power a website that will be updated by individuals without any knowledge of HTML, you can add custom styles to the visual TinyMCE editor and ensure that elements are properly formatted.


As a web designer or developer, you can create custom styles for various elements in the content of a WordPress website. These styles can be easily added by editing the HTML. What if the end-user or author of the website is not familiar with HTML? What if the author forgot which element was required for the desired style?

Adding custom styles to the WYSIWYG editor (TinyMCE) interface will allow the user to style an element with appropriate custom CSS without having to remember any code. Simply select the element or text and apply the relevant format using the style dropdown menu available in the visual editor. It is fairly easy to add a ‘Styles’ dropdown to the ‘Kitchen Sink’ in WordPress. Adding custom styles to the visual editor in WordPress is perfect for adding elements such as warning messages, buttons and testimonials.

Note: Below we’ll be creating variations of some open source code called TinyMCE Kit from the WordPress plugin repository which is released under the GPL v.2 license.


Quick Fix

Adding custom styles to the TinyMCE editor in WordPress is a fairly easy process. Below is a simple plug-in that adds custom styles mentioned in an array class to the visual editor in the ‘Styles’ drop-down. The CSS styles are placed in a file in the plug-in folder. This CSS stylesheet is called in the visual editor as well as the front-end of the website.

The code has been commented to make it easy to understand. In the first part, we make use of a TinyMCE function to add the custom stylesheet to the visual editor so that all styles are visible there. The next part adds the ‘Styles’ drop-down, which is populated in the subsequent step. The ‘Styles’ dropdown ('styleselect') is added to the second row of buttons (theme_advanced_buttons2_add) at the beginning of the row (_before). This drop-down is then populated with custom styles, which are added through the $classes array instead of writing directly in the format prescribed in the TinyMCE documentation. In the final part, the custom stylesheet is added to the front-end using the wp_enqueue_scripts function.

 'warning',
        __('Notice','textdomain') => 'notice',
        __('Download','textdomain') => 'download',
        __('Testimonial','textdomain') => 'testimonial box',
    );

    $class_settings = '';
    foreach ( $classes as $name => $value )
        $class_settings .= "$name=$value;";

    $settings['theme_advanced_styles'] .= trim($class_settings, '; ');
    return $settings;
} 

add_filter('tiny_mce_before_init', 'tuts_mcekit_editor_settings');

/*
 * Add custom stylesheet to the website front-end with hook 'wp_enqueue_scripts'
 * Enqueue the custom stylesheet in the front-end
 */
add_action('wp_enqueue_scripts', 'tuts_mcekit_editor_enqueue');
function tuts_mcekit_editor_enqueue() 
  $StyleUrl = plugin_dir_url(__FILE__).'editor-styles.css';
  wp_enqueue_style( 'myCustomStyles', $StyleUrl );

?>

Elaborate Styling

The above solution for adding custom styles to the WordPress visual editor is quick, but it has some limitations. The above code will not limit a style to a specific HTML element. It will also not apply a class to an existing block element.

We can remove these limitations and make our custom styles drop-down more powerful by putting the styles in arrays using TinyMCE syntax to define the formats. After this, we encode the styles as JSON and then add them to the TinyMCE settings. The rest of the plug-in codes remain unchanged.

In TinyMCE, each format has a set of parameters that you can specify. (Source: TinyMCE – formats)

  • inline – Name of the inline element to produce for example “span”. The current text selection will be wrapped in this inline element.
  • block – Name of the block element to produce for example “h1″. Existing block elements within the selection gets replaced with the new block element.
  • selector – CSS 3 selector pattern to find elements within the selection by. This can be used to apply classes to specific elements or complex things like odd rows in a table.
  • classes – Space separated list of classes to apply the the selected elements or the new inline/block element.
  • styles – Name/value object with CSS style items to apply such as color etc.
  • attributes – Name/value object with attributes to apply to the selected elements or the new inline/block element.
  • exact – Disables the merge similar styles feature when used. This is needed for some CSS inheritance issues such as text-decoration for underline/strikethough.
  • wrapper – State that tells that the current format is a container format for block elements. For example a div wrapper or blockquote.

Here is the modified plug-in for adding custom styles to the WordPress visual editor.

 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
            ),
        array(
            'title' => 'Testimonial',
            'selector' => 'p',
            'classes' => 'testimonial',
        ),
        array(
            'title' => 'Warning Box',
            'block' => 'div',
            'classes' => 'warning box',
            'wrapper' => true
        ),
        array(
            'title' => 'Red Uppercase Text',
            'inline' => 'span',
            'styles' => array(
                'color' => '#ff0000',
                'fontWeight' => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;



/* Learn TinyMCE style format options at http://www.tinymce.com/wiki.php/Configuration:formats */

/*
 * Add custom stylesheet to the website front-end with hook 'wp_enqueue_scripts'
 */
add_action('wp_enqueue_scripts', 'tuts_mcekit_editor_enqueue');

/*
 * Enqueue stylesheet, if it exists.
 */
function tuts_mcekit_editor_enqueue() 
  $StyleUrl = plugin_dir_url(__FILE__).'editor-styles.css'; // Customstyle.css is relative to the current file
  wp_enqueue_style( 'myCustomStyles', $StyleUrl );

?>

So you have an plug-in to add custom styles in the WordPress visual editor. To add your own styles, you need to replace the existing style formats array with your own. Of course, you will have to add the styles to the stylesheet in the plug-in directory as well. If you need to use any image as background, you can create an image folder and reference the background image from there.

If you wish to use this in your theme, just add the plug-in code to the theme’s functions.php. Make sure to replace plugin_dir_url(__FILE__) with get_stylesheet_directory_uri() and reference the appropriate stylesheet from the theme folder.


Conclusion

Creative use of custom styles in the visual editor will make formatting the articles/posts and pages easier and a lot more fun. It will also make it easy for your clients to manage their websites and add life to it by including visually exciting content. By adding theme options, you can extend this plug-in so that the user can create their own custom styles for use in the visual editor.

All the best! Let us know in the comments how you would use this code and how you would extend it in your own usage.

Original from: http://wp.tutsplus.com/tutorials/theme-development/adding-custom-styles-in-wordpress-tinymce-editor/

The Complete Guide To The WordPress Settings API, Part 5: Tabbed Navigation For Your Settings Page

March 27th, 2012 Comments off

This entry is part 5 of 5 in the series The Complete Guide To The WordPress Settings API

At this point in the series, we’ve taken a close look at the Settings API and what it has to offer. We’ve even begun creating our own theme to help demonstrate everything we’ve been learning. We’ve covered sections, fields, settings, menus, pages, and more.

If you’ve been following along from the beginning, you’ve likely noticed that these articles are long and are code intensive. We’ve hit the major points of the Settings API so, for the remaining articles, we’re going to be taking a shorter, more focused approach on the rest of the topics. This will reduce the length of our articles and the amount of code we’re writing and hopefully make some of the ideas a bit easier to digest.

Last time, we left off in the middle of development: We’ve successfully created our own options page and introduced a few new options, but we left the project in a state that prevented all of our options from being properly saved. In this article, we’re going to take a look at why we’re unable to save our options and what we can do to fix it.

Before we get started: This article assumes that you’re familiar with the Settings API and theme options. If you’re a beginner or even intermediate WordPress developer, I highly recommend catching up on the rest of the series before diving into this post.


Why Won’t My Options Save?

If you’ve been following along through this series, your options page should look something like this:

Theme Options

Everything looks good, but there’s a problem with this setup – the “Social Option” values will properly save but the “Display Options” will not. Before going any further, it’s important to understand why we’re able to render our options out on a single page, but we’re unable to save both options.

Recall that earlier in the series, we defined two sets of settings for our theme – “Display Options” and “Social Options”. By using the Settings API, we’re telling WordPress to create entries for each group of settings in the database. Since we’ve defined two groups of settings, then two rows are created in the database. Next, the Settings API renders the options out to the dashboard using form elements. From there, WordPress takes the form values and saves them to the database.

In order to provide a greater level of security, WordPress assigns each group of settings a unique value called a nonce that protects against malicious attacks. Since a nonce value is applied to each group of settings, we’re currently rendering out a single form with two nonces. When you submit the form to the server, WordPress will only see (and, thus, use) the “most recent” nonce value. In our case, that’s the “Social Options”. As such, only those options are serialized – the “Display Options” are completely ignored.

This isn’t terribly advanced – in fact, you can actually see the two nonce values for each of our sections when you view the source of the page. Here is the nonce for the “Display Options:”

Theme Options

And here’s the nonce for the Social Options:

Theme Options

Your actual values will be different, but the input element will exist.

One way to prevent this problem from happening is to create a unique page for each group of settings. This isn’t a bad solution, but if you’re only working on a group of one or two options, creating an entire new page could be a bit overkill.

Luckily, WordPress supports middle-ground – you can still keep all of your settings on a single page, but ensure that users are able to save all of their settings and still have a pleasant user experience.


Enter Tabbed Navigation

You’ve no doubt seen tabbed navigation throughout the WordPress dashboard. Just take a look at the “Themes” page:

Themes

Tabbed Navigation provides a nice alternative for grouping sets of related options into a single page without sacrificing the overall user experience. This is what we’ll be implementing in the Sandbox Theme.

Before writing any code, it’s always a good practice to list out exactly what we’re going to do throughout development.

  • Introduce two tabs – one for Display Options and one for Social Options
  • Set the “Display Options” as the default tab when the page loads
  • Make sure that the same tab is marked as active after saving a specific page of options
  • Verify that the update message renders when settings are saved

Adding Individual Tabs

In functions.php, locate sandbox_theme_display. This is the function that we’re using to actually render the options page. As of now, it should look like this:

function sandbox_theme_display() 
?>
	
	

Sandbox Theme Options

First, let’s introduce our two tabs. This is relatively straightforward as we’re going to take advantage of CSS classes that WordPress already provides – namely, nav-tab-wrapper and nav-tab. In the sandbox_theme_display function, drop the following block of HTML just below the call to settings_errors():

	

Obviously, this is very basic but we’ve just introduced two styled tabs that we’ll be using throughout the rest of the tutorial. At this point, your code should look like this:

function sandbox_theme_display() 
?>
	
	

Sandbox Theme Options

And your settings page should look like this:

Initial Settings Tabs

Bringing the Tabs to Life

In order to begin toggling our options pages, we’re going to need to provide some type of signal or flag for which options we want to render. This can be done using a query string variable that identifies which tab was clicked and that can, in turn, be read using PHP.

So let’s ago ahead and give each anchor that we created above a unique flag that signals what tab we’re trying to load. Update your markup to look like this:

	

Pay close attention here so not to miss this: We’ve provided two query string variables in each link – the page value and the tab value. The page value is necessary because it’s generated by WordPress via the Settings API and is used to tell the application which options page to load. The second value is an arbitrary value that we’ve used to signal which tab we’re on. Permitting you’ve done this correctly, notice that your browser’s address bar should reflect the values as you click on each tab.

Next, we need to write a little bit of PHP that reads the new query string value. Ultimately, this code is what will allow us to toggle our options page, but we’re going to take this a step at a time. So, let’s begin by writing a conditional to check to see if the query string value is set and, if so, store it in a variable. This can go directly above our nav-tab-wrapper that we’ve defined above.


WordPress provides a class named nav-tab-active that we can apply to our anchor tabs to style them as active. As such, our next step will be to compare the value of the $active_tab variable to the tab query string variable and then apply that class name to the relevant tab.

To do this, update your code to look like this:

	

Here, notice that we’ve written some inline PHP in the class attribute of each anchor. Essentially, the code says “If the active tab variable’s value is ‘display_options’, then echo the nav-tab-active keyword; otherwise, don’t echo anything”. Easy enough, right? Test it out a few times – you should see each of your tabs toggling back and forth.

At this point, your function should look like this:

function sandbox_theme_display() 
?>
	
	

Sandbox Theme Options

But wait – there’s a subtle bug in this code! Recall that when a user lands on the settings page the first time, there’s no value for tab in the query string. As such, we need to set one as the default. To do this, let’s update the conditional that checks for the presence of the query string variable. While we’re at it, let’s consolidate it using the ternary operator:

	$active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'display_options';

This says “if the query string contains a value for ‘tab’, assign it to the active tab variable; otherwise, assign the value of ‘display_options.’” This is exactly how we set the display tab as active. Once again, try out your tabs.

Toggling Our Settings Page

We’re almost done! The last thing that we need to do is to toggle our settings page based on which tab is active. Specifically, we only want to show the display options when the display tab is selected (and the same for our social options).

Since we have everything stored in the active_tab variable, we should be able to wrap our Settings API calls in a conditional and be good to go. So, first, locate the following block of code in your theme:

	

Notice that we have two calls to settings_fields and do_settings_section. Basically, we only want to render a single group out when a particular tab is selected. To do this, we simply write a conditional that checks the value of $active_tab and then runs the appropriate section:

	

Refresh your options page – permitting you’ve done everything correctly, each group of settings should toggle based on the field and all of your options should properly save.


Conclusion

Tabbed Navigation is an easy way to group related options together and give your users a solid user experience by not inundating them with options. It’s relatively easy to implement and goes a long way to tightly integrating your options with the native WordPress look and feel.

In the next post, we’ll build on this even further by exposing a top-level menu that will make your theme options accessible via the menu along the side of the WordPress dashboard.

Original from: http://wp.tutsplus.com/tutorials/the-complete-guide-to-the-wordpress-settings-api-part-5-tabbed-navigation-for-your-settings-page/

Weekly Design News – Resources, Tutorials and Freebies (N.125)

March 27th, 2012 Comments off

This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy :)
If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebookor by subscribing to our RSS feed.

Our Weekly Design News has been sponsored by MediaLoot. Check them out for some seriously useful resources like icon fonts, UI kits, vectors and themes.

New Features in Photoshop CS6 (Infographic)

New Features in Photoshop CS6 Infographic

New Features in Photoshop CS6 (Infographic)

New Features in Photoshop CS6 Infographic

More Noticeable HTML Bookmarks

More Noticeable HTML Bookmarks

Responsive Content Navigator with CSS3

Responsive Content Navigator with CSS3

Getting Started With Node.js and Geddy

Getting Started With Node.js and Geddy

Starting a Design Project

Starting a Design Project

How to Create Infinite Scroll Pagination

How to Create Infinite Scroll Pagination

Maintaining CSS Style States using “Infinite” Transition Delays

Maintaining CSS Style States using Infinite Transition Delays

Build a 360 view image slider with JavaScript

Build a 360 view image slider with JavaScript

Free Legal Documents, Contracts and Agreements

Free Legal Documents, Contracts and Agreements

AppView: Free iPhone App Template

AppView: Free iPhone App Template

CSS3 UI Kit

CSS3 UI Kit

Impressionist UI Free

Impressionist UI Free

Stumblr – Free Tumblr Style WP Theme

Stumblr - Free Tumblr Style WP Theme

Simple Tape – Free Minimalistic HTML site template

Simple Tape - Free Minimalistic HTML site template

Stitched Vector Speech Bubbles

Stitched Vector Speech Bubbles

Silverfake Free Font

Silverfake Free Font

This Week on CodeVisually

Here are our favorite webdev resources from the past week:

Previous Weekly Design News…

Design News Roundup Archives →



Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/rGmhBgiB084/

Categories: Web development Tags: