• Closed
• Spiros Doikas

  Spectator

  December 16, 2013 at 10:13 am #8192

  

  I guess it would be a good idea to provide the possibility for custom styling for this. Perhaps apply in new version. For example:

  Find in Alora

  Code:

  <?php wp_link_pages(); ?>

  (in single/page/fullwidth.php and many others)

  Replace with:
  <?php wp_link_pages( array( ‘before’ => ‘<div class=”page-links”><span class=”page-links-title”>’ . __( ‘Pages:’, ‘alora’ ) . ‘</span>’, ‘after’ => ‘</div>’, ‘link_before’ => ‘<span>’, ‘link_after’ => ‘</span>’ ) ); ?>

  Add in css:

  Code:

  /* Page links */
  .page-links {
  clear: both;
  font-size: 16px;
  font-weight: normal;
  line-height: 2.2;
  margin: 20px 0;
  }

  .page-links a,
  .page-links > span {
  background: #fff;
  border: 1px solid #fff;
  padding: 5px 10px;
  text-decoration: none;
  }

  .format-status .entry-content .page-links a,
  .format-gallery .entry-content .page-links a,
  .format-chat .entry-content .page-links a,
  .format-quote .entry-content .page-links a,
  .page-links a {
  background: #e63f2a;
  border: 1px solid #e63f2a;
  color: #fff;
  }

  .format-gallery .entry-content .page-links a:hover,
  .format-audio .entry-content .page-links a:hover,
  .format-status .entry-content .page-links a:hover,
  .format-video .entry-content .page-links a:hover,
  .format-chat .entry-content .page-links a:hover,
  .format-quote .entry-content .page-links a:hover,
  .page-links a:hover {
  background: #fff;
  color: #e63f2a;
  }

  .format-status .entry-content .page-links > span,
  .format-quote .entry-content .page-links > span {
  background: none;
  }

  .page-links .page-links-title {
  background: transparent;
  border: none;
  margin-right: 20px;
  padding: 0;
  }

  See here too: http://theme4press.com/support/current-themes-group5/alora-forum27/localizing-pages-thread900/

Roman
Spectator
Posts: 3147
December 16, 2013 at 5:45 pm #8764

I can add those classes in the next theme release and the user can decide to modify it by a custom css
Spiros Doikas
Spectator
Posts: 48
December 16, 2013 at 6:18 pm #8765

Yes, good idea. Perhaps slightly adapt the classes I gave you as they are not ideal for Alora.
Spiros Doikas
Spectator
Posts: 48
December 19, 2013 at 2:29 pm #8806

In fact, could we have the same pagination style as in category?

I tried to implement myself, but the code is quite different.
Roman
Spectator
Posts: 3147
December 19, 2013 at 2:33 pm #8809

will try 🙂
Spiros Doikas
Spectator
Posts: 48
December 19, 2013 at 4:42 pm #8811

I got to this:
Code:
<?php wp_link_pages(array(‘before’ => ‘<div class=”pagination”>’, ‘after’ => ‘</div>’, ‘link_before’ => ‘<span class=”current”><span class=”currenttext”>’, ‘link_after’ => ‘</span></span>’, ‘next_or_number’ => ‘next_and_number’, ‘nextpagelink’ => __(‘Next’,’alora’), ‘previouspagelink’ => __(‘Previous’,’alora’), ‘pagelink’ => ‘%’,’echo’ => 1 )); ?>
But it only shows next and previous, no numbers and no <> symbols, grrr.
Roman
Spectator
Posts: 3147
December 19, 2013 at 8:55 pm #8812

I think it’s because you are using a text with a domain.. __(‘Next’,’alora’) ….try to use only ‘Next’ . same for the previous link
Spiros Doikas
Spectator
Posts: 48
December 20, 2013 at 8:56 am #8813

No, the effect of adding the ‘alora’ bit is to ensure that localization works. When I removed it I had same results, only that they were in English.
Roman
Spectator
Posts: 3147
December 20, 2013 at 3:45 pm #8815

you have only two choices to get it to work. with numbers only:
Code:
<?php wp_link_pages( array(
‘before’ => ‘<div class=”pagination”>’ . __( ‘Pages:’ , ‘alora’ ),
‘after’ => ‘</div>’,
‘link_before’ => ‘<span class=”current”>’,
‘link_after’ => ‘</span>’,
‘next_or_number’ => ‘number,
‘separator’ => ‘ ‘,
‘nextpagelink’ => __( ‘Next <i class=”fa fa-angle-right”></i>’ , ‘alora’ ),
‘previouspagelink’ => __( ‘<i class=”fa fa-angle-left”></i> Previous’ , ‘alora’ ),
‘pagelink’ => ‘%’,
‘echo’ => 1
)); ?>
or only with previous/next link:
Code:
<?php wp_link_pages( array(
‘before’ => ‘<div class=”pagination”>’ . __( ‘Pages:’ , ‘alora’ ),
‘after’ => ‘</div>’,
‘link_before’ => ‘<span class=”current”>’,
‘link_after’ => ‘</span>’,
‘next_or_number’ => ‘next’,
‘separator’ => ‘ ‘,
‘nextpagelink’ => __( ‘Next <i class=”fa fa-angle-right”></i>’ , ‘alora’ ),
‘previouspagelink’ => __( ‘<i class=”fa fa-angle-left”></i> Previous’ , ‘alora’ ),
‘pagelink’ => ‘%’,
‘echo’ => 1
)); ?>
Spiros Doikas
Spectator
Posts: 48
December 20, 2013 at 6:22 pm #8817

This line
Code:
‘next_or_number’ => ‘number,
was missing an apostrophe:
Code:
‘next_or_number’ => ‘number’,
The problem with this style though is that it does not indicate on which page one is (different style for current page) as it is done in category pagination.
And if you check around on other themes, it is implemented just fine with number + Previous/Next.
For example: http://demo.mythemeshop.com/clock/awesome-post-with-everything-with-it/2/
(in fact the latest code I quoted was from that theme)
Roman
Spectator
Posts: 3147
December 20, 2013 at 7:36 pm #8819

I will add this feature in the next theme release…will be using this hack http://www.velvetblues.com/web-development-blog/wordpress-number-next-previous-links-wp_link_pages/

The topic Styling Pages in multipage posts is closed to new replies