FixWordPress.NET http://www.fixwordpress.net Specialists in all things WordPress Thu, 01 Mar 2012 15:30:33 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 $(document).ready vs. $(window).load http://www.fixwordpress.net/document-ready-vs-window-load/ http://www.fixwordpress.net/document-ready-vs-window-load/#comments Thu, 03 Nov 2011 13:48:15 +0000 Larry Ngaosi http://www.fixwordpress.net/?p=115 jQuery offers two powerful methods to execute code and attach event handlers: $(document).ready and $(window).load. The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics haven’t loaded yet. If you want to hook up your events for certain elements before the window loads, then $(document).ready is the right place.


$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready");
});

The window load event executes a bit later when the complete page is fully loaded, including all frames, objects and images. Therefore functions which concern images or other page contents should be placed in the load event for the window or the content tag itself.


$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
alert("window is loaded");
});

 

]]> http://www.fixwordpress.net/document-ready-vs-window-load/feed/ 0 Content First Website Layout http://www.fixwordpress.net/content-first-website-layout/ http://www.fixwordpress.net/content-first-website-layout/#comments Fri, 15 Apr 2011 01:34:39 +0000 Larry Ngaosi http://www.fixwordpress.net/?p=101 To make this simple;
The html layout of a website with Content First Concept starts with the content then followed by the headers, sidebars, then footer…

<html>
<head></head>
<body>
<div id="main">
<div id="content">
<h1>Page Title</h1>
<p>Contents coming soon.......</p>
</div>
<div id="header"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>

The purpose of this is to let the “crawlers” to crawl the content first.

]]> http://www.fixwordpress.net/content-first-website-layout/feed/ 0 Latest Trends in Web Design http://www.fixwordpress.net/latest-trends-in-web-design/ http://www.fixwordpress.net/latest-trends-in-web-design/#comments Mon, 04 Apr 2011 11:41:46 +0000 Larry Ngaosi http://www.fixwordpress.net/?p=80 Minimalism

Minimalism is not a new concept; it is often understood as the best approach towards communicating a precise message to an audience. By retaining only essential elements, minimalist designers use negative (or white) space to enhance the message and draw in the user.

http://www.blackestate.co.nz/

When aiming for minimalism, I would suggest using a grid system—but keep in mind that designers have mixed opinions about this approach. Without a grid, though, there is a danger that what you produce will appear disorganized and incomplete.

Negative Space

http://usonline.apc.fr/catalog/

The use of negative space in design has been a related emerging trend. Plenty of white space is visually pleasing, and it allows the reader’s eyes to rest. Combining minimalism and negative space pushes a message to the forefront of a design and captures the user’s imagination. Now, white space does not necessarily have to be white; it simply refers to empty or blank space on the page. Empty space makes a page more scannable and helps to highlight the relation between elements through their distance from each other.

Typography

http://www.amazeelabs.com/

Stylized typography is an age-old feature, and today designers are using it as a primary weapon in their arsenal of innovation. Until recently, most have restricted themselves to select web-safe fonts. But with the growing numbers of tools and applications, typography has become a primary design element in its own right. The demand for larger and more exciting fonts is rapidly increasing, and these fonts are replacing the old system fonts as designers play with techniques such as line height. Tools such as WhatTheFont, CSS Typeset and Typetester have helped designers be more creative and allow for different typeface to be used across the web.

CSS3

CSS3 is the latest module of CSS (Cascading Style Sheets). Its much more advanced set of features make this new version the tool of the future. However, there are some mixed reviews as a result of its incompatibility with Internet Explorer and other browsers. Even still, watch out for CSS3 in 2011. Some exciting and distinctive aspects of CSS3 are features like “border radius,” “box shadow,” multiple background images and text shadow. Animations with CSS3 are made easy, subtle and lightweight.

