articles on

Useful Articles for Wordpress Development

Useful Articles for Wordpress Development

Lately I've been up to my neck in a Wordpress personal project, developing a nice website environment to be proud about and I've ran into many issues along the way, from simple things like adding classes to the body tag to more complex ones like security issues and things like that. I thought it would be nice to share with you some of best articles I've found during this time. These are some of the most useful articles I've used and saved for future reference. Some of these are quite basic, other are super complex, but I find amazing how some developers are super awesome for sharing their knowledge with the community. I hope you find use for this, because these have definitely helped me at some point. Also, if you have your own Wordpress developing bookmarks, please, share it with us! The issues you have encountered and solved might be someone else's current problem. Cheers. ;) Developing WordPress Locally With MAMP "Local development refers to the process of building a website or Web application from the comfort of a virtual server, and not needing to be connected to the Internet in order to run PHP and MySQL or even to test a contact form. One of the most annoying parts of development, at least for me, is the constant cycle of edit, save, upload and refresh, which, depending on bandwidth and traffic, can turn a menial task into a nightmare. With application platforms such as WordPress, which require a server back end to work, you would normally be constrained to develop on a live server, with the headaches that go along with that. MAMP and its Windows counterpart, WAMP, are tools that allow you to locally develop applications that require a server on the back end." -Read the article at Smashing Magazine. How to Build A WordPress Theme From Scratch Part One "So you have WordPress installed and now you are ready to install a theme to give your blog/site the look you want.For most people, this involves using a theme that was purchased or using a free theme that they found on the Internet. But these don’t have to be the only two options you have to choose from. A developer with some skill in CSS and HTML can easily create their own WordPress themes to give their site the ability to provide a unique experience for their visitors. This tutorial will walk you through the steps of creating your own theme." -Read the article at Developer Drive. Wordpress Body Class 101: Tips and Tricks for Theme Designers "Through out our experience of using WordPress, we have found that often theme designers overthink a certain functionality. They are looking for crazy WordPress filters and hooks to accomplish a task when all they need is some simple CSS. WordPress by default generates a lot of CSS classes. One of these CSS classes area ia the body class styles. In this article, we will explain the WordPress body class 101 along with sharing some useful tips and tricks for beginning theme designers." -Read the article at WPBeginner. 10 Most Common WordPress Errors (With Solutions) "If you are a WordPress user who likes to get your hands dirty with the codes, or one who just loves installing plug-ins and changing themes, you’ll understand that encountering an error is an inevitable occurrence. WordPress users (like us) know how frustrating it is to stumble into an unexpected error and not be able to find a solution for it. Most WordPress problems are solvable; If you hit an error, don’t fret because chances are, some other WordPress user had the same problem and had already gotten it solved." -Read the article at Hongkiat. 55+ Most Wanted WordPress Tips, Tricks, and Hacks "There are times when you come across a feature in a blog, and you just start thinking to yourself: How can I get this in my WordPress blog/site as well. Everybody have experienced this feeling. Sometimes you know you want it, and don’t know where to look for, or even what to look for. In this article we will be sharing some of the most wanted WordPress Tips, Tricks, and Hacks that you will definitely find useful. These tutorials are classified under various skills level. For some tutorials, you will need to know basic HTML and some WordPress Knowledge." -Read the article at WPBeginner. Widgetizing Themes Widgetizing is a pseudo word that describes the process of implementing Widgets and Widget Areas into your Theme. -Read the article at Wordpress Codex. 10 Useful WordPress Loop Hacks "The loop is a very important aspect of WordPress blogs. In fact, the loop is what allows you to get posts from your WordPress database and print them on the screen. A set of useful and user-friendly functions, the loop is incredibly powerful. With it, you can get a single post, a list of posts ordered by date, title or category, a list of posts written by a specific author and much more. In this article, we’ll show you 10 useful things you can do with the WordPress loop to make your blog even more powerful than it is right now." -Read the article at Smashing Magazine. Adding Disqus comment count links to your home page "Most websites implementing Disqus will want a way to display the comment count for each page with comments, on their home page. We offer an easy to use JavaScript code snippet which displays the number of comments for pages with Disqus embedded." -Read the article at Disqus.

