1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Splitting wordpress posts into multiple pages (CSS styling)

Discussion in 'Programming' started by cini, Sep 14, 2014.

  1. #1
    Hi;

    Most of my blog posts are too long and i divide them into 3-4 parts using <!--nextpage-->

    Normally it shows only post numbers 1 2 3 4...

    I want to style(small boxes) them using CSS but i don't know how to do it.
    Can someone please help me?

    Regards
     
    cini, Sep 14, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Well... what does the code show when you check the numbers? Just figure out how the numbers are being showed on the page, and style that?
     
    PoPSiCLe, Sep 15, 2014 IP
  3. frank007

    frank007 Well-Known Member

    Messages:
    160
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    123
    #3
    If you don't know any css then better place it here and I'll tell you how you can style it.
     
    frank007, Sep 16, 2014 IP
  4. YoGem

    YoGem Active Member

    Messages:
    676
    Likes Received:
    8
    Best Answers:
    2
    Trophy Points:
    90
    #4
    So you could code yourself a simple code that do the following:
    $footer = "";
    $parts = explode("<!--nextpage-->",$post);
    foreach ($parts as $partID => $part) {
       $display = "";
       if ($partID =! 0) $display = "display:none;"
       echo "<div id='part-$partID' style='$display' class='partial-content'>$part</div>";
       $footer .= "<span class='boxed-class-here' rel='$partID'>".($partID+1)."</span>";
    }
      echo "<div class='part-footer'>$footer</div>
    
    Code (markup):
    And then triggering via Ajax an event, whenever you click a 'boxed-class-here' you show the relative div and hide the others like this:
    $(".partial-content").not($("#part-"+relValue)).hide();
    Code (markup):
     
    YoGem, Sep 22, 2014 IP
  5. 14web_net

    14web_net Greenhorn

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #5
    it need some tweaking on your theme on single.php. i month ago I just did it for my client from USA.. now I have to open the file on the template so I can give you what code that have to be changed. if you really need it, you can just PM me or add my skype on najilil. with happily I will help you.. I'm sorry I can not show the code here because I'm not sure and I didn't open the file yet..
     
    14web_net, Sep 24, 2014 IP