0

I'm querying all child pages on my current page with a custom Query like this.

<?php
$args = array(
    'post_type'      => 'page',
    'posts_per_page' => -1,
    'post_parent'    => $post->ID,
    'order'          => 'ASC',
    'orderby'        => 'menu_order'
    );
$subservice = new WP_Query( $args );
if ( $subservice->have_posts() ) : ?>
<?php while ( $subservice->have_posts() ) : $subservice->the_post();?>

How do I get all slugs from these child pages into a javascript function?

I'm initialising my jQuery Plugin like this:

$('#pagepiling').pagepiling({
  sectionSelector: '.box',
  anchors: ['intro', 'section2','section3'],
  menu: '#menu'
)};

That means, the anchors option should display my child-page slugs from my current page.

Thanks for your help! Cara

2 Answers 2

0

I just found what is arguably a cleaner way to do this...thanks to this other WPSE question How do I add a php statement to a jQuery string.

I never new about wp_localize_script() until reading the answer to that question (I love WPSE :-).

PHP

add_action ('wp_enqueue_scripts', 'localize_js') ;

function
localize_js ()
{
    global $post ;

    $args = array(
        'post_type'      => 'page',
        'posts_per_page' => -1,
        'post_parent'    => $post->ID,
        'order'          => 'ASC',
        'orderby'        => 'menu_order'
        );
    $subservice = new WP_Query( $args );
    $slugs = array () ;

    while ( $subservice->have_posts() ) {
        $subservice->the_post();
        $slugs[] = $post->post_name ;
        }

    wp_reset_postdata () ;

    wp_enqueue_script ('my_script', plugins_url ('js/my_script.js', __FILE__), array (), false, true) ;
    // wp_localize_script() will handle the outputing of the relevant JS global decl
    wp_localize_script ('my_script', 'my_slugs', array ('slugs' => $slugs)) ;

    return ;
}

JS, my_script.js

$('#pagepiling').pagepiling({
    sectionSelector: '.box',
    anchors: my_slugs.slugs,
    menu: '#menu'
)};
0
0

When I need something like this I hook into wp_print_styles and output any values I need as JS globals, ala,

PHP

add_action ('wp_print_styles', 'output_js') ;

function
output_js ()
{
    $args = array(
        'post_type'      => 'page',
        'posts_per_page' => -1,
        'post_parent'    => $post->ID,
        'order'          => 'ASC',
        'orderby'        => 'menu_order'
        );
    $subservice = new WP_Query( $args );
    $slugs = array () ;
    global $post ;
    while ( $subservice->have_posts() ) {
        $subservice->the_post();
        $slugs[] = $post->post_name ;
        }

    $slugs = implode ("', '", $slugs) ;

    $js = <<<EOF
<style type='text/javascript'>
    var my_slugs = ['$slugs'] ;
</style>
EOF;

    echo $js ;

    wp_reset_postdata () ;

    return ;
}

JS

$('#pagepiling').pagepiling({
    sectionSelector: '.box',
    anchors: my_slugs
    menu: '#menu'
)};

You could also do it via ajax, but that is more expensive.

2
  • When I use your code, my pagepiling js is breaking. I tried to get my_slugs via console.log in the javascript snippet in functions.php, but the variable is empty.
    – CaraMar
    Mar 1, 2017 at 9:49
  • I just made 2 edits to my output_js() func: 1) added global $post; (lack of this is why it was failing) and 2) added wp_reset_postdata(); (this makes sure that after output_js() the main loop will give the expected results. It should work for you now. Sorry for not actually testing my code locally before posting my answer. Mar 1, 2017 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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