Profile cover photo
Profile photo
Web Design For Idiots
15 followers -
A guide to help the idiotic web developers of the world.
A guide to help the idiotic web developers of the world.

15 followers
About
Web Design For Idiots's posts

Post has attachment
Check out the newest tutorial we published over on Web Design For Idiots. Untangling the web hosting knot http://buff.ly/1WDdOQV http://buff.ly/1WDdP7j

So you’ve decided that you are going to finally jump in full force and build your own website. Congrats! Maybe you’ve done a little tweaking of a buff.ly/1WDdRMv theme, or you remember the days of customizing your myspace profile, or maybe you don’t know a damn thing about website hosting, but you’ve made a decision. You want a website to tweak and play with until your little heart’s content. What’s the first thing you need? Hosting!

This is a ‘for idiots’ site, so I am really getting down to the absolute basics of how websites work here…

What exactly is web hosting?

Web Hosts (or hosts) are basically places where you put all of your files that make up your website that is accessible by the world. A hosting provider is providing a service to you by owning, managing, and maintaining the computer / computers that are storing and serving up these files.

Why can’t I just save money and make my spare computer a host?

Well, you technically can, but it’s not a good idea. Basically any computer can serve as a website host, but if you plan on doing any routing of internet traffic to your computer in your house, plan on things getting messy. The first issue you will encounter is with your Internet Service Provider (ISP). That is comcast, AT&T, Verizon – basically whoever you pay for access to the internet. If you have a basic home internet package chances are it is against their TOS to run a public web server. If you want to do it legitimately you will have to buy a much more expensive internet package which will basically undo the “saving money” argument for hosting at home. On top of that, you will also need to get a static IP address from your ISP so that you can point your domain name to an IP address that will not change which also costs more money(otherwise you will have to change your DNS settings each time the IP address changes!). Finally, you have the issue of simply having lesser software options, lesser computer power, and lesser security against hackers. The small amount of money you pay to a hosting provider is well worth the money, time, and security that it would cost you to host from home.

So what are your hosting options?

There are a million ways to skin a cat (ew, I just realized I hate that saying). The type of hosting you will need will depend directly on the type of website or web application you want to build and what you plan on doing with it. I will outline the basics and what they mean for you.

Share web hosting is the most commonly used type of hosting among small businesses. It is a very affordable but mostly secure solution for businesses that want a website to show to the world that does not require a ton of resources. The basic idea is that they store a large number of websites on each server computer. This puts your website on a computer with hundreds or thousands of other websites so that they can charge less money to you.

The good: Its very affordable. As stated before, they are able to give very good prices because they put a bunch of people on one server. It offers a hands off approach to having space on a server for the website owner. As a website owner, you don’t have to really think about your web hosting at all. The hosting provider will manage it all for you and all you need to think about is building your website. Some of the larger companies also have 24/7 phone support that is relatively good, especially for beginners.

The bad: Because you are on a server with any number of other websites that are doing any number of things both legit and shady, you don’t really know what you are jumping in to. While your hosting account is completely partitioned from other users, and other users can not see anything you upload (and you can’t see theirs) you are still connected and hosted from the same machine. That means that if one account is doing some email spamming, or something else shady it will affect the performance of all sites hosted on it. Most quality hosts are able to pinpoint the offending account and freeze them until they find out what is going on, however. Also, a little less commonly, if an account has poor security on their own scripts, they could potentially open a backdoor to a hacker which could possibly take over an entire server and hack all accounts on it. This sounds a lot scarier than it is and could be easily remedied once the hosting provider notices it. This is one of the many good reasons for you to keep a current backup of your site on your local computer.

Virtual Private Server (VPS) is could be thought of sort of like a half step between a dedicated server and a shared hosting account. A VPS basically gives you an actual partition of a server. This means that one computer is essentially segmented into a few smaller computers. It is not like having a shared hosting account because a VPS will act…

Post has attachment
Check out the newest tutorial we published over on Web Design For Idiots. How to create a custom slider with Pods! Pt2 (adding text to your slides) http://buff.ly/1P8lndS

