search instagram arrow-down

Twitter

Follow me!

Child Pages Shortcode TinyMCE Templates WP Total Hacks

Child Pages Shortcode

You can use shortcode for display child pages from the page.

Some Feture

  • This plugin will add shortcode [child_pages] for display child pages.
  • You can customize default HTML template & Stylesheet from your plugin.
  • This plugin will be able to “excerpt” to the pages.

Excerpt support on the Page

Shortcode sample

Dsiplaying child pages from the Page

You can customize html output and stylesheet

filter hook for template

<?php
    add_filter("child-pages-shortcode-template", "my_template");
    function my_template($template) {
        return '<div class="%class%"><a href="%post_url%">%post_thumb%</a></div>';
    }
?>
  • %post_id% – ID of the Page
  • %width% – Width of block for single page
  • %post_url% – Page permalink
  • %post_thumb% – <img> for Post thubmail
  • %post_title% – Page title
  • %post_excerpt% – Page excerpt

filter hook for stylesheet

<?php
    add_filter("child-pages-shortcode-stylesheet", "my_style");
    function my_style($url) {
        return 'http://example.com/path/to/style.css';
    }
?>

Default source of template

<div id="child_page-%post_id%" class="child_page" style="width:%width%;">
    <div class="child_page-container">
        <div class="post_thumb"><a href="%post_url%">%post_thumb%</a></div>
        <div class="post_content">
            <h4><a href="%post_url%">%post_title%</a></h4>
            <div class="post_excerpt">%post_excerpt%</div>
        </div>
    </div>
</div>

Change log

Child Pages Shortcode | wpist

Donate

It is hard to continue development and support for WordPress plugins without contributions from users like you.