http://chirp.twitter.com/

  • Box and Text Shadows

    CSS3 has made the task of giving an in-depth visual experience (in this case, with shadows) quite easy. Customizable shadow capabilities allow the designer to create various effects like drop and inner shadows. The demand for this capability will only increase as time goes by.

  • RGBa and Opacity

    This is one of the most advanced features of CSS3 and can be applied to any colored element (fonts, borders, background, shadow, etc.). This trend has also gained enormous popularity.

HTML5

http://webdesignerwall.com/

The latest version of the HTML specification is another trend in high demand. It enables the designer and developer to create more readable code and build layouts that are semantically meaningful. It introduces advanced features that help you structure mark-up. Other HTML5 features are APIs, dragging, drawing graphics on screen, canvas, keygen, output and progress.

Textured Backgrounds

http://hugsformonsters.com/

The use of textured backgrounds is another hot trend to follow. The visual experience of the audience increases exponentially if the background is aesthetically pleasing and precise. The points to focus on are simplicity of design and the illusion of textures to create depth and dimension on the page.

Simplicity

http://www.nclud.com/

Simplicity is yet another recent design trend that has captured the respect and imagination of users. The principal of “less is more” is being increasingly applied. As designers, we have always obeyed the demands of clients, often developing websites full of complex, unrelated features and countless repetitions. However, times have changed, and so have the demands of the trade. Users and clients seem to finally understand the importance of simplicity, of removing clutter from the page and allowing plenty of white space. With the need for websites to be mobile-friendly, compatible and accessible, design has to be kept simple. The simpler a website, the easier it is to navigate and comprehend.

Single-Page Websites

http://www.smultronlab.com/

The ever-expanding competition to keep users on a website is becoming more challenging. Visitors scan web pages to locate the information they want, but with each click required to delve deeper into the website, the interest level drop. This phenomenon has led to a growing desire to build single-page websites. For their part, designers must be competent enough to consolidate and summarize all of their content in a standalone user interface.

Print Design

http://www.un.titled.co.uk/

Print media has, of course, been around much longer than the web. As a result, print designers have a longer history to refer to as they master their art and develop their creativity. This could be one reason why many of the latest web design trends are inspired by print media concepts, whether innovative typography, aesthetic backgrounds, negative space or grid structures.

Large Headings

http://www.phase2technology.com/design/

Large headings is another trend inspired by traditional print media (such as advertising brochures, magazines and newspapers) and used to grab the interest of the reader. Given the incredible amount of information online, the attention span of the online audience is far shorter than that of a print audience. Large headings are now a necessity and are almost certain to make an impression and attract users.

Infographics

http://dmtr.org/lunarcalendar/

The use of infographics is only going to grow in 2011. Combining graphics and images, this feature highlights information in a way that makes for a more absorbing environment for the reader. It also allows the key message to be expressed with more clarity and concision. As the need to comprehend complex, diverse pieces of information increases, so will the demand for infographics.

Serif Fonts

http://legistyles.com/

Traditional websites were primarily built with Arial or Verdana font scripts; most designers shied away from serif fonts because of their poor readability on traditional browsers. Today, mobile applications are the most popular with online businesses, and the technology has responded accordingly. Now, more browsers and handset applications use high-resolution display screens, allowing for increased readability. In this regard, a cue may be taken from print designers and their use of serif fonts. The more defined edges of these fonts improve the reading experience, especially on high-resolution screens.

Thumbnails

http://arc90.com/people/

Google has taken the use of thumbnails in design to new heights. Its extensive use of them has afforded greater ease and comfort to the user. Now, users simply place their cursor over a headline and they’ll know exactly what to expect without committing to clicking into that website. This has undoubtedly saved the user time, eliminating the need to click and wait for pages to load as they surf. I’ve found this approach has gotten a mixed reception from designers, but I think it’s here to stay.

Multi-Column Format

http://www.godaddy.com/

Another growing trend among designers is to present information in a way that is easy to scan and comprehend in a short amount of time. Presenting information clearly has become easier to accomplish through the use of multiple-column designs. For this reason, this trend will stay and continue to evolve.