If you have not checked it out yet, start with PT1 of this series.

If you followed the tutorial for how to create a custom image slider tutorial PT1 you should now have a slider that is sliding images across the screen, but you’re here because you also want an editable title and excerpt for each slide. Slide layouts that include a title, excerpt, and a link are the most common around, and the Pods Framework makes it very easy to build your own quickly.

Step 1

First thing you have to do is build out your fields for your slides. Go back to your Pods admin area and click “edit” on the ‘Slider’ pod you just created and add the following new fields: Title (type: plain text), Excerpt (type: plain paragraph text), Read More (type: plain text).

*Note that if you wanted you can use the WYSIWYG field type for excerpts. This will allow you to customize the formatting of your text area without writing code.

Step 2

Now we must pull in the data from our new fields to our template so that we can easily display them inside each slide.

if( $total_slides > 0 ) :

//looping through each slide
while ( $slides->fetch() ) :

// set our variables
$slides_name = $slides->field('name');
$slides_banner = $slides->field('image.guid');
$slides_link = $slides->field('link_to');
$slides_perma = $slides->field('permalink');
/* newly added extended fields */
$slides_title = $slides->field('title');
$slides_excerpt = $slides->field('excerpt');
$slides_readmore = $slides->field('read_more');

Step 3

Let’s add your new fields to our slides!

<div class="flexslider">
<ul class="slides">
<?php
// if there are no slides, do not run this code
if( $total_slides > 0 ) :

//looping through each slide
while ( $slides->fetch() ) :

// set our variables
$slides_name = $slides->field('name');
$slides_banner = $slides->field('image');
$slides_link = $slides->field('link_to');
$slides_permalink = $slides->field('permalink');
/* newly added extended fields */
$slides_title = $slides->field('title');
$slides_excerpt = $slides->field('excerpt');
$slides_readmore = $slides->field('read_more');

?>
<li id="<?php echo $slides_permalink; ?>" >
<a href="<?php echo esc_url($slides_link); ?>">
<?php echo pods_image($slides_banner); ?></a>
<!--- newly added code ->
<div class="slideContent">
<h1><?php echo $slides_title; ?></h1>
<p><?php echo $slides_excerpt; ?></p>
<span class="readmore"><a href="<?php echo $slides_readmore;?>">...read more</a>
</div>
<!-- end of newly added code ->
</li>

<?php endwhile; ?>

<?php endif; ?>

</ul>
</div>

Step 4

Styling. You can now style the heck out of your new 

<div class="slideContent">

 container. Here is some starter styling for you.

.slideContent{
position: absolute;
left: 0px;
bottom: 10px;
background: #fff;
padding: 15px;
}
.slideContent h1{
font-size: 24px;
font-weight: bold;
}
.slideContent p{
display:block;
}
.slideContent span a{
font-size:11px;
color: red;
text-decoration: underline;
text-align: right;
}

In Part 3 I will show you how to make a slider with variable slide layouts! This is useful if you have photos in your slides where the text overlay may look better on the left side or the right side. It will allow you to format your slides entirely based on your layout selection in the administration screen! 

Wanna know why this web designer’s blog looks a little basic and untouched? Check out what this blog is all about and the Web Design For Idiots project

Post has attachment
Check out the newest tutorial we published over on Web Design For Idiots. Protected: Making a Custom Fields Framework http://buff.ly/1J2AmxZ

Posts in this series

Making a Custom Fields Framework

This content is password protected. To view it please enter your password below:

Password:

Post has attachment
Check out the newest tutorial we published over on Web Design For Idiots. Getting Coding & WordPress Help for Free from Strangers http://buff.ly/1dDbS5u

When I am working on a deep programming project I tend to spend a good amount of time asking questions and also paying it forward by answering questions. I handle a lot of beginner questions and thus have found that many people have no idea how to ask for technical help or programming help at all.

First rule: You are not entitled to anything.

