Adding span tags within wp_list_pages list items





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}







1















I am using this shortcode to produce a list of child pages of a specified parent. I would like to replace the list items default discs with a font awesome icon. According to the font awesome documentation it is done like this:



<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
</ul>


And this is the code I am using to to generate my list of items:



function childpages_shortcode_callback( $atts ) {
$atts = shortcode_atts( array(
'parent' => false,
), $atts, 'childpages' );

$parent_id = false;
if ( $atts['parent'] ) {
$parent = get_page_by_path( $atts['parent'] );
if ( $parent ) {
$parent_id = $parent->ID;
}
} else { // if no parent passed, then show children of current page
$parent_id = get_the_ID();
}

$result = '';
if ( ! $parent_id ) { // don't waste time getting pages, if we couldn't get parent page
return $result;
}

$childpages = wp_list_pages( array(
'sort_column' => 'menu_order',
'title_li' => '',
'child_of' => $parent_id,
'echo' => 0
) );

if ( $childpages ) {
$result =
'<h2>' . get_the_title( $parent_id ) . '</h2>' .
'<ul class="fa-ul">' . $childpages . '</ul>';
}

return $result;
}
add_shortcode( 'childpages', 'childpages_shortcode_callback' );


As you can see I have managed to add the "fa-ul" class to the resulting unordered list, but I cannot work out how to add the span and i elements between the li tags.



Normally I would just prepend these with jQuery and call it a day, but I would like to know if there is a wordpress approach?



Thankyou