Big Lead Images

http://www.fishrestaurantcharleston.com/

This is another trend inspired by the effective use of images in print media. The web browser was not initially designed to load heavy image files quickly; now, with the advancements in display and loading technology, you can expect big lead images to become even more popular. In general, high-impact images are effective in creating a lasting impression on the user.

Social Networking

http://www.yast.com/

The integration of social media will continue to spread like wildfire throughout the web in the near future. This practice has allowed businesses to gain greater exposure and access to users than ever before. Online businesses, big and small, will focus squarely on this in 2011.

Take a moment to share other design trends not mentioned here; they’ll be greatly appreciated.

]]> http://www.fixwordpress.net/latest-trends-in-web-design/feed/ 0 How to Display Content in Multiple Columns http://www.fixwordpress.net/how-to-display-content-in-multiple-columns/ http://www.fixwordpress.net/how-to-display-content-in-multiple-columns/#comments Tue, 22 Mar 2011 02:35:20 +0000 Larry Ngaosi http://localhost/wordpress/a001/?p=71 Printed magazines often display text in columns, so why blogs shouldn’t be able to do the same? here you can find out how to easily and automatically display your post content in columns.

This code is powerful but definitely easy to implement. Just paste it on your functions.php file and it will automatically output your post content in columns.
Your post content will be splitted on <h2> tags.

    

  1. function my_multi_col($content){  
    2. 

  2.   $columns = explode('<h2>', $content);  
    3. 

  3.   
    4. 

  4.   $i = 0;  
    5. 

  5.   
    6. 

  6.     foreach ($columns as $column){  
    7. 

  7.     if (($i % 2) == 0){  
    8. 

  8.       $return .= '<div class="content_left">' . "\n";  
    9. 

  9.       if ($i > 1){  
    10. 

  10.         $return .= "<h2>";  
    11. 

  11.       } else{  
    12. 

  12.         $return .= '<div class="content_right">' . "\n <h2>";  
    13. 

  13.       }  
    14. 

  14.       $return .= $column;  
    15. 

  15.       $return .= '</h2></div>';  
    16. 

  16.       $i++;  
    17. 

  17.     }  
    18. 

  18.   
    19. 

  19.     if(isset($columns[1])){  
    20. 

  20.       $content = wpautop($return);  
    21. 

  21.     }else{  
    22. 

  22.       $content = wpautop($content);  
    23. 

  23.     }  
    24. 

  24.   echo $content;  
    25. 

  25.   }  
    26. 

  26. }  
    27. 

  27. add_filter('the_content', 'my_multi_col');  
    28. 

  28. </h2>  
    29. 

  29. </div>  
    30. 

  30. </h2>
    31.

Don’t forget to add the following styles to your style.css file :

    

  1. .content_right, .content_left{  
    2. 

  2.   float:left;  
    3. 

  3.   width:45%;  
    4. 

  4. }  
    5. 

  5.   
    6. 

  6. .content_left{  
    7. 

  7.   padding-right:5%;  
    8. 

  8. }  
    9.
]]> http://www.fixwordpress.net/how-to-display-content-in-multiple-columns/feed/ 0 How to Show Parent Page Title Regardless of What Subpage You Are On http://www.fixwordpress.net/how-to-show-parent-page-title-regardless-of-what-subpage-you-are-on/ http://www.fixwordpress.net/how-to-show-parent-page-title-regardless-of-what-subpage-you-are-on/#comments Fri, 18 Mar 2011 14:20:45 +0000 Larry Ngaosi http://localhost/wordpress/a001/?p=67 This hack is useful for peoples who working with WordPress as a CMS and wanting to be easily able to display parent page title on a subpage.

Nothing hard at all: Just paste the following code where you’d like to display the parent page title:

