Title: previous/next post link and css button? can't insert css in single.php
Last modified: August 30, 2016

---

# previous/next post link and css button? can't insert css in single.php

 *  Resolved [Panos Antonopoulos](https://wordpress.org/support/users/quendi3797/)
 * (@quendi3797)
 * [11 years ago](https://wordpress.org/support/topic/previousnext-post-link-and-css-button-cant-insert-css-in-singlephp/)
 * Hello everyone. Not a pro web designer., blogging’s just a hobby. I know html,
   i’m trying with php, but almost nothing about css so i’ll appreciate your help.
 * I wanted to add the previous/next post link in the same category – like
    <?php
   previous_post_link(‘« %link’, ‘%title’, TRUE); ?> – did that through single.php
   and is working perfectly but i want to use that inside a button.. so i have the
   css code for the button and i pasted that in style.css but i really can’t find
   a way to make it work within the signle.php. Is there a way?

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [11 years ago](https://wordpress.org/support/topic/previousnext-post-link-and-css-button-cant-insert-css-in-singlephp/#post-6228154)
 * what theme are you using?
 * where exactly in style.css have you added the CSS for the button?
 * please post a live link to your site, to a single post with the problem.
 *  Thread Starter [Panos Antonopoulos](https://wordpress.org/support/users/quendi3797/)
 * (@quendi3797)
 * [11 years ago](https://wordpress.org/support/topic/previousnext-post-link-and-css-button-cant-insert-css-in-singlephp/#post-6228157)
 * theme: the7.2
 * The website isn’t online yet, just a draft and can’t post a link (yet)! i’m really
   sorry!
 * regarding the css button that’s everything (i’m wondering if i should use some
   other of the theme’s css files or contact the theme’s support – if i haven’t 
   done something wrong in style.css of course):
 *     ```
       /*
       Theme Name: The7.2
       Theme URI: http://dream-theme.com/
       Author: Dream-Theme
       Author URI: http://dream-theme.com/
       Description: The7 is perfectly scalable, performance and SEO optimized, responsive, retina ready multipurpose WordPress theme. It will fit every site – big or small. From huge corporate portals to studio or personal sites – The7 will become a great foundation for your next project!
       Version: 2.0.1
       License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
       License URI: License.txt
       Tags: one-column, two-columns, right-sidebar, flexible-width, custom-menu, editor-style, featured-images, post-formats, rtl-language-support, sticky-post, translation-ready
       */
   
       .blog .dt-format-gallery .dt-format-gallery-coll.full,
       .archive .dt-format-gallery .dt-format-gallery-coll.full,
       .search .dt-format-gallery .dt-format-gallery-coll.full
       {
       	display: none;
       }
   
       .wp-caption-text,
       .sticky,
       .gallery-caption,
       .bypostauthor {}
   
       .button_previous_next {
       	-moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
       	-webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
       	box-shadow: 0px 1px 0px 0px #f0f7fa;
       	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
       	background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
       	background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
       	background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
       	background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
       	background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
       	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);
       	background-color:#33bdef;
       	-moz-border-radius:6px;
       	-webkit-border-radius:6px;
       	border-radius:6px;
       	border:1px solid #057fd0;
       	display:inline-block;
       	cursor:pointer;
       	color:#ffffff;
       	font-family:Arial;
       	font-size:15px;
       	font-weight:bold;
       	padding:9px 46px;
       	text-decoration:none;
       	text-shadow:0px -1px 0px #5b6178;
       }
       .button_previous_next:hover {
       	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
       	background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
       	background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
       	background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
       	background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
       	background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
       	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);
       	background-color:#019ad2;
       }
       .button_previous_next:active {
       	position:relative;
       	top:1px;
       }
       ```
   
 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [11 years ago](https://wordpress.org/support/topic/previousnext-post-link-and-css-button-cant-insert-css-in-singlephp/#post-6228159)
 * >  if i should use some other of the theme’s css files and contact the theme’s
   > support
 * yes – the theme’s support is certainly the best to contact with your question,
   particular as you are not able to provide a link to your site.
 *  Thread Starter [Panos Antonopoulos](https://wordpress.org/support/users/quendi3797/)
 * (@quendi3797)
 * [11 years ago](https://wordpress.org/support/topic/previousnext-post-link-and-css-button-cant-insert-css-in-singlephp/#post-6228161)
 * Thanks for the answers. Regardless the correct css file (because i know the button
   code is right) i’m trying to understand the logic of inserting css within php
   so i would appreciate any input.
    This is the code/loop in my single.php. As 
   i wrote above previous/next_post_link is working and i just want to put that 
   inside a button. Thanks in advance.
 *     ```
       get_header( 'single' ); ?>
   
       <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   
       		<?php get_template_part( 'header-main' ); ?>
   
       		<?php if ( presscore_is_content_visible() ): ?>
   
       			<?php do_action( 'presscore_before_loop' ); ?>
   
       <?php previous_post_link('« %link', 'Previous chapter', TRUE); ?>
       <?php next_post_link('%link &raquo', 'Next chapter', TRUE); ?></p>
   
       			<!-- !- Content -->
       			<div id="content" class="content" role="main">
   
       				<?php get_template_part( 'content-single', str_replace( 'dt_', '', get_post_type() ) ); ?>
   
       				<?php comments_template( '', true ); ?>
   
       			</div><!-- #content .wf-cell -->
   
       			<?php do_action('presscore_after_content'); ?>
   
       		<?php endif; // content is visible ?>
   
       <?php endwhile; endif; // end of the loop. ?>
   
       <?php get_footer(); ?>
       ```
   
 *  Thread Starter [Panos Antonopoulos](https://wordpress.org/support/users/quendi3797/)
 * (@quendi3797)
 * [11 years ago](https://wordpress.org/support/topic/previousnext-post-link-and-css-button-cant-insert-css-in-singlephp/#post-6228253)
 * It wasn’t so difficult after all. Here’s a solution example (how to use css button
   and next/previous_post_link in the loop of single.php):
 *     ```
       <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   
       		<?php get_template_part( 'header-main' ); ?>
   
       		<?php if ( presscore_is_content_visible() ): ?>
   
       			<?php do_action( 'presscore_before_loop' ); ?>
   
       <html>
       <head>
       <style>
       .myButton {
       	-moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
       	-webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
       	box-shadow: 0px 1px 0px 0px #f0f7fa;
       	background-color:#4caec9;
       	-moz-border-radius:6px;
       	-webkit-border-radius:6px;
       	border-radius:6px;
       	border:1px solid #057fd0;
       	display:inline-block;
       	cursor:pointer;
       	color:#ffffff;
       	font-family:Arial;
       	font-size:15px;
       	font-weight:bold;
       	padding:3px 5px;
       	text-decoration:none;
       	text-shadow:0px -1px 0px #5b6178;
       }
       .myButton:hover {
       	background-color:#019ad2;
       }
       .myButton:active {
       	position:relative;
       	top:1px;
       }
       </style>
       </head>
       <p style="text-align: left;">
       <body>
       <div class="myButton">
       <?php previous_post_link('<h5><span style="color: #ffffff;">&laquo; %link</span></h5>', '<span style="color: #ffffff;">Previous chapter</span>', TRUE); ?>
       </div>
       <div class="myButton">
       <?php next_post_link('<h5><span style="color: #ffffff;">%link &raquo</span></h5>', '<span style="color: #ffffff;">Next chapter', TRUE); ?></p>
       </div>
       </body>
       </p>
       </html>
   
       			<!-- !- Content -->
       			<div id="content" class="content" role="main">
   
       				<?php get_template_part( 'content-single', str_replace( 'dt_', '', get_post_type() ) ); ?>
   
       				<?php comments_template( '', true ); ?>
   
       			</div><!-- #content .wf-cell -->
   
       			<?php do_action('presscore_after_content'); ?>
   
       		<?php endif; // content is visible ?>
   
       <?php endwhile; endif; // end of the loop. ?>
       ```
   

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘previous/next post link and css button? can't insert css in single.php’
is closed to new replies.

## Tags

 * [CSS button](https://wordpress.org/support/topic-tag/css-button/)
 * [next_post_link](https://wordpress.org/support/topic-tag/next_post_link/)
 * [previous_post_link](https://wordpress.org/support/topic-tag/previous_post_link/)
 * [single.php](https://wordpress.org/support/topic-tag/single-php/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 5 replies
 * 2 participants
 * Last reply from: [Panos Antonopoulos](https://wordpress.org/support/users/quendi3797/)
 * Last activity: [11 years ago](https://wordpress.org/support/topic/previousnext-post-link-and-css-button-cant-insert-css-in-singlephp/#post-6228253)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics