Adding span tags within wp_list_pages list items2019 Community Moderator ElectionWays to give a wp_list_pages...

Approximately how much travel time was saved by the opening of the Suez Canal in 1869?

Why Is Death Allowed In the Matrix?

I’m planning on buying a laser printer but concerned about the life cycle of toner in the machine

Why, historically, did Gödel think CH was false?

Can divisibility rules for digits be generalized to sum of digits

Prove that NP is closed under karp reduction?

Can I make popcorn with any corn?

What do you call a Matrix-like slowdown and camera movement effect?

Theorem, big Paralist and Amsart

Do I have a twin with permutated remainders?

Test whether all array elements are factors of a number

Do VLANs within a subnet need to have their own subnet for router on a stick?

"You are your self first supporter", a more proper way to say it

Why dont electromagnetic waves interact with each other?

What typically incentivizes a professor to change jobs to a lower ranking university?

Is this a crack on the carbon frame?

Why does Kotter return in Welcome Back Kotter?

How to format long polynomial?

Minkowski space

How does one intimidate enemies without having the capacity for violence?

How to say job offer in Mandarin/Cantonese?

Writing rule stating superpower from different root cause is bad writing

How do we improve the relationship with a client software team that performs poorly and is becoming less collaborative?

How to find program name(s) of an installed package?



Adding span tags within wp_list_pages list items



2019 Community Moderator ElectionWays to give a wp_list_pages menu link specific class names?Adding custom class names to anchor in wp_list_pagesList pages within a certain parent and show published monthShortcode adding p and br tagsListing current pages subp page in list items in the sidebarAdd class to the items in wp_list_pagesStop WordPress automatically adding <br> tags to post contentAdding elements to wp_list_pages (within <li>, but before <a>)List all Posts under heading in wp_list_pages menuHow to List All Pages (With their template names) Within a WebsiteUberMenu list current user's posts as menu 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 10 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
            8 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
            8 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
            8 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
            8 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
            8 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
          8 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
          8 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

          El tren de la libertad Índice Antecedentes "Porque yo decido" Desarrollo de la...

          Castillo d'Acher Características Menú de navegación

          Puerta de Hutt Referencias Enlaces externos Menú de navegación15°58′00″S 5°42′00″O /...