<?php  
if($post->post_parent) {    
$parent_title = get_the_title($post->post_parent);    
echo $parent_title;  
} else {    
wp_title(”);  
}  
?>

]]> http://www.fixwordpress.net/how-to-show-parent-page-title-regardless-of-what-subpage-you-are-on/feed/ 0 How to Get All Custom Fields From a Page or a Post http://www.fixwordpress.net/how-to-get-all-custom-fields-from-a-page-or-a-post/ http://www.fixwordpress.net/how-to-get-all-custom-fields-from-a-page-or-a-post/#comments Fri, 18 Mar 2011 14:15:20 +0000 Larry Ngaosi http://localhost/wordpress/a001/?p=63 Sometimes you may need to get all custom fields from a specific post or page. Apply following function that do the job.

function all_my_customs($id = 0){
//if we want to run this function on a page of our choosing them the next section is skipped.
//if not it grabs the ID of the current page and uses it from now on.
if ($id == 0) :
global $wp_query;
$content_array = $wp_query->get_queried_object();
$id = $content_array->ID;
endif;

//knocks the first 3 elements off the array as they are WP entries and i dont want them.
$first_array = array_slice(get_post_custom_keys($id), 3);

//first loop puts everything into an array, but its badly composed
foreach ($first_array as $key => $value) :
$second_array[$value] = get_post_meta($id, $value, FALSE);

//so the second loop puts the data into a associative array
foreach($second_array as $second_key => $second_value) :
$result[$second_key] = $second_value[0];
endforeach;
endforeach;

//and returns the array.
return $result;
}

Once done, you can use the function like this:

$result = all_my_customs();
echo $result['my_meta_key'];

]]> http://www.fixwordpress.net/how-to-get-all-custom-fields-from-a-page-or-a-post/feed/ 0 Allow More Time For Slow Servers to Upgrade WordPress http://www.fixwordpress.net/allow-more-time-for-slow-servers-to-upgrade-wordpress/ http://www.fixwordpress.net/allow-more-time-for-slow-servers-to-upgrade-wordpress/#comments Fri, 18 Mar 2011 14:08:39 +0000 Larry Ngaosi http://localhost/wordpress/a001/?p=61 WordPress auto download/install is a very nice feature, but sometimes a few problems can appear. One of them is that WordPress don’t manage to download the new version. This happens on slow servers. Here is how to solve it.

To apply this hack, you’ll have to edit one of WordPress core files. Keep in mind that it is never recommended. This hack should be applied only if you have problems while auto-upgrading WordPress.

Open the wp-admin/includes/files.php file and go to line 448. You’ll see the following:

$response = wp_remote_get($url, array(‘timeout’ => 60));

To allow more downloading time, simply change the 60 with a greater value, as for example:

$response = wp_remote_get($url, array(‘timeout’ => 120));

]]> http://www.fixwordpress.net/allow-more-time-for-slow-servers-to-upgrade-wordpress/feed/ 0 How to Speed Up Your Blog's Loading Speed http://www.fixwordpress.net/how-to-speed-up-your-blogs-loading-speed/ http://www.fixwordpress.net/how-to-speed-up-your-blogs-loading-speed/#comments Fri, 18 Mar 2011 14:03:54 +0000 Larry Ngaosi http://localhost/wordpress/a001/?p=55 WordPress, by default, comes uncompressed and sends the uncompressed HTML to the visitor’s browser. With one line of code added to your header, you can compress WordPress’s output by up to 75%. By using zlib compression technology, you can harness the power of PHP and reduce your blog’s load time and increase the load speed!

First, place the following code in a file and call it “test.php” and then upload it to the root of your blog directory:

<?php phpinfo(); ?>

Make sure that “zlib” is enabled by your hosting provider.
Second, place the following code in your header (above the DOCTYPE):

<?php
ini_set(‘zlib.output_compression’, ’On’);
ini_set(‘zlib.output_compression_level’, ’1′);
?>

Check Port80Software.com to ensure you are compressing your output.

]]> http://www.fixwordpress.net/how-to-speed-up-your-blogs-loading-speed/feed/ 0