You are in an IRC room that is there for members of the community to receive and offer help. This does not mean that you are entitled to help from someone in that community. Every single person in an IRC room like #WordPress or ##javascript or ##php is there on their own free will and not getting paid by anyone to be there to offer help. If you require urgent, hand held help you should consider hiring a consultant to walk you through your problem and get you a solution within your own deadline. Your deadlines mean nothing to a stranger offering help for free on the internet, and rightly so.

Second rule: Explain your overall goals (What are you trying to do)

When you are asking for technical help of any kind, you have to remember that the stranger on the other end has literally zero idea of what you are doing, how you are trying to do it, and what your desired outcome is.

Your #1 goal should to try not to be vague. So many people come in with all their technical terms about what they’re trying to do not realizing that starting off that way can be really confusing and that the way they think they’re supposed to be doing something isn’t even the “right” or best way.

Read these two statements and decide which is the easiest to help with:

“Can I get a list of all sub pages of a parent page and display them on the parent page?”

“I have a website where I need to list a educational courses and lessons. I need to be able to create an “Academy” and then create a course for each academy and a lesson for each course”

For me, and most other people, the second one is the best start for getting help. You immediately get an idea of what the person is building, what kind of content you are working with, and are led to asking more specific questions.

The fact is, this is a real life example. A user asked the first question and had I just googled it and given him whatever answer, no matter how hacky it was, he would have had it done and left relatively happy (for now). The thing is, though, that in probing for my questions I found that the better question should have been the second one that I made up and wound up directing him entirely away from parent/child pages based on his requirements.

Had I just given him the answer to his initial question he would have been back in the room at most a day later with a new more complicated problem and would have wound up ripping the whole thing apart and starting over.

Third rule: Give all relevant information

You would be amazed at how often people leave out extremely important information just because they didn’t think it was needed. If it’s at all relevant to your needs, share it. Someone debugging your code that they have never seen or working with before could possibly use it. Even if it wasn’t valuable to you when it happened.
If you did any testing on your own, make sure to tell the person helping you what you did and what the outcome was. That could minimally skip the task of asking you to test something you already did and ideally could give the person enough info to tell you what is going wrong. Do not leave out any dependancies (such as, “this needs X to work”) and any requirements (“this code must also work on an iphone”).

The biggest rule is respect. Even if it feels like the person helping you is asking mundane or weird questions, answer them. The person helping you is doing it for free, they don’t have to be doing it at all. Remember that people have different ways of debugging things and some people need to move through some of the basics before they get down to the real debugging.

Oh and one last thing:

RESPOND QUICKLY! If you can not respond to the person trying to help you quickly, don’t ask for help or tell the person you will be AFK for an extended period of time. There are few things more frustrating than 5 minutes between a question and an answer.

 

Post has attachment
Check out the newest tutorial we published over on Web Design For Idiots. HUGE DISCOUNT CODE FOR WPENGINE!! http://buff.ly/1cKkXZV

To get your 40% off of any plan click this link  and use promo code SSL40OFF 

I was just notified of a really great deal from one of our current advertisers, WPEngine. They are right now offering 40% off any of their plans PLUS 2 free months.

As a newbie, deciding on the best hosting company for your WordPress site can be overwhelming and confusing. Most people tend to just go with whatever comes up first in search results or a company who’s name they recognize like GoDaddy.

For me, having had dealt with a number of hosting companies with a huge array of different types of sizes from large CMS systems to small personal blogs and everything in between, being able to rely on solid WordPress security and stability that WPEngine provides is a massive benefit.

WPEngine is not perfect for everyone, but if you are someone who does not want to be an IT department, does not want to manage their hosting environment themselves, and does not want to even really THINK about hosting and wants to focus on building and developing their website, this is the company to go for. Whether you’re an experienced developer or a complete web dev noob, WPEngine is a great choice.

To get your 40% off of any plan click this link  and use promo code SSL40OFF 

Post has attachment
Check out the newest tutorial we published over on Web Design For Idiots. The number one tip I would give to people learning to code http://buff.ly/1c3YM1e

It is very easy to get overwhelmed when jumping in to the world of web development and programming in general. To most people, looking at code on a page is like looking at a foreign language. Thats because it is! 