More awesome Photoshop Secrets!

More awesome Photoshop Secrets!

Lots of cool things in this week's batch from Photoshop Secrets Actions by bjango! Marc Edwards from Bjango creates some super useful Actions and Panel that every Photoshop UI Designer must have! You can download them here. I highly recommend reading the blog post that comes with it! While you’re at it, check out his tool Skala Preview, the fastest way to send pixel perfect previews from your Mac to your iPhone or iPad. Use Keyboard Maestro to Group + Rename at the same time Every time I group layers I like to rename the group name to something more Meaningful than Group 1, 2, 3. So I created a Keyboard Maestro Keyboard Maestro Macro that replaces ⌘G with 2 actions, one to Group and another to rename. To make it work first you need to unassign ⌘G as Group from Photoshop by going to Edit > Keyboard Shortcuts | Layer / New / Group Then download the Macro here. Just double click the file after installing Keyboard Maestro and it’ll be added to your library of shortcuts.  Challenge yourself and hide that toolbar! I very rarely click on the toolbar icons. Instead I use shortcuts. Why not challenge yourself to hide the toolbar and use shortcuts instead? Here's the toolbar shortcut map… Remember if you press ⇧ + the letter, it will toggle between the tools that share that shortcut. Or you can disable that in the Preferences and just press the same letter repeatedly to toggle through the tools. A Select Vector B Brush, Pencil… C Crop, Slice D Set default BG and FG colors (black and white) E Eraser F Toggle Screen Modes G Gradient, Paint Bucket H Move Canvas I Eyedropper J Healing Brush K Rotate 3D Object L Lasso M Marquee N Rotate 3D Camera O Color Dodge, Color Burn P Pen Q Enter Quick Mask Mode R Rotate Canvas S Clone Stamp T Type U Shape V Move/Select W Magic Wand Y History Brush X Swap BG and FG colors Z Zoom / Lock layer 1-0 Selected Layer Opacity from 10% to 100% (tap two numbers quickly, like 37, to get specific values. And 00 to set it to 0 opacity.) Tab Hide Chrome Drag masks from one layer onto another You can drag vector and bitmap masks from one layer into another by holding ⌘⌥ and dragging the mask. It also works on Groups, as demonstrated on the video For many more tips like these make sure you check out Photoshop Secrets and follow @phtshp

Super Useful Photoshop Tips: Feather Shape Layers, Keyboard shortcuts and more...

For the next few weeks we'll be posting some of the best Photoshop tips from Photoshop Secrets. Some of these tips can greatly optimize your workflow helping you work faster and more precisely. Make sure to check out http://photoshopsecrets.tumblr.com and follow @phtshp on twitter. Feather Shape layers Vector Shape layers can be feathered (blurred) without rasterization. Open the Property Panel by clicking Window > Properties, then select a vector shape and adjust the feathering number. This is great for creating more editable drop shadows that you can bend and change without problems. As of CS6 you can do decimal increments too, this is particularly useful for smoothing out shapes if you're trying to make a smooth life-like illustrations or icons. I tend to use .1, .2 or .3 on my shapes when designing icons. User Keyboard Maestro to copy/paste shape colors and styles I often need to copy/paste colors for shape layers but unfortunately Photoshop gives me no easy way to do that. As of CS6 right clicking a shape layer gives you an option called "Copy Shape Attributes" which would be great if there was a way to set a keyboard shortcut to it, but there isn't, making it kind of useless. To circumvent this problem I use Keyboard Maestro. I created 4 macros Copy Color Copy Color + Style Paste Color Paste Color + Style You can download them here: https://www.dropbox.com/sh/803h5plrgt2spzm/IPYPGBBAeN Just double click the file after installing Keyboard Maestro and it'll be added to your library of shortcuts. You can then change it to whatever shortcut you prefer as the ones I set might conflict with a shortcut you already use. But what if you want to Copy/Paste just the Styles? For that Photoshop lets you do it already by either right clicking on the Style and choosing Copy/Paste Layer Style. You can also set a shortcut via Edit > Keyboard Shortcuts / Layer >Copy, Paste and Clear Layer Style. Set default Global Light to 90º To set Global Light to every new document you create, open Photoshop and make sure you have NO documents open. Then click on Layer > Layer Styles > Global Light… For many more awesome tips visit http://photoshopsecrets.tumblr.com and follow @phtshp on twitter.