share|improve this question































    1















    I am using this shortcode to produce a list of child pages of a specified parent. I would like to replace the list items default discs with a font awesome icon. According to the font awesome documentation it is done like this:



    <ul class="fa-ul">
    <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
    </ul>


    And this is the code I am using to to generate my list of items:



    function childpages_shortcode_callback( $atts ) {
    $atts = shortcode_atts( array(
    'parent' => false,
    ), $atts, 'childpages' );

    $parent_id = false;
    if ( $atts['parent'] ) {
    $parent = get_page_by_path( $atts['parent'] );
    if ( $parent ) {
    $parent_id = $parent->ID;
    }
    } else { // if no parent passed, then show children of current page
    $parent_id = get_the_ID();
    }

    $result = '';
    if ( ! $parent_id ) { // don't waste time getting pages, if we couldn't get parent page
    return $result;
    }

    $childpages = wp_list_pages( array(
    'sort_column' => 'menu_order',
    'title_li' => '',
    'child_of' => $parent_id,
    'echo' => 0
    ) );

    if ( $childpages ) {
    $result =
    '<h2>' . get_the_title( $parent_id ) . '</h2>' .
    '<ul class="fa-ul">' . $childpages . '</ul>';
    }

    return $result;
    }
    add_shortcode( 'childpages', 'childpages_shortcode_callback' );


    As you can see I have managed to add the "fa-ul" class to the resulting unordered list, but I cannot work out how to add the span and i elements between the li tags.



    Normally I would just prepend these with jQuery and call it a day, but I would like to know if there is a wordpress approach?



    Thankyou










    share|improve this question



























      1












      1








      1


      1






      I am using this shortcode to produce a list of child pages of a specified parent. I would like to replace the list items default discs with a font awesome icon. According to the font awesome documentation it is done like this:



      <ul class="fa-ul">
      <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
      </ul>


      And this is the code I am using to to generate my list of items:



      function childpages_shortcode_callback( $atts ) {
      $atts = shortcode_atts( array(
      'parent' => false,
      ), $atts, 'childpages' );

      $parent_id = false;
      if ( $atts['parent'] ) {
      $parent = get_page_by_path( $atts['parent'] );
      if ( $parent ) {
      $parent_id = $parent->ID;
      }
      } else { // if no parent passed, then show children of current page
      $parent_id = get_the_ID();
      }

      $result = '';
      if ( ! $parent_id ) { // don't waste time getting pages, if we couldn't get parent page
      return $result;
      }

      $childpages = wp_list_pages( array(
      'sort_column' => 'menu_order',
      'title_li' => '',
      'child_of' => $parent_id,
      'echo' => 0
      ) );

      if ( $childpages ) {
      $result =
      '<h2>' . get_the_title( $parent_id ) . '</h2>' .
      '<ul class="fa-ul">' . $childpages . '</ul>';
      }

      return $result;
      }
      add_shortcode( 'childpages', 'childpages_shortcode_callback' );


      As you can see I have managed to add the "fa-ul" class to the resulting unordered list, but I cannot work out how to add the span and i elements between the li tags.



      Normally I would just prepend these with jQuery and call it a day, but I would like to know if there is a wordpress approach?



      Thankyou










      share|improve this question
















      I am using this shortcode to produce a list of child pages of a specified parent. I would like to replace the list items default discs with a font awesome icon. According to the font awesome documentation it is done like this:



      <ul class="fa-ul">
      <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
      </ul>


      And this is the code I am using to to generate my list of items:



      function childpages_shortcode_callback( $atts ) {
      $atts = shortcode_atts( array(
      'parent' => false,
      ), $atts, 'childpages' );

      $parent_id = false;
      if ( $atts['parent'] ) {
      $parent = get_page_by_path( $atts['parent'] );
      if ( $parent ) {
      $parent_id = $parent->ID;
      }
      } else { // if no parent passed, then show children of current page
      $parent_id = get_the_ID();
      }

      $result = '';
      if ( ! $parent_id ) { // don't waste time getting pages, if we couldn't get parent page
      return $result;
      }

      $childpages = wp_list_pages( array(
      'sort_column' => 'menu_order',
      'title_li' => '',
      'child_of' => $parent_id,
      'echo' => 0
      ) );

      if ( $childpages ) {
      $result =
      '<h2>' . get_the_title( $parent_id ) . '</h2>' .
      '<ul class="fa-ul">' . $childpages . '</ul>';
      }

      return $result;
      }
      add_shortcode( 'childpages', 'childpages_shortcode_callback' );


      As you can see I have managed to add the "fa-ul" class to the resulting unordered list, but I cannot work out how to add the span and i elements between the li tags.



      Normally I would just prepend these with jQuery and call it a day, but I would like to know if there is a wordpress approach?



      Thankyou







      shortcode wp-list-pages






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 10 hours ago







      Jalapeno Jack

















      asked 11 hours ago









      Jalapeno JackJalapeno Jack

      295




      295






















          1 Answer
          1






          active

          oldest

          votes


















          3














          There is more than one way to accomplish this in WordPress.



          Option 1: Using the link_before parameter with wp_list_pages.



          $childpages = wp_list_pages( array(
          'sort_column' => 'menu_order',
          'title_li' => '',
          'child_of' => $parent_id,
          'echo' => 0,
          'link_before' => '<span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>'
          ) );


          Option 2: Create a custom walker, then add the walker parameter to wp_list_pages.



          See this answer here on WordPress StackExchange for more details and an example.



          Option 3: Use CSS pseudo elements.



          While not a strictly WordPress method, you could use CSS pseudo elements to replace the list items default discs with a Font Awesome icon. You can also animate them with only CSS pseudo elements.



          First, in your CSS, be sure to set the rule for your list to not use the disc as a bullet.



          ul {list-style-type: none;}


          Then, using the ::before pseudo element, set your chosen Font Awesome icon. For example:



          ul li::before {
          content: "f110";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          padding-right: 10px;
          }


          The above is enough if you just want static icons. To add the spinning animation using CSS, you can use the following for li::before instead:



          ul li::before {
          content: "f110";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          margin-left: -20px;
          position: absolute;
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
          }


          Of course, the padding and margin settings might need to be adjusted according to your theme and preferences.



          I learned about the above CSS technique from an answer to a different question on StackOverflow and have used it myself.



          However, when it comes to WordPress, I cannot say for sure which of the above methods (or others) is the best with regards to performance/practice. It may be a matter of personal preference and/or time, or it may depend on other factors.



          I hope you find this useful and that it helps you accomplish what you need :)






          share|improve this answer
























          • Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new

            – Jalapeno Jack
            9 hours ago













          • I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress' link_before parameter seems more theme friendly... 🤷🏻‍♀️

            – jsmod
            9 hours ago












          Your Answer








          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "110"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwordpress.stackexchange.com%2fquestions%2f333671%2fadding-span-tags-within-wp-list-pages-list-items%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          3














          There is more than one way to accomplish this in WordPress.



          Option 1: Using the link_before parameter with wp_list_pages.



          $childpages = wp_list_pages( array(
          'sort_column' => 'menu_order',
          'title_li' => '',
          'child_of' => $parent_id,
          'echo' => 0,
          'link_before' => '<span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>'
          ) );


          Option 2: Create a custom walker, then add the walker parameter to wp_list_pages.



          See this answer here on WordPress StackExchange for more details and an example.



          Option 3: Use CSS pseudo elements.



          While not a strictly WordPress method, you could use CSS pseudo elements to replace the list items default discs with a Font Awesome icon. You can also animate them with only CSS pseudo elements.



          First, in your CSS, be sure to set the rule for your list to not use the disc as a bullet.



          ul {list-style-type: none;}


          Then, using the ::before pseudo element, set your chosen Font Awesome icon. For example:



          ul li::before {
          content: "f110";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          padding-right: 10px;
          }


          The above is enough if you just want static icons. To add the spinning animation using CSS, you can use the following for li::before instead:



          ul li::before {
          content: "f110";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          margin-left: -20px;
          position: absolute;
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
          }


          Of course, the padding and margin settings might need to be adjusted according to your theme and preferences.



          I learned about the above CSS technique from an answer to a different question on StackOverflow and have used it myself.



          However, when it comes to WordPress, I cannot say for sure which of the above methods (or others) is the best with regards to performance/practice. It may be a matter of personal preference and/or time, or it may depend on other factors.



          I hope you find this useful and that it helps you accomplish what you need :)






          share|improve this answer
























          • Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new

            – Jalapeno Jack
            9 hours ago













          • I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress' link_before parameter seems more theme friendly... 🤷🏻‍♀️

            – jsmod
            9 hours ago
















          3














          There is more than one way to accomplish this in WordPress.



          Option 1: Using the link_before parameter with wp_list_pages.



          $childpages = wp_list_pages( array(
          'sort_column' => 'menu_order',
          'title_li' => '',
          'child_of' => $parent_id,
          'echo' => 0,
          'link_before' => '<span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>'
          ) );


          Option 2: Create a custom walker, then add the walker parameter to wp_list_pages.



          See this answer here on WordPress StackExchange for more details and an example.



          Option 3: Use CSS pseudo elements.



          While not a strictly WordPress method, you could use CSS pseudo elements to replace the list items default discs with a Font Awesome icon. You can also animate them with only CSS pseudo elements.



          First, in your CSS, be sure to set the rule for your list to not use the disc as a bullet.



          ul {list-style-type: none;}


          Then, using the ::before pseudo element, set your chosen Font Awesome icon. For example:



          ul li::before {
          content: "f110";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          padding-right: 10px;
          }


          The above is enough if you just want static icons. To add the spinning animation using CSS, you can use the following for li::before instead:



          ul li::before {
          content: "f110";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          margin-left: -20px;
          position: absolute;
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
          }


          Of course, the padding and margin settings might need to be adjusted according to your theme and preferences.



          I learned about the above CSS technique from an answer to a different question on StackOverflow and have used it myself.



          However, when it comes to WordPress, I cannot say for sure which of the above methods (or others) is the best with regards to performance/practice. It may be a matter of personal preference and/or time, or it may depend on other factors.



          I hope you find this useful and that it helps you accomplish what you need :)






          share|improve this answer
























          • Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new

            – Jalapeno Jack
            9 hours ago













          • I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress' link_before parameter seems more theme friendly... 🤷🏻‍♀️

            – jsmod
            9 hours ago














          3












          3








          3







          There is more than one way to accomplish this in WordPress.



          Option 1: Using the link_before parameter with wp_list_pages.



          $childpages = wp_list_pages( array(
          'sort_column' => 'menu_order',
          'title_li' => '',
          'child_of' => $parent_id,
          'echo' => 0,
          'link_before' => '<span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>'
          ) );


          Option 2: Create a custom walker, then add the walker parameter to wp_list_pages.



          See this answer here on WordPress StackExchange for more details and an example.



          Option 3: Use CSS pseudo elements.



          While not a strictly WordPress method, you could use CSS pseudo elements to replace the list items default discs with a Font Awesome icon. You can also animate them with only CSS pseudo elements.



          First, in your CSS, be sure to set the rule for your list to not use the disc as a bullet.



          ul {list-style-type: none;}


          Then, using the ::before pseudo element, set your chosen Font Awesome icon. For example:



          ul li::before {
          content: "f110";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          padding-right: 10px;
          }


          The above is enough if you just want static icons. To add the spinning animation using CSS, you can use the following for li::before instead:



          ul li::before {
          content: "f110";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          margin-left: -20px;
          position: absolute;
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
          }


          Of course, the padding and margin settings might need to be adjusted according to your theme and preferences.



          I learned about the above CSS technique from an answer to a different question on StackOverflow and have used it myself.



          However, when it comes to WordPress, I cannot say for sure which of the above methods (or others) is the best with regards to performance/practice. It may be a matter of personal preference and/or time, or it may depend on other factors.



          I hope you find this useful and that it helps you accomplish what you need :)






          share|improve this answer













          There is more than one way to accomplish this in WordPress.



          Option 1: Using the link_before parameter with wp_list_pages.



          $childpages = wp_list_pages( array(
          'sort_column' => 'menu_order',
          'title_li' => '',
          'child_of' => $parent_id,
          'echo' => 0,
          'link_before' => '<span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>'
          ) );


          Option 2: Create a custom walker, then add the walker parameter to wp_list_pages.



          See this answer here on WordPress StackExchange for more details and an example.



          Option 3: Use CSS pseudo elements.



          While not a strictly WordPress method, you could use CSS pseudo elements to replace the list items default discs with a Font Awesome icon. You can also animate them with only CSS pseudo elements.



          First, in your CSS, be sure to set the rule for your list to not use the disc as a bullet.



          ul {list-style-type: none;}


          Then, using the ::before pseudo element, set your chosen Font Awesome icon. For example:



          ul li::before {
          content: "f110";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          padding-right: 10px;
          }


          The above is enough if you just want static icons. To add the spinning animation using CSS, you can use the following for li::before instead:



          ul li::before {
          content: "f110";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          margin-left: -20px;
          position: absolute;
          -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
          }


          Of course, the padding and margin settings might need to be adjusted according to your theme and preferences.



          I learned about the above CSS technique from an answer to a different question on StackOverflow and have used it myself.



          However, when it comes to WordPress, I cannot say for sure which of the above methods (or others) is the best with regards to performance/practice. It may be a matter of personal preference and/or time, or it may depend on other factors.



          I hope you find this useful and that it helps you accomplish what you need :)







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered 9 hours ago









          jsmodjsmod

          35512




          35512













          • Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new

            – Jalapeno Jack
            9 hours ago













          • I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress' link_before parameter seems more theme friendly... 🤷🏻‍♀️

            – jsmod
            9 hours ago



















          • Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new

            – Jalapeno Jack
            9 hours ago













          • I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress' link_before parameter seems more theme friendly... 🤷🏻‍♀️

            – jsmod
            9 hours ago

















          Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new

          – Jalapeno Jack
          9 hours ago







          Wow thanks for the detailed response! It would make sense to use CSS as it can live alongside the list styles, but for now I’ll use link_before because I just learned something new

          – Jalapeno Jack
          9 hours ago















          I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress' link_before parameter seems more theme friendly... 🤷🏻‍♀️

          – jsmod
          9 hours ago





          I actually just learned about it too when I saw your question, so thank you for posting it here :) I was using the CSS method before but WordPress' link_before parameter seems more theme friendly... 🤷🏻‍♀️

          – jsmod
          9 hours ago


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to WordPress Development Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fwordpress.stackexchange.com%2fquestions%2f333671%2fadding-span-tags-within-wp-list-pages-list-items%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Knooppunt Holsloot

          Altaar (religie)

          Gregoriusmis