Is it difficult to install a plug-in?

Installing a plug-in is the easiest thing on earth. There is however a thing called folder permissions that make things a little complicated for about 10% of users.

Folder permissions are discussed in my blog article on the subject. You can take a look at it here.

Automatic Installation

Automatic installation is by far the easiest way to add a plug-in. After selecting “Plugins” from the main menu you will be taken to the Plugin page. The button for adding a new plugin is next to the title as in the photo below.

The next screen will take you through the various ways of locating the plugin that you want to add. You can browse plugins by popularity, time of upload, or by keyword. By way of example lets search for the Akismet Plugin. Simply type Akismet into the search box.

You will be presented with all the plugins found within your search criteria. For the Example we have Akismet at the top of the list. With a link to install it.

After you clicked on install you will see the plugin being installed. You have the option to activate it. Activating the plugin is quite important. You may have a selection of plugins available, but only want to work with one or two. For that reason you can have a lot of plugins installed. but not activated.

Done and Done!.

Most plugins have a admin panel where you can further tweak the settings. Just look for your plugin’s admin panel in the main menu.

Semi-manual installation

The only difference with manual installation is that you already have the plugin on your computers hard drive, and need to upload that into your installation. Important here is to remember that you need the plugin in a zip folder, and not unzipped. You can now upload the plugin by selecting “upload from the menu in step 2 above:

Manual installation.

The last way of installing is by uploading the plugin with its folder and files to the plugins directory in your website. I can think of no reason why it might be necessary. If you receive a plugin that you wish to install, and it is not in a zip folder. simply zip it yourself and upload it.

Plugin Maintenance

Throughout the lifetime of a plugin it gets updated by the author on a regular basis. You have the option of updating the plugin whenever it gets updated.

The result is a quick implementation that revolutionized a mundane task for us. I bet it will do the same for you if you are in the same position.

Write the function:

Open your functions.php file and write the function that will inset the html.

function nets_download($atts) {
     // extract the shortcode values to an array
     extract(shortcode_atts(array(
          "title" => '',
          "alignment" => ''
     ), $atts));

     global $post;

     // get the zip attachment id
     $zip =& get_children('post_type=attachment&post_mime_type=application&post_parent='. $post->ID);
     if ( empty($zip) ) {
          // nothing found
     } else {
      // find the address of the first uploaded zip
     $arrKeys = array_keys($zip);
     $zipUrl = $zip[$arrKeys[0]]->guid;
     // construct the html code
     $output = '<p class="zipbutton' . $alignment . '">';
     $output .= '<a href="' . $zipUrl . '" title=" download ' . $title . '" >';
     $output .= $title;
     $output .= '</a></p>';
     return $output;
     }
}
 // add the short-code
add_shortcode('dwnl', 'nets_download');

The Button

I made a quick button in Photoshop for the tutorial. It is included in the tutorial download pack.

The CSS

styling the button is easy. In the short-code you can specify the alignment, and create a style for it. I use 3 types of alignment namely “none” for no alignment, showing the button in the center, “left” to float it left and “right” to float it right.

“Left” “none” and “right” is terms that is often used in css files, so to ensure your code doesn’t get mixed up, I created “zipbutton” and “zip_” in the code to make the class name unique. If you would like to make your own styles and you named your alignment “blue” in the short code (if you have different colors of buttons as example) the class name would be “zip_blue”. That way you can specify quite a few different buttons on your site each styled uniquely.

first of the code for no alignment:

// styling the button
p.zipbutton a{
display: block;
width: 219px;
height: 101px;
background: url(images/dwnload.png) no-repeat top left;
line-height: 130px;
padding-left: 30px;
color: #5f5f5f !important;
font-weight: normal !important;
overflow: hidden;
}
// no alignment
.zip_none a{
margin: 0px auto;
}
// align left
p.zip_left{
float: left;
}
// align right
p.zip_right{
float: right;
}

Usage

Uploading is easy. open your media manager and upload the zip file. (we choose to always zip the file before uploading to save space, and make the url easy to find in the database using our short code). Then simply add the short-code to the post as in the example

[dwnl title="your short description" alignment="your button alignment" ]

Get the code

You can download the code for the tutorial by clicking on the stylish new button below.
[dwnls title="Code for tutorial" alignment="none" ]

The good, the Bad and the Ugly – Identify your customer.