Tips And Tricks On Creating Stencils #2

Tips And Tricks On Creating Stencils #2

Tips And Tricks On Creating Stencils #2 What's up guys? Following my last tutorial, today we're going to proceed with some more techniques using stencils. Just in case you missed the part one, you can see it here. The focus of today exercise it's more complex techniques as multiple layers and color. So, I believe most of you have already done some stencils from our last tutorial, so just in case you may feel this exercises may be quite simple, remember to focus on the technique and not on the result, it's just a sample. So before we can start it out, here are some materials you may need: 1- Cardboard pieces; 2- Razor rather than a scissor (will be explained further); 3- Pencil, eraser and a little notebook; 4- Rulers; 5- A black and white printer; 6- 3 different color of aerosol spraypaint. Multiple Colours Stencils So people always ask me how could I achieve this effect on the layers, well, it's ridiculous, although it takes some care and patience to achieve. So, let's get a previous stencil we used on our last tutorial, it don't have to be the "paz" stencil, but I would like you to use a more solid stencil, you will understand later. Let's first find a surface to apply it. I decided to use a dirty and already tagged surface. I already said this on the list of material, but just to emphasize: In order to make this technique possible you should have at least four different colors of spray paint. I just made a flat base color to give more contrast to this piece, you won't need to this If you're applying on a blank surface. Let's simplify this process: you're going to fix the stencil on the surface on the same position all the time, If you take it out, you will probably lose the application site and will look like a mess, so please make sure to pin it with a duct tape or masking tape. Let's start by applying softly the first color, the trick here it's to aim to the stencil border, not on the cut-out hole itself. This way you won't get a massive amount of color, just a little gradient, don't forget that spray paint can get really blurry. Apply the second color, try to use the same technique. Apply the third color, try to use the same technique. Apply the forth color, try to use the same technique. And here it is, If you done the procedure as I told before, you should get this kind of fill, with more than one color and gradient. This a quite useful technique when trying to reach a exotic textures. Multiple Layers Stencils When I say multiple layers some of you probably got in mind Photoshop or Illustrator and I know why, because both programs work under layers logics, so If you're already keen with them, this creative process will be piece of cake for ya. Basic shapes This may look a bit boring as the output it's nothing gorgeous, but let's start by making a multiple layer stencil using the basic shapes we already worked with on our latest tutorial. Could you guys make scheme of how I got this result? Let me try to be more didactic: Let's think as Photoshop / Illustrator layers, when trying to make this simple black and white shapes you should first start with the white fill, so the first layer should have only the silhouettes. The second one will have the black stroke, but please don't forget to create the islands and bridges as I said on the last class, other wise you won't get this effect. So, this is how your stencils should look like, it's really important to make this shapes with the same width and height, the only thing that will change it's the cut-out holes. If you're going to make them digital, then print and cut it, this should be no problem. Although, If you're a willing to try it all manually, the first thing you should do it's to get two sheets of cardboard and cut them with the same width and height. Then, draw the first stencil shapes, make the cut-out holes. Now drop the first layer over the other cardboard sheet, mark the shape shapes with a pencil, almost as a stencil. Now you already have the same measures as the first layer, you just gotta make the strokes following the rules of making the islands and bridges to make the stroke shapes possible. Now just find a surface to apply, please try to find one with a texture, as one of the main things we want to test here it's the contrast, so it would be pointless to do a stencil with white base layer on a white wall, did you get it? So, apply the first stencil using a black fill, let it dry a bit. Now this step it's really important: If you haven't cut the borders of your stencils with same width and height, for sure you will have problems here on trying to aim the stroke layer on it's perfectly position. So, If you haven't done it before, now it's the time, try don't make a mess. Yep, it looked so simple when I just showed it first, but now you can see it take more time than you imagined. So I recommend to try this exercise a couple of times before you start making it with more layers. Mickey Remember that we did a Mickey? I would be really happy If you still had that stencil, as now we're going to try the same technique but with a more complex shape. You probably already noticed that the first layer it's always the simplification of all the drawing. Most of the cases, it's all about the silhouette and on this Mickey stencil it's not different. The other layer it's same we already created on our last tutorial, just in case you can't remind how we did, please visit the tutorial. Don't forget to respect the islands and brigdes rules. Do whatever technique you feel more comfortable when producing the stencil, I rather always draw the figure than just print and make the cut-out holes, but again, this is just me. After you made the cut-out holes, make sure that both stencils got the same borders width and heigth, it's the only way to make sure you will overlay them correctly. Now this is basically the same process as the exercise above: Apply the first layer, let it dry, apply the second layer, done. Four layers stencil Ok Marcos, but how about a 4 layers stencil? Well, the more layers you use, the more complex will be the output and so the process to get there. So, let's try something really easy and later you can try it with more complex shapes as you wish. If you paying attention, you probably already figured the way I created this eye figure. It's just 4 overlapping layers, I just made a scheme of how it is bellow: Simple, isn't it? So here are the cut-out holes you should create on each of the layers. You can print it on 4 sheets of paper and cut them or you can do it traditionally as I'm going to show bellow. So this is how I did it manually: First I cut 4 sheets of paper with the same width and height. On the first one I draw a big wide circle. Then just made the cut-out hole. Now I just picked another layer and placed the first one over it, then drawed a smaller circle inside of the stencil. Then just made the cut-out hole. I repeated the same procedure for the pupil stencil, so just overlay the two previous sheets and draw inside of it. Then just made the cut-out hole. The eye reflexes were a bit boring to do, as part of them are not inside the other sheet cut-out hole. So what I did was to draw part of the ellipses I knew were going to be in front of the pupil. Then I took the other layers of it and draw the rest of the circles. Ok, so you might be asking yourself "Why the hell would I create the stencil this way?" . Well, Iknow this way may seem harder, but think that this is the best way to prototype and understand how it will work later, even with you work with Illustrator and separate it on layers, you will only see If it really works when you make it more tangible. So now it's all about applying the layers on the correct order, that's why I just numbered them previously, this way you won't have the chance to make any mistake. Let's start with white fill. Do the same with the red and black layers, one thing you should be really careful it's with the drying time, every spray paint has it's own drying time and, of course, this also depends on weather and the surface. The more wet and cold the weather and the more flat and non porous the surface, the more time will take to dry. Don't know why, but more than one person already reported me that the last stencil it's the harder to apply. I think it's because not only you already built a structure and will feel afraid to make a mess in the end, but also because, at least in this case, this layer actually overlay part of the previous, so If you did not cut it exactly, you probably will fail. Well guys, hope you all got till this point, now you're ready to start making your own multi layer stencils, I would be really glad If my tips and trick work and help you. Please feel free to send me a e-mail If you have any doubts, it was a great time teaching this knowledge.

