Read More Button

Homepage › Community Forums › Optimal Theme Support › Read More Button

Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 29, 2012 at 1:24 pm #2216
    Olatunji
    Customer

      I absolutely love this theme and it is perfect for my new website.

      I’ve been using WordPress for years, but I’ve never used read more buttons like the one you have on your demo portfolio page.

      How do I do that? I’ve searched for tutorials on this but what I’ve found only explains how to edit the text.

      I’ve changed read more text on other blogs and I’ve looked at your code with Firebug. But how do I turn it into a button?

      I don’t mind working with hooks if necessary. And I’d like to use the button on the home page, portfolio page, and all other instances where I’m using a post excerpt.

       

      My site is MoviesThatWork.com

       

      Thanks for your help.

      December 29, 2012 at 1:32 pm #2218
      Olatunji
      Customer

        Is this the answer? I don’t want to try it if you have a simpler approach.

        http://wordpress.org/support/topic/how-to-intergrate-read-more-image

         

        December 29, 2012 at 1:56 pm #2219
        Wes
        Moderator

          If you look at the Portfolio Settings (located at the bottom of the Genesis Theme Settings page) you’ll see – “Select one of the following:” you can change that to “Display Post Content” and then add a number to the “Limit Content to:” section.  This is how I have it setup in the demo.

          You can also take a look at this StudioPress tutorial/code snippet page to see how to add/modify the read more links – http://my.studiopress.com/snippets/post-excerpts/#content-more-link ….once you do this, all you have to do is add css to it which is what makes it into a “button”.  Take a look at your css file on or around line 885 and you’ll see an example of where it is already done – “#content .portfolio .more-link“.  Also, the code from this tutorial is already being used on the page_portfolio.php file, so if you add it again you’ll need to change the function name or it will give a duplicate error.

          I created buttons that you can add anywhere manually if you want, you can see them here at this link – http://demo.appfinite.com/optimal/buttons-boxes/ ….the code is at the bottom.

          You may have already seen some of this but I thought I’d share just in case.

          Let me know if that works.

          December 29, 2012 at 2:44 pm #2220
          Olatunji
          Customer

            LOL!

            I knew it was simple. That’s why I asked before I jumped into the code.

            On other sites I use the excerpt instead of content. So I just had to flip that switch to “Display Post Content.”

            Thanks for the quick response. Now I can move on to customizing the slider text.

             

            Blake

            December 29, 2012 at 2:51 pm #2221
            Olatunji
            Customer

              Wait.

              I still want the styled Read More on the home page featured posts. Since that is in a widget, now I need to figure out how to work with snippets inside of a widget if possible. Any ideas?

               

              December 29, 2012 at 3:01 pm #2222
              Wes
              Moderator

                You would just need to add .more-link to your css file and style it.  As mentioned before, if you take a look at line 885 you’ll see an example of it already done for the portfolio css.  You could copy the same code and add it under .more-link and it will change the read more link into a button since it is using the “more-link” class.

                December 29, 2012 at 3:25 pm #2223
                Olatunji
                Customer

                  Thanks!

                  For anyone trying to add the styled more link on your home page, here is how I did it.

                  Go to your style.css file. Search for “#content .portfolio .more-link {”

                  Then copy that entire section.

                  Find a place in the style.css file that works for you and paste the code. Then change the first line by deleting “.portfolio”

                  Worked great for me and it makes the theme look great!

                   

                  #content .more-link {
                  box-shadow: 0px 1px 2px #000;
                  -moz-box-shadow: 0px 1px 2px #000;
                  -webkit-box-shadow: 0px 1px 2px #000;
                  background: #4c5e6b;
                  color: #fff;
                  display: block;
                  font-family: ‘Oswald’,arial,serif;
                  font-size: 14px;
                  line-height: 18px;
                  margin: 10px 2px;
                  padding: 4px 0;
                  text-align: center;
                  text-decoration: none;
                  text-shadow: 1px 1px 1px #333;
                  width: 100px;
                  }

                  December 29, 2012 at 8:04 pm #2224
                  Wes
                  Moderator

                    You’re Welcome!

                  • Author
                    Posts
                  Viewing 8 posts - 1 through 8 (of 8 total)
                  • The topic ‘Read More Button’ is closed to new replies.