Programming is basically the language of computers. There are many different dialects; php, C++, java, python, django; but they all have a basis in simple logic. Half of the battle of learning to code is learning to translate the code in front of you and understand what it is doing and why.

Reading Code

That’s it! Read your code. If you’re looking at code and you feel completely lost, just start reading it as if it was a set of instructions.

Here is how you do it:

Take this block of very basic PHP from the PHP manual 

<?php
if ($a > $b) {
echo "a is bigger than b";
} elseif ($a == $b) {
echo "a is equal to b";
} else {
echo "a is smaller than b";
}
?>

The above posted code is what is called a “conditional statement” and they are really the easiest thing to understand and “read” when you start getting in to programming.

This is how I would translate it:

If A is greater than B, say "a is bigger than b".
Otherwise, if A equals B, say "a is equal to B".
If neither of those two things are true, say "a is smaller than b"

Once it is translated into “readable” text you can get a better grasp on what is happening and start to alter things.

Here is a different example from the PHP manual

$list = (array(1, 2, 3, 4);

foreach ($list) as &$value) {
$doubled = $value * 2;
}

This is how I would translate it:

 

Assign a list that contains 4 numbers to the variable $list.

For every number in this list, assign it to the variable $value.

Take the number assigned to $value, multiply it by 2, and assign to the $doubled variable.

This is a super simple “tip” but I have come across many coders who have literally never thought of “reading” code and instead were trying to dissect it line by line. As an added bonus, if you get in to the habit of reading code you should also get in to the habit of commenting your code which will only help you in the long run.

Now that you’re learning to read and translate code, it’s time to start learning syntaxes. Each language is different, so decide on the language you want to learn and grab the manual and have at it.

 

 

 

 

Post has attachment
Check out the newest tutorial we published over on Web Design For Idiots. Explicitly Implied – Giving weight to styles and classes http://buff.ly/1I7G1E5 http://buff.ly/1I7G2b8

On the surface, CSS is one of the easiest programming languages to learn. You don’t have to work overly hard to understand what it is doing and it requires no real logic to read. It’s simply a list of “styles” that you want to apply to your content. A style could be anything from designing how you want your fonts to look (color, size, weights) to how you want your content to lay out on your page (container width, margins, placement).

The syntax of CSS is easy. You have your “selector” which is the name that matches the element in your HTML that you want to style, and then you have your style attributes. Each style attribute is finished with a ‘;’ and a line break and are wrapped in curly brackets to contain it all within it’s selector.

An example:
.myClass {
font: “Arial”, san-serif;
weight: bold;
}

This all seems very easy. You identify your HTML element using class=”myClass” or id=”myID” and then you go to your CSS file and you type out basically what I have shown you above and add your styles. There is an infinite amount of styles (aka CSS attributes) that you can apply to your selectors. You can find a list to all of those CSS attributes here. http://buff.ly/1I7G1E8

CSS becomes increasingly more difficult as you get down into the trenches with it.

Explicit vs. Implied – CSS scope

Scope is typically used when talking about logic based programming and rarely when talking about CSS, but it does have value here. Scope basically defines the context in which this attribute or variable is in effect. Once we are outside of it’s scope, it is no longer available. Think about it in every day terms:

When you quote a project you give a project “scope” where you define the exact type of work you will do on the project. Let’s say that project is to create a basic single-page landing site for a client. As you build the site the client asks you if you could include an “About Us” page and a “Contact” page. You would tell the client this is outside of the scope of this project and therefore you would have to redefine a new project with a new quote to build this.

That is what scoping is in programming as well. Once you are outside of the scope you must redefine and re-value the variable or attribute.

 

Post has attachment
Check out the newest tutorial we published over on Web Design For Idiots. Ternary Operators – php shorthand ?: http://buff.ly/1vo0o8S

Ternary operators are probably the most confusing code to look at but at the same time probably the most underused style of coding for new developers. Ternary operators doesn’t give any additional functionality to PHP programming aside from simplifying and minimizing the number of characters you have you type in order to achieve the desired outcome. The goal with ternary operators is to make if/else statements fit on one line. I have found this to be very helpful if you need an if statement inside of an HTML element.