Tips and Tricks on Creating Stencils

Tips and Tricks on Creating Stencils

Hi everyone, today we're going to go back in time and continue a series of Quick Tips more focused on techniques and less on results. We already featured wheatpaste and spray paint techniques, so today I though about teaching you some cool tips and tricks on making stencils.I hope you guys join us on this exercise, even though most of you are more keen to do digital work please take a look at this as a way expand your graphic abilities and to recognize new ways of thinking.So, what are we going to learn today?Stencils are basically any sheet of material with cut-out holes that are applied pigment instruments, most commonly spray paint. The cut-out holes work as a template for previous designed graphics be placed on a underlying surface. More malleable materials as paper, cardboard, plastic are better to use on this technique, but depending on the number of times you might want to use it, a stronger material such as wood and metal sheets may be more handy. This may sound as a really complex explanation, so I decided to make this more visual and posted some artists that use and abuse of this technique: C215 Blek Le Rat BanksySo before we can start it out, here are some materials you may need: 1- Cardboard pieces;2- Razor rather than a scissor (will be explained further);3- Pencil, eraser and a little notebook;4- Rulers;5- A black and white printer;Parts of the stencil: Safety BorderI call it safety border because it's minimum distance you should have from the cut-out hole and the border, this it's not specific in terms of measure, it's more about a distance you should calculate in order to avoid any leak outside of the cut-out hole. IslandAs the name already says, Islands are independent parts inside of a cut-out hole, as you may notice shapes can't float, so that's why they need bridges. BridgeThis are the ligatures that make the island possible to exist on the cut-out hole, knowing where to make this connection may seen a bit hard at the beginning. Cut-out holeThis is the place where we place the pigment, it should be stretched and pushed hard against the wall or surface to avoid leaks and blurs.How to make a basic stencil:So,now your probably wondering how to make your first stencil. Let's start by designing some simple and solid shapes, I decided to make some sketches of the basic shapes (triangle, square and ellipse). Notice that I did solid shapes, only silhouettes, this might be boring, but before you get the practice of making cut-out holes, you will rather do this kind of stencil. Let's say this is "Level 1". Now with your razor and a ruler, make the cut-out holes on the shapes you designed. Try not to use a scissor, as they are not precise for this kind of work and you probably may have to cut outside the design, what will screw everything.How to make lines using stencils:After praticing some other basic shapes you probably will get bored of it at some point, it's time to go to "Level 2". So, do you remember the stencil parts I explained before? More specifically the bridge and the islands, this will be necessary in order to create more complex shapes. So, how would you do the basic shapes with only lines? The answer would be probably this: As you probably notice, in order to make the line just transform the inside of the shapes in big islands, this can vary depending on the size of the outline you want to get.Making letters:The same logic goes for making letters, you can make more solid and square shapes in the beginning like the sample bellow: With time and patient, you will understand how to apply the bridge/island technique on the letters too, it's like rendering but on paper.Applying the stencils:I supposed most of you guys never used spray paint, so here some tips before getting your hands dirty:First of all: don't get your hands dirty, you can use gloves as you will have to use one of your hands to stretch and push the stencil. Just a glimpse of how your hand will look like If you don't use any gloves. I also advise you to use a 3M gas mask with a niosh filter (with a black stripe) as spray paint always have some toxic fumes that can't be prevented with regular paper masks. Please take care of your health, you will thank me later. Talking about spray brands: My two favorites brands are Spanish Montana (the MTN 94 line more specifically) and Ironlak. These are paint created specially for aerosol art, so they have a really good drying, coverage and pressure. Both these cans are middle/low pressure, what I think it's better when dealing with stencils. A New York Fat Cap it's the most recommended spray cap for this technique, as it can range from thin to thick lines. Also the coverage of this cap is quite uniform, the one displayed on the picture is a Ironlak New York Fat Cap. Now this is really important: Your spray trace is determined by factors as type of cap, distance from the wall, pressure applied on the cap and speed of the spray. So here's a example that show the most common traces:1- This usually happens when you put your spray can too close to the wall, please notice that it makes a solid trace without any blurring. This kind of trace is good when you're making a Graffiti piece trying to fill letters, but it's not that good for stencils, as If you cross the trace on the same point more than one time, you will probably make it drip and that's not cool.2- This one is actually what I think it's the best for using stencils, not too solid and not too blurry. With a low pressure spray can you can do it without much hurry and worries about drips.3- You should avoid this one, unless you're working with gradients as on a realist painting. This trace happens when you put your can far from the wall, even If you push the cap harder you will see that it takes more time to fuel the circular trace. Not recommended for stencils as they usually blur outside the safety border. This is actually what I think is the best distance to get the second type of trace, don't forget to measure the strenght you put on the cap as it's one of the factor that will influence on making a stencil. Now for some instruction on placing the stencil: you can't just grab it with your fingers and try to fill thru the holes, this way you will only get some really blurred shapes, even If you spray correctly. You should stretch and push it against the wall, try to minimize at maximum the space between the stencil and the wall.Patterns:Lot of artists use stencil for creating patterns on their paintings, it's actually the best way when it comes to traditional methods as you can reuse the stencil many times. At first I would recommend you to create a more geometric stencil, as it's easier to create and have a good result. I decided to do this arrows as used on some street signs. Now just apply the spray, there's not great deal about it, just make sure you're not spraying over where you already made the stencil.But Marcos, I don't know how to draw - Making stencil with photos and drawings:That's funny but most person who create stencils are not virtuose artists, most of them don't even know how to draw actually. So here's some tricks you can do If you're one this persons. First grab a magazine cover with a picture on the front. Using a Sharpie or other atomic pen, mark all the shade of the figure. Later just cut the shades you marked, you will notice that they will give a volume to your stencil. Another way is to get a drawing on the internet, open it on Photoshop and turn it to black and white (command + shift + U / ctrl + shift + U). I decided to get this classic Mickey and cut only the head, as we should start with a simple shape. Later, with help of a white brush, I created the bridges for a future stencil. This is quite easy, later I just had to print and to cut the black areas with the razor. Or....you also can draw it, the Mickey head is basically three circles (one for the head and two for the ears). This is quite logic for anyone who already have experience in drawing characters. Don't matter If you drawed it or printed it, the important it's to define the parts you're going to make the cut-out holes. And here it is: ConclusionI hope you guys had a great time on experimenting these simple stencil techniques. On the next tutorial we will explore some more complex tricks involving this technique, that's it folks!

