WordPress.org

Ready to get started?Download WordPress

Forums

Add button inline with entry-title twenty twelve (6 posts)

  1. fluxappeal
    Member
    Posted 10 months ago #

    My appeal to the WordPress gods today ;)...

    I'm using a twenty twelve child theme to grow my basic skills and am learning so much! But..some things that seem simple still escape me. This is a two-parter.

    First, I would like to place a button on the same line as my entry-title, at the far right side. I created a child content-page.php, created my button class and managed to re-size the entry-title to 50% to make room. My problem is that I can't figure out how to get the button to share space with the entry-title, it always falls below and interrupts my gallery.

    Screenshot here: http://www.arthurtaussig.com/wp-content/uploads/2013/08/Button-screenshot.jpg

    and the content-page code:

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		<header class="entry-header">
    			<h1 class="entry-title"><?php the_title(); ?></h1>
                <button class="right-button">adding button text here</button>
    		</header>
    
    		<div class="entry-content">
    			<?php the_content(); ?>
    			<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
    		</div><!-- .entry-content -->
    		<footer class="entry-meta">
    			<?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>
    		</footer><!-- .entry-meta -->
    	</article><!-- #post -->

    entry css:

    .entry-title {
    	max-width: 50%;
    	display: inline;
    }

    button css:

    .right-button {
    	color: #897C45;
    	font-size: 12px;
    	font-size: 0.857rem;
    	line-height: 14px;
    	width: 30%;
    	max-width: 100px;
    	max-width: 7.143rem;
    	float:right;
    	display:inline;
    	padding: 20px 15px;
    	margin: auto;
    	text-align: center;
    	vertical-align: middle;
    	/*border styles*/
    	border-left: solid 1px #808080;
    	border-top: solid 1px #808080;
    	border-right: solid 2px #232323;
    	border-bottom: solid 3px #232323;
    	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
    	border-radius: 10px;
    }

    Second, said button would only appear on certain pages, and text/links will change, so I imagine I'd need to pull the text and links in through php via.. template part? shortcode? custom field?...I really have no idea. Custom templates for each seems wasteful. Could someone please steer me in the right direction? I'd really appreciate it!

  2. alchymyth
    The Sweeper & Moderator
    Posted 10 months ago #

    please post a live link to the button problem.

  3. fluxappeal
    Member
    Posted 10 months ago #

    @alchymyth,
    The content-page.php is now live with the button, but of course, it's showing on ALL pages so I don't want to leave it up for long.

    http://www.arthurtaussig.com/books/collage-books/

    I did manage to get the button in line with the entry-title, now I just need some direction with the 2nd part, showing a button only on certain pages and with custom text and links. I'm happy to dig deeper on my own, but not too savvy with php. Can you give me some direction?

    Thanks a bunch!

  4. alchymyth
    The Sweeper & Moderator
    Posted 10 months ago #

    showing a button only on certain pages and with custom text and links.

    maybe with
    conditional tags http://codex.wordpress.org/Conditional_Tags
    and
    custom fields http://codex.wordpress.org/Custom_Fields

  5. fluxappeal
    Member
    Posted 10 months ago #

    Thank you Alchymyth, I read up on them yesterday and suspected they might work. Rolling up my sleeves to learn something new! - I'll post my results. Appreciate your input. :)

  6. fluxappeal
    Member
    Posted 10 months ago #

    I took Alcymyth's advice and created two custom fields named "button-text" and "button-link" added them my child content-page.php. I also added the conditions to pull in the text, button and link on pages containing the custom fields.

    Here's my final code:

    <a href="<?php $key="button-link";
    					echo get_post_meta($post->ID, $key, true); ?>" />
    				<?php if (get_post_meta ($post->ID, 'button-text', true) ) : ?>
    				<?php $key="button-text";
    					echo "<div class='right-button'>\n";
    					echo get_post_meta($post->ID, $key, true);?>
                    <?php endif; ?></a>

    This seems to work just right. Here's a link to the button page: http://www.arthurtaussig.com/photographs/citiscapes/

    Since I've already created a bunch of pages that will need these buttons, and I don't want to have to edit the custom fields on each page retroactively, I'll investigate how to add them in bulk to existing pages.

    Cheers!

Reply

You must log in to post.

About this Topic