I was modifying a custom wordpress theme earlier, I was logged into WordPress and couldn’t work out why the admin bar, which is meant to show at the very top of your window was not showing / blank. There are two possible reasons why this was happening:
So if you’re pulling your hair out, I hope this helps!
alert($(element).attr('checked'));
//alerts 'undefined'
How do I check if a checkbox is checked in jQuery? In the past I have always used the .attr() method like above. Today I noticed it was not working and was spitting out undefined for checked inputs, after looking again at the documentation, I found the answer was jQuery 1.6. A new method .prop() has been added.
As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method.
Further clarification over on the .prop() method documentation page.
The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() only retrieves attributes.
So summarising, use .prop() to set and retrieve property values, and .attr() to retrieve attributes…seems rather obvious but for anyone not familiar with the new prop method it can be frustrating.
The jQuery blog has an in depth article about the changes from jquery 1.5.2 to 1.6, with detailed explanation on the attr and prop methods
A terrific and often under utilized function in WordPress is the fetch_feed() function. Basically it grabs an external feed and parses it using simplePie and feedCache, this is great as it means WordPress has built in functionality to retrieve, handle and cache.
Any website that displays an rss feed can be read, so you could display latest posts, news or even a twitter feed. Here is the Official WordPress documentation for fetch_feed()
I’ve used this function before for a particularly complicated sitemap that was part of the same domain but using a different CMS, using it to display a twitter feed is the obvious possibility for me, but you can literally use it for any feed.
The only tricky part is altering the cache of the results, the code below is used in your functions file to alter the cache transient lifetime (in seconds)
add_filter( 'wp_feed_cache_transient_lifetime',
create_function('$a', 'return 1800;') );
A couple of days ago, I had to fix a form another developer had created. The form utilised the checkbox input type which I rarely use. I came across an interesting way of storing the data which may be standard? Definitely foreign to me. If you append the array brackets [] to the end of the checkbox name section, example:
<input type="checkbox" name="colours[]" value="red"> <input type="checkbox" name="colours[]" value="blue"> <input type="checkbox" name="colours[]" value="green">
The data will be stored in an array for you to handle as you wish on the server side.
So I’m working on my first proper html5 build, and thought I had come across a bug with firefox. I wanted to auto margin my footer element and noticed it was still left aligning and spanning the entire width of the window. Sooooo, what’s the go?
The trick here is, you have to manually declare these elements to be displayed as block level. Firefox will support this in version 4 (to be released very soon) but for now, we’ll have to do it this way.
With the rise of support and understanding of css3 and html5 recently, I’ve been really frustrated by the constraints placed upon front end web developers by legacy browsers. Yes I’m talking IE6, IE7 and even IE8 (not quite legacy just yet).
So where does that leave us? Well it’s kind of a two fold question in my opinion. Firstly for a lot of properties like border-radius, text-shadow and gradients should for the moment, be used as an aesthetic improvement on the design and not an integral component of the page. Using these properties should add something to the page, but if not supported then the functionality remain.
The real problem and frustration arises when more functional properties are required, I’m talking about first-child, nth-child and multiple backgrounds. If used, these properties would be essential to the functionality of the website. So, in this case legacy IE browsers will not render the layout of the page correctly. The safest work around for this would be to emulate them with javascript, JQuery provides built in selectors for a lot of child selectors. The downside to this is the added overheads, if used too often the performance could become an issue.
There is, “no best” solution, so here are a few:
I think the best solution to these problems is a combination of all of the available resources. There is no magical fix to old browsers, they were designed and built a long time ago. First off, know your traffic. If you have a web developer blog 
chances are not many people will be viewing the site in a legacy browser, if your website has a large traffic base that view your site from work chances are they may be forced to use old browsers. Check your analytics and if the percentage is high enough, cater for them or you will be turning a lot of people away. Chrome frame is a great place to start for the developer, it is one line of code that if installed on the client side, will mean a better user experience overall. From here on you’re in guess mode. For a lot of the new selectors like I mentioned above with :nth-child etc, these can be emulated with JQuery, you can use conditional statements for the external javascript file, so you the new browsers don’t download unnecessary files. For presentation, I’m now using css rounded corners and subtle gradients more and more you know what IE can bite it! If you’re trying to debug your css and are facing problems a great resource is firebug lite, a javascript version of firebug that will be visible in all the browsers that firebug is not installed on. A huge frustration of mine, is when people want IE6 to render EXACTLY the same as in newer browsers, guess what? It’s over 10 years old now….it’s not going to look the same, get over it.
the happy medium is not for your IE6 to look amazing, but for the functionality to be there, you may not be able to reproduce that cool effect you can see in all the other browsers, but if your site does what it should be. That’s good enough. As I said earlier, if a lot of your traffic is from ie6 design your site to be ie friendly, if not you can probably be a bit more lenient.
So that’s my rant, let me know if you liked anything I mentioned or thought I was talking shit. Peace
Using multiple loops in a WordPress template can be necessary and confusing.
Let’s say that you want to list your posts on the homepage as per normal, and then also display a list of testimonials for example, somewhere else in the page. You could do something like the following:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
// blah blah content goes here
<?php endwhile; endif; ?>
// Get the last 5 testimonials posts
<?php query_posts('category_name=testimonials&posts_per_page=5'); ?>
<?php while (have_posts()) : the_post(); ?>
// Testimonial posts go here
<?php endwhile;?>
The problem I’ve encountered from using SEO plugins, such as SEO platinum is that with using the query posts function AFTER your main loop is that it appears to reset the metadata information associated with the main loop and bind it to your secondary loop. For SEO this can be disastrous, title and meta description will be associated with the wrong posts and depending on your template, will be duplicated on most / all of your pages.
From my experience the simplest way to get around this is using the get_posts() function. Using something like the following:
<?php
global $post;
$testimonials = get_posts('numberposts=5&category_name=testimonials');
foreach($testimonials as $post) :
setup_postdata($post);
?>
// echo permalink and title
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php endforeach; ?>
This method works well for me, if anyone else has another way that is better please share.
Some photography I snapped a couple of months back. Still learning all about photography and composition. The shoot was night time in Melbourne. We focused mainly along the riverbank at South Bank.
Long gone are the days of using tabled layouts to structure your website. HOORAY!
If you’re new to building websites then you may not know what I’m on about…well in the old days of the web, there was little support for presentation for websites. If you wanted to structure your website you would have to use tables or even worse many nested tables. This became complex, confusing and if you wanted to change one element of your website it may have thrown out your entire structure.
Nowadays we’re quite fortunate that all the major browsers support css. Ok so what is css? css stands for cascading style sheets. Quite simply css provides the style for your html elements, without having to merge it with the structure. The two can be entirely separate, with the use of an external style sheet.
So what can you do?
Okay so you’re probably wondering now, how can I actually style my html? It usually follows the following format:
selector { property: value}
the selector is usually your element, for example a paragraph. Property is the attribute that you want to change and each property contains a value for example.
p {color:black} -
This statement will display everything inside the <p> tag as black text color.
to save you time for each selector, you can include multiple attributes inside of the curly braces. Note each property must be selected by a colon. Eg.
p {color:black; line-height:.8em; font-size:14px;}
Likewise if you have multiple selectors with the same property and value you can group them together. EG
p, h1, h2, h3, h4 {color:#fff;}
Sometimes you may need to know the full path to your working directory.
You will notice this when you come across an error in php. Most commonly you will need your full path in php when working with saving files on your server.
Using the php function getpwd() will return the current working directory ex:
string getcwd ( void ) echo getcwd();