Starting out we answered every request, providing detailed time frames, descriptions and costing analysis to find out  that our requests are being used to cost projects without the intention of ever using us. Realizing that we played  into the hands of “the bad and the ugly”we set out to find a system of classifying the design requests and things started to take shape. There is no hard and fast rules on weeding out the bad requests. Talk once and listen twice. Think before you promise. Ask a fair price and stand by the price you made.

There are thousands of designers out there that have the need for a good coder. Once you nurtured a few strong working relationships you will be set with a steady stream of project requests that comes in regularly.

It’s still a business  — Yours.

Getting into a working relationship with a designer can easily bring a false sense of security to to your business.  There are three pitfalls that we needed to overcome:

You are still the one responsible for your own income.

Coding is much nicer than selling! Our first few requests from designers that turned into nicely paying projects got us into a false feeling of “we’ve got it made”. a Few fat months turned into a few lean months and we were nicely freshened up to the realities of life.  The most important desicion we needed to make was to keep talking business with everyone that came along, and not to rest on our laurels.

Protect your interests, even if you think it is not necessary!

Having a “let’s do it” frame of mind can bring you far in life, no risk – no return right? , there is however a stage where you have to think abut your own interests. The most typical request that we receive is one promising a great stream of work and a increased fee if only we can do this one project at a huge discount. Up to today we still want to see the large stream of work and the increased fee. We have however typed away large parts of our lives, whilst others have made a profited from our ingenuity. Think before you leap!

Mr. Nobody gets credit, the others pay cash.

Donald Trump preaches that if you want to learn how to make a million, go and ask a millionaire. So here’s advise about not giving credit from coders who have given credit  and got burned!

We are in dire need of our standard deposit and prompt payment of the full amount for the following reasons:

1. With our own clients we have complete control over the design, coding and content process, and can “push” them to get outstanding content, photo’s and other elements. When working with designers, we are part of a process that we cannot control. If we work on 3 or 4 projects that gets paused waiting for elements or decisions, it will have serious implications on our own cash flow.
2. We strongly believe in a proper business process when dealing with clients. It assists us in not getting hurt halfway through a project. If the designer that you work with do not have the same principles, you are taking the risk with them and will get hurt along the way.

Know your stuff

Most designers have a basic understanding of css, html and even some php. You can be assured that you will be called in to assist with some heavy lifting. It is therefore necessary to have a good knowledge of the medium that you work in, being it php, CMS’s or E-Commerce.

Don’t make promises for work that you know you have no knowledge in. This is not a time to wing it. Promises are being made on the strength of your acceptance of a project and when you let customers down, word will get around.

Study hard and make sure that you have a knowledge of all the latest techniques and are in a position to easily find the answers that you do not have questions to. A good relationship with other coders that you can call unto for assistance is always a benefit, even if it might eat into your profit.

Advise properly

One of the adjustments we needed to make is to “live and let live”. Like every coder we have a firm belief on coding practice and what we see as a good usability. Suddenly we get orders for coding that makes the hair on the back of our necks stand up.

We found the best practice to be to give advice politely stating the reasons why we believe differently and then let go. There’s no point in winning the battle and losing the war! We generally see that the things we say stick and see them corrected in follow up projects.

Give proper feedback, update regularly and don’t forget after sales service.

One of the most important aspects when assisting a design team is setting up proper avenues of feedback. After experimenting with many ways in which to achieve this, we came up with a solution that worked for us, being the setup of a development server that gets updated throughout the project.

The extra work in copying files are easily offset by the time we save in telephone and Skype calls, IM’s and so forth. It also allow the designer to see changes needed in time and act accordingly.

Regular contact after your project delivery will ensure all small niggles are being sorted and will assist in you in getting feedback on the usability of the features you added.

Finally. The standard time for the delivery of the project is Yesterday, get used to it.

Design elements

For this tutorial we’ll use a truck icon from Icons Land. You can visit the site here. The download link for the demo icons is at the bottom of the page. We’ll also be using the Satisfaction font from Fonts101 here.

The Setup

In Photoshop open a new file [PC: CTRL + N /  MAC: Cmd + N] with dimensions 1600px wide by 1200px high, and a background color #1E1E1E.

We need to port the design to the web so adding guides to assist  in mapping the size is a necessity. First add a vertical guide at 320px as in the picture below. I also add a vertical guide at 1280px. Next add a horizontal guide at 700px. Lastly divide the design space in two columns with a vertical guide at 800px.

Add noise

To assist with extra visual interest for the background add some noise. Click on filter, noise, add noise and select 2 in the amount box.

Sunburst