CSS Quick Tricks #1 - Where to put your CSS

Apart from the awesome design you get fed with here, it is time to start a new series! CSS Quick Tricks! To be honest, I didn't really know where to start, so I thought I'd start at something simple, and then, as we move on, we get in to more advanced topics on CSS. For this quick trick, I'm going to teach you where you can place your CSS, the most efficient way. Where to place your CSS In CSS, there are different ways to put it in function; Inline, Internal (or "Embedded") and External. You've probably used them all, at least one time. What's the difference? How can this question better be answered than with some pieces of code? With an external stylesheet, you create a link to a stylesheet. This is by far the most efficient way when you have multiple pages, running on 1 CSS file. To do this, in the head section of your html document, place this line of code: <link rel="stylesheet" type="text/css" link="directory/file.css" /> As you can see, we've literally created a link to a stylesheet, that is not located in the HTML, or in other words; Is external. With an internal stylesheet, you place the whole stylesheet inside the HTML. This is again done inside the head tag, but in a different way. The reason you might want to put styles inside your HTML, may be, because one page in particular may need some seperate styling, which can cause problems on other pages, or if you just don't want to increase the file size of your CSS document. The right way to place a style(sheet) internally is: <style rel="stylesheet"> * { margin: 0px; padding: 0px; } </style> Left over is the inline way, the reason you use this may be, that just a certain element needs f.e. a red color. However, take my advice; When styling a page, do NOT use this to style your whole page, but just for the little pieces that you couldn't be bothered about in your stylesheet. The way you use this way of CSS styling (some may not even call it CSS) is as follows: <div style="background-color: #fff;"> NOTE: This is just an example. Every CSS selector in here, and you can use it with every HTML element. But what way, is the best way? Well, there's no real answer to this question, because it depends on the way you are going to use it. But when you want to use CSS most efficiently, I suggest using the followng guidelines: If you are going to style multiple pages with one stylesheet, use the external way, and you may even want to use this way on a single page. This may prevent having issues, when the website needs a style update, or some little tweaking. If you just need to style a few elements that were left out on the original stylesheet, for whatever reason, use the embedded way. Like this, you won't increase the total file size of other pages not needing the additional styling, and thus decrease loading time for other pages. If you just need to style a single paragraph tag (or something similar), that neither external nor embedded stylesheets are worth mentioning, use the inline way. And again, take my advice, do NOT use this to style whole pages, it will give a lot of unnecessary code, and when updating/tweaking a page, you will be busy for ages. Conclusion I hope you liked this first one in the new series, so I can do many more! Also, suggestions or questions are always welcome, so I have some inspiration to write about. Thanks!