Here is a good scenario. You are making a form that edits some existing content. You want to pull in the content from your database and display in your form. For something like checkboxes you want to check if the value is “on”, output “checked” in your HTML, but if it is “off” you want to not display “checked”.

What this looks like without ternary operators:

<input type="checkbox" name="submitadmission"<?php if (!empty($cost_free)){ echo'checked';} ?> placeholder="cost" />

That’s not too bad, but  with ternary operators we can simplify it even more.

echo '<input type="checkbox" name="submitadmission"' . (!empty($cost_free))? 'checked'; .' placeholder="cost" />'

Firstly, we are echoing the entire input and then we concatenate* our strings together. Just so you are aware, you want to wrap all of your HTML elements in a single quote ( ‘ ) and link it with your php with it using a dot ( . ).  

With this way of typing our if statement we removed the need to open and close PHP inside of the HTML element by echoing the entire thing. Then we simplify the if/else statement using ternary operators.

Ternary operators have the following syntax:

(condition) ? (return value) : (false return value)

You are essentially dropping the actual words “if/ else” and assuming that is what you mean by adding ? between your condition and your return TRUE value and : replaces the word else and returns if the condition is false.

Just one more example

echo 'Based on the number of cats you own you are a'.($cats > 3 ? 'crazy cat person' : 'an animal lover');

 

Things you should know before using it

Ternary operators can get unruly fast! You really only want to use it to replace a simple if/else statement without too much logic built in.

Make sure to comment your code well so that you or a team member can go back and easily see what you were doing

If you find yourself using too many parenthesis, consider why you are using ternary operators in the first place. Is it really simplifying anything at that point?

con·cat·e·nate

kənˈkatnˌāt/

verb

formaltechnical

link (things) together in a chain or series.

Post has attachment
Check out the newest tutorial we published over on Web Design For Idiots. Customizing the output of the [gallery] shortcode http://buff.ly/16UJfha

The default output for the WordPress gallery is pretty bare bones. They simply output the pictures in a whatever x whatever grid and allow you to link to the file or media page from each pictures. The great thing about that is that you can really go nuts customizing it and make it into anything you need.

This snippet of code will make anywhere you use the \\ shortcode into a flexslider with the thumbnail carousel. If you didn’t want the thumbnails you can simply remove the chunk of code where I loop through the images again to output the carousel.

First you have to include the flexslider scripts in your theme by pasting this in your functions.php and upload the files to the corresponding directory

function flexslider_scripts() {
wp_enqueue_style( 'flexslider-style', get_template_directory_uri().'/js/flexslider.css' );
wp_enqueue_script( 'slides', get_template_directory_uri().'/js/jquery.flexslider-min.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'mofflygroup_scripts' );

 

Paste this code in your functions.php. You can edit the output to have any HTML structure you would like. This can really be a base for any type of slider.

 

add_filter('post_gallery', 'my_post_gallery', 10, 2);
function my_post_gallery($output, $attr) {
global $post;

if (isset($attr['orderby'])) {
$attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
if (!$attr['orderby'])
unset($attr['orderby']);
}

extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'thumbnail',
'include' => '',
'exclude' => ''
), $attr));

$id = intval($id);
if ('RAND' == $order) $orderby = 'none';

if (!empty($include)) {
$include = preg_replace('/[^0-9,]+/', '', $include);
$_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));

$attachments = array();
foreach ($_attachments as $key => $val) {
$attachments[$val->ID] = $_attachments[$key];
}
}

if (empty($attachments)) return '';

// Here's your actual output, you may customize it to your need
$output = "<div id=\"slider\" class=\"flexslider\">\n";
$output .= "<ul class=\"slides\">\n";
// add post thumbnail into the mix

if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
$thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail', true);
$thumb_url = $thumb_url_array[0];
$medium_thumb = get_the_post_thumbnail( $post->ID, 'medium');;