The sunburst will be in the left column, but we do want it to spill over the guides as to create added visual interest. Start by selecting white as foreground color. The easiest way to do this is via shortcuts [PC and MAC: D and X]. Open up the info window [PC and MAC: F8]. Select custom shapes [PC and MAC: U]. Now select the sunburst shape as in the picture below and draw a shape 550pixels by 550pixels.

Open the layer tool [PC and MAC: F7]. Add a new layer [PC: SHIFT + CTRL + N / MAC: Shift + Cmd + N]. Now press down CTRL (MAC CMD) and click to select the sunburst shape in your layer tool. Select the bucket tool and then from the tool select the gradient tool and ensure that the radial gradient is selected.

In the new layer that you have created draw a gradient from the center of the sunburst shape almost to the edge. You can now delete the sunburst shape, and your left with a neat sunburst. Decrease the opacity of the layer to 15% and change the size and position until you are happy.
You can now add the tow truck to the center of the sunburst shape.

Text

The fonts we’ll be using is Impact and Arial. Select the color #FFA814 as foreground color and type your sites name using the Impact font at 60px in capital letters.  Just below that in the color white (#ffffff) type “Maintenance Mode” using the Arial font at 48px.

To create added visual interest, we’ll underline Maintenance mode. Click on the Marquee tool and keep the mouse button down until you get the secondary menu for the marquee tool and then select Single row marquee tool. Add a new layer [PC: SHIFT + CTRL + N / MAC: Shift + Cmd + N]. Click just below the Maintenance mode text and a single line is selected. Fill the line with black (#000000). Deselect [PC: CTRL + D / MAC: Cmd + D].

With the marquee tool [PC: M / MAC: M] make a selection of the single black line the same width as the maintenance mode text. Invert the selection[PC: SHIFT + CTRL + I / MAC: Shift + Cmd + I]. Press the delete key on your keyboard, and your left with a line the width of the maintenance mode text. Deselect [PC: CTRL + D / MAC: Shift + Cmd + D]

We will now create an inset for the line. Select the layer with the single black line, right click your mouse and click on duplicate layer. Move the new layer down one pixel. Select layer style, and select color overlay. Select white (#ffffff) for the overlay color. Afterwards change the opacity of the layer to 7%.

Select the text tool, and type in your main message in white (#ffffff) and size 18px. Our message is “We are currently conducting scheduled maintenance and should be back in:”

Countdown timer

Now we’ll design the countdown timer. Select the custom shape tool [PC and MAC: U] and select the rounded rectangle tool and change the radius to 9%.

Create a rectangle 95px wide by 60px high in black and decrease the opacity to 30%. We will now add a new layer style to the shape. Click on add layer style and select stroke. Copy the settings in the screenshot below.

Add the countdown timer text in the box. We used the color #FFA814 for the numbers in Arial font size 24px. For the description in each box we used the color color #C5C5C5 in Arial font size 18px.

You have to make one box each for : days, hours, minutes and seconds.

We follow the countdown timer up with a last message, appologizing for the convenience in color #FFFFFF font Arail and size 18px.

Last step

To round off the design we add a footnote as if someone was signing the note in his or her personal handwriting. We use the satisfaction font for that in size 30px and color #FFA814. We also decided to tilt it 10% to the left.

Only one thing left to do and that is to add a line below the handwriting. When a person signed his name with a ballpoint pen and draws a line below, you can often see that the pen point has run out of ink, and that the pressure on the line starts from little pressure to more pressure. We are trying to emulate that.

Select the marquee tool: [PC and Mac: M]. Create a new layer [PC: SHIFT + CTRL + N / MAC: Shift + Cmd + N]. Reset your colors [PC and Mac: D]. Create a new rectangle about 200px wide and 20px high. Select the gradient tool [PC and Mac: D] and fill the rectangle that you’ve just drawn from right to left so that the solid color is at the right hand side and no color at the left. Deselect [PC: CTRL + D / MAC: Cmd + D] and select the move tool [PC and Mac: D]. We need to re size the rectangle that we just drew until it is still 200px wide, but only 1px high. the rest of the process, is exactly the way we did with the line above. Duplicate the layer. Move one pixel down. Overlay with white. When decreasing the opacity though, we will only decrease it to 25% instead of 15%.

Lastly we will merge the two lines [PC: CTRL + E / MAC: Cmd + E]. Next move it to below the message and tilt about 8 degrees to the left.

We’re done. We will follow this tutorial with a tutorial to create a countdown timer, and finally will create a website out of the design.