Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

The problem isn't that complex (compared to the description I'll write :)) but I'd like to do this as correct as possible (e.g. I could be doing it wrong with Home.php), so I'll give you the whole context. As a part of my design, the page displays different background images. For that I use Supersized, "a fullscreen background slideshow built using the jQuery library". Some of my pages use one background image (no slideshow obviously :), and some use three. Also, I use javascript to detect the users monitor resolution and serve him an appropriate image size:

var imageToBeLoaded = "images/bg_index.jpg";
$(document).ready( function () {
if(window.screen.width > 1024) {
  imageToBeLoaded = "images/bg_index_large.jpg";
}});

So the problems are:

a) Home.php isn't a page accessible through WP-Admin so I can't give it custom fields.

Solution: if (isHome()){ setDefaultalues();}

b) If I'm not on the homepage, I need to get the custom fields key/vaules but only for the properties that are related to the image background (and as I said before, ever page has 1 to N number of background images). For example, my About page has 5 properties, bgImg1, smallImg1, bgImg2, smallImg2 and greeting text. That means I need to get all the variables and parse the name so I can get e.g. bgImg1 and bgImg2. Additionally, Supersized needs a text description as another parameter, so the page needs to have two more parameteres, desc1 and desc2 which I also need to get and combine with the appropriate bgImg so I can generate output that looks like this (from the static page):

{image : 'images/bg_rwanda.jpg', title : 'Rwanda Home'}, {image : 'images/bg_rwanda2.jpg', title : 'Rwanda School'}

Pseudocode would look something like this:

var output = "{image : '";
var imageIsLarge= false;
if (getResolution() > 1024 ) { imageIsLarge= true; }
while (hasNextProperty()){
  Property prop = nextProperty();
  if (imageIsLarge) {
      if (prop.getKey().startsWith (bgImageL)){
         output += prop.getValue()+", title:";
         // etc. Also, I need to set the code to first get the first img, 
         // not just in any order and pair it with the first  description

Now this seems a bit complex and I have a feeling I could do it simpler, but I have no idea how.

share|improve this question
add comment

1 Answer

You get custom field values with get_post_meta().

Wordpress has a function called wp_localize_script() that's used to, as the name suggests, localized scripts by creating a javascript object from a PHP array. When you use wp_enqueue_script() to add a script to the front end of wordpress, you can "localize" it by calling wp_localize_script() afterwards. If you need to get values from custom fields or some other place from the database into some sort of javascript object, this is probably the easiest way to do it. Not exactly what wp_localize_script was designed for, but it will get the job done.

Here's an example:

add_action( 'wp_print_scripts', 'wpse23525_add_scripts' );
function wpse23525_add_scripts()
{

    // Only for single posts
    if( !is_single() ) return;

    wp_enqueue_script( 'wpse23525_script', 'path/to/script.js', array( 'jquery' ) );

    // We should have $post by now, but get it if not
    global $post;
    if( empty( $post ) ) $post = get_queried_object();

    $localize = array( 
        'some_key'      => get_post_meta( $post->ID, 'some_key', true ),
        'another_key'   => get_post_meta( $post->ID, 'another_key', true ),
        'one_more'      => get_post_meta( $post->ID, 'one_more', true )
    );

    wp_localize_script( 'wpse23525_script', 'wpse23525_obj', $localize );
}

Which spits out this on the front end (values may change, of course):

<script type='text/javascript'> 
/* <![CDATA[ */
var wpse23525_obj = {
    some_key: "test1",
    another_key: "test2",
    one_more: "test3"
};
/* ]]> */
</script> 
<script type='text/javascript' src='http://localhost:8888/wp3.2path/to/script.js?ver=3.2.1'></script> 

script.js would contain all the things you're planning on doing with the data, which can be accessed with wpse23525_obj.some_key or wpse23525_obj.another_key etc.

So this:

var imageToBeLoaded = "images/bg_index.jpg";
$(document).ready( function () {
if(window.screen.width > 1024) {
  imageToBeLoaded = "images/bg_index_large.jpg";
}});

becomes

var imageToBeLoaded = wpse23525_obj.another_key;
$(document).ready( function () {
if(window.screen.width > 1024) {
  imageToBeLoaded = wpse23525_obj.some_key;
}});

More reading:

  1. http://codex.wordpress.org/Function_Reference/get_post_meta

  2. http://codex.wordpress.org/Function_Reference/wp_enqueue_script

  3. http://codex.wordpress.org/Function_Reference/wp_localize_script

  4. http://yoast.com/get-queried-object/
share|improve this answer
    
I'm sorry, you've put a lot of effort into the reply but I can't make heads or tails from your code. The variable names don't only confuse and I don't have an idea where would I put the first code block. The general idea is understandable though so thank you for taking your time and pointing me in the right direction. –  Andrija Jul 20 '11 at 19:19
    
Ha, fair enough. I didn't give you a working example, I figured you could take it from there. The first bit of code would go in your functions.php file or a plugin file. –  chrisguitarguy Jul 20 '11 at 21:14
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.