$output .= "<li id=\"Slide1\" data-thumb=\"$thumb_url \"> $medium_thumb</li>\n";
}

// Now you loop through each attachment
//start count
$i = 2;
foreach ($attachments as $id => $attachment) {
// Fetch the thumbnail (or full image, it's up to you)
$img = wp_get_attachment_image_src($id, 'full');

$output .= "<li id=\"Slide$i\" data-thumb=\"$img[0] \">\n";
$output .= "<img src=\"{$img[0]}\" width=\"{$img[1]}\" height=\"{$img[2]}\" alt=\"\" />\n";

$output .="<div class=\"galleryCaption\">
$attachment->post_excerpt
</div>
</li> \n";

//update count
$i++;

}

$output .= "</ul>\n";
$output .= "</div>\n";

$output .= "<div id=\"carousel\" class=\"flexslider\">\n";
$output .= "<ul class=\"slides\">\n";

$sm_thumb = get_the_post_thumbnail( $post->ID, 'thumbnail');;

$output .= "<li> $sm_thumb</li>\n";

//loop through them again to display the carousel
foreach ($attachments as $id => $attachment) {
// Fetch the thumbnail (or full image, it's up to you)
$img2 = wp_get_attachment_image_src($id, 'thumbnail');

$output .= "<li>\n";
$output .= "<img src=\"{$img2[0]}\" width=\"{$img2[1]}\" height=\"{$img2[2]}\" alt=\"\" />\n";

$output .="</li> \n";

}// end carousel loop

$output .= "</ul>\n";
$output .= "</div>\n";

return $output;
}

Now to simply initialize the slider using flexslider’s functions. You can put this directly in your footer.php or you can include it in your functions.php using wp_footer to output the script.

$(window).load(func…

Post has attachment
Check out the newest tutorial we published over on Web Design For Idiots. Deep linking with flexslider http://buff.ly/1CdpHkj http://buff.ly/1CdpHkl

Deep linking is the ability to link directly to content on a page, and deep linking with a slider means you want to open a page and have a specific slide already loaded in your slider. Flexslider has some very useful functions that will allow us to easily update the URL path with the ID of your slide and load your slide in the frame with just a link.

Flexslider has a number of options which you can see here but we are going to focus on the “before” function which runs as each slide is changing and the “startAt” function which tells flexslider which slide to load to start.

To start, you must know that each slide’s containing element must have a unique ID set. For instance, I use an unordered list so I would have something like 

<li class="myslide" id="Slide1">......</li>

 Each slide’s ID should be unique.

First: update the url path every time a slide changes

We are going to update the browser path with the ID of the slide and manipulate the browser history using history.pushState() and since we want to do it every time a slide changes, we will do it using the “before” function.

before: function (slider) {
// get the ID of the slide we are animating to
id = slider.slides[slider.animatingTo].id
// set the URL path to #slideID
history.pushState(null, null, "#" + id);
},

If you place just this code in your flexslider script you will now see your URLs updating with every slide change and should look like buff.ly/1CdpJJ8. We are halfway there!

Next: set the “startAt” point based on the url deep linked from

Since that only updates the current browser’s history, we need to do some extra work for people who are clicking through from one of your URLs to a slide. We want to tell flexslider to open a specific slide based what exists after the #.

// create a variable to store the slide index to start at.
startAtSlideIndex = 0;

// see if a tab anchor has been included in the url
if (window.location.hash != '') {

// Set the startAtSlideIndex variable to one less than the ordinal passed
// note: if you have more than 9 slides, this will fall down and you'll
// have to do some more complex string manipulation.
// A querystring variable might be easier, especially if you use
// someone else's url parser ;)
// Important: assumes the format of the hash is '#SlideN' where N is the digit we want.
startAtSlideIndex = window.location.hash.substr(6,1)-1;

This little snippet still needs work, as you can see. It will not work on sliders with more than 9 slides because of how I am getting the index value of the slide. I am completely open to suggestions regarding the best way to query the path to get the slide index. For now, this does work and I felt it worth sharing with you.

 
Wait while more posts are being loaded