43 comments on “Child Pages Shortcode

  1. Tyler says:

    How can I change the […] to Learn More and a link to the page?

  2. mireillesan says:

    Is it possible to add pagination? I’ve more than 30 child pages and iI’d like to show only 10 per page.

    1. Takayuki Miyauchi says:

      Sorry, pagination is not supported.

  3. Hello Takayuki,

    Is it possible to exclude child-pages from the output based on ID?

    If not, can you add this as a feature request.

    Thanks!

  4. Grady says:

    Hey,
    I have an issue with wordpress 3.5.1 where the “read more” does not link to the child post. It links to the parent. I have tried to edit the plugin to work but have not been able to get it working.

    1. Leela Robinson, LMT, RYT says:

      same problem here

  5. adroidman says:

    Hey,
    On wordpress 3.5.1 the “Continue Reading” does not like to the child theme but instead is linked to the parent page. I have tried to change this but nothing worked. Hope for an easy fix soon.

  6. rfdeshon says:

    It would be nice if the title were centered under the thumbnail instead of being left aligned.

    1. Daniel Anaya says:

      Edit the css file.

      Add text-align:center; to .child_pages .post_thumb

      .child_pages .post_thumb
      {
      text-align:center;
      overflow:hidden;
      background-image:url(img/camera.png);
      background-position:center center;
      background-repeat:no-repeat;
      }

      And it should look like this: http://kpopmp3.net/kpop-artists/

      1. Takayuki Miyauchi says:

        Hi Daniel.

        This plugin have a hook for customize css style.
        You can change stylesheet file like below.

        <?php
        add_filter("child-pages-shortcode-stylesheet", "my_style");
        function my_style($url) {
        return 'http://example.com/path/to/style.css;
        }

        Thanks! 🙂

  7. Daniel Anaya says:

    This plug in is perfect for what I wanted to show on the parent page. Thank you for your hard work!

    How do I change the color of the child page name “A Pink” (http://kpopmp3.net/wp-content/uploads/2013/03/child_page.png).

    Also, instead of having an excerpt can I show a “read more” button instead?

  8. Daniel A says:

    This plug in is perfect for what I wanted to show on the parent page. Thank you for your hard work!

    How do I change the color of the child page name “A Pink” (http://kpopmp3.net/wp-content/uploads/2013/03/child_page.png).

    Also, instead of having an excerpt can I show a “read more” button instead?

  9. Is it possible to turn the excerpt off? I’d prefer to just have the image and title of the pages.

  10. johnmringgold says:

    Is it possible to remove the excerpts? I’m looking to just have the image and a title. Any help would be appreciated! 🙂

    1. Anne says:

      For me it helped to delete
      $html .= ‘%post_excerpt%’;
      in the child-pages-shortcode.php file.

  11. Kira says:

    Hi, I really like this plugin! I have a request, just in case you’d be willing to add something simple:
    Would it be possible to add an anchor to each child page display box? That way on the page showing the child pages it will be easy to link within that page.
    Something like this:

    private function get_template()
    {
    $html = “\n”;
    $html .= ‘‘;
    $html .= ”;
    …….
    …….
    …….
    }

  12. Belenus says:

    How do I display the image and content side by side? Please help

    1. Takayuki Miyauchi says:

      You need edit CSS on your theme.
      But I can’t help for editing CSS.

      1. Belenus says:

        Thanks. I managed to do it myself.

        There’s another issue. The ‘Continue reading’ link is pointing to the parent page itself instead of pointing to the corresponding child. What do I do?

  13. Benji McKinney says:

    The “READ MORE” or “Continue Reading” does not produce the correct URL. It leads back to the parent so it does not work at all.

    No pagination. So if you have a lot of child pages to show, figure that out on your own…

    Child pages are displaying the featured image but there is no clear way to call for a specific image size.

    Also, the plugin is not easily styled especially if you do not understand “Args”, “Hooks” and all the terminology that WordPress is associated with.

    It’s a shame. I thought this would be an easy fix for what I need. Would have even donated to the developer. 😦

    1. Leela Robinson, LMT, RYT says:

      Spent time styling this plugin to work, but then discovered the bug of Read More linking to parent page, not to the child page. I agree to donating if the developer were to fix these known issues.

      1. Takayuki Miyauchi says:

        OH! I will fix! Thanks!

  14. Memo says:

    Is it possible to order the childpages by asc?

    1. Mie says:

      I would be interested in knowing that too.

      Thanks in advance!

      1. knudberggreen says:

        How did you order at all?
        My child pages are ordered by created.
        I would like to have them ordered alphabetic by document title

      2. Daniel A says:

        I order my child pages by using the WordPress “Page Attributes” order override field. Since I am adding new pages all the time and like to keep them ordered by child page title name, I leave many spots in between each number to allow for new page additions (example i set my first page to 0, second page to 10, third page to 20, and that leaves room to add pages 1 to 9, 11 to 19, ect). It is a pain if you have a lot of child pages but better than ordering by page creation date.

      3. knudberggreen says:

        @Daniel A:
        I hat hoped that this solution not was necessary… But for now I will use the ASCII numbers as sorting key.

      4. Memo says:

        @Daniel A
        Thanx Daniel! You’re right this ist better than ordering by page creation date. 🙂

  15. bmackenny says:

    What about inserting anchor points? For instance, I would like to create a list of the items at the top of the page. The items in the list could link to the child pages by using some kind of anchor point system. Example:

    The list at the top of may page would look like this:

    1. This would be some text to link to child page apple.
    2. This would be some text to link to child page orange.
    3. This would be some text to link to child page banana.

    The list would use html code to call to the anchor points like this:
    1. This would be some text to link to child page apple.
    2. This would be some text to link to child page orange.
    3. This would be some text to link to child page banana.

    Could we insert something in the PHP to create generate the anchor points in consecutive order? So calling to the child content to display would also cause an anchor point to be generated. Something like this:

    Thank you for any feedback or pointers. I wouldn’t mind doing the work if I had a little help.

    1. bmackenny says:

      Sorry. I guess the html I put into my comment should have been enclosed in a tag so that WordPress didn’t generate it but just display the code.

      {The list would use html code to call to the anchor points like this:
      1. This would be some text to link to child page apple.
      2. This would be some text to link to child page orange.
      3. This would be some text to link to child page banana.

      Could we insert something in the PHP to create generate the anchor points in consecutive order? So calling to the child content to display would also cause an anchor point to be generated. Something like this:

      Thank you for any feedback or pointers. I wouldn’t mind doing the work if I had a little help.

      1. bmackenny says:

        It is still rendering the code instead of displaying the HTML. I enclosed it in tags ('code tags')..... :( I am new to this and I'm not liking how difficult this is

      2. bmackenny says:

        $%^&! I give UP!!!!!

      3. Takayuki Miyauchi says:

        Umm, Anchor link is not supported.

  16. bmackenny says:

    Thanks Takayuki. But I wrote it into the PHP. I figured it out. All I did was add:

    {$html .= '';}

    under line 149 in the get_template function. This adds the anchor point. Then all I had to do was call to it in the HTML. I did this using an image map in this example:

    http://s119736768.onlinehome.us/applications/oil-gas

  17. bmackenny says:

    I’m not sure how to write the line of code on my comment as it keeps getting removed. What do I have to add to my comment in order to show you the code? I tried to put the word “code” inside before and after the code but that doesn’t stop it from removing code.

  18. bmackenny says:

    $html .= '';

    was added under line 149 of the child-pages-shortcode php file.

  19. Michael says:

    Anyone else running into issues with clicking “edit” on a page? Especially when it’s in the middle – like Subject Page -> This Child Page -> More Child Page… The “This Child Page” edit button keeps sending me to “More Child Page” instead. I have no idea why. Thoughts? And it’s only on a few places, totally random. I would pay for this plugin as well!

  20. Ever since the latest update all of my thumbnails are coming up at their original aspect ratio, instead of the 1:1 the plugin used to modify them to. I tried to remove the featured image and replace it with one that I had set to a 1:1 aspect ratio, but now they are not showing up at -all-. Anyone else having this problem?

  21. Dean says:

    How do I set in alphabetical order?

    [child_pages width=”33%” size=”thumbnail” ]

  22. dinofit says:

    Hi, how do I put the pages into alphabetical order

    [child_pages width=”33%” size=”thumbnail” ]

  23. Richard says:

    sort alphabetically instead of by id? Possible?

    1. Memo says:

      Its not supported yet but you can order by the wp attributes:
      https://wpist.me/wp/child-pages-shortcode/#comment-682

Leave a Reply to dinofit Cancel reply
Your email address will not be published. Required fields are marked *

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: