-1

I'm using the Twenty Seventeen theme and would like to add an image and some links to the left part under the page title. I searched all over the web, but couldn't find a good solution. Is there any way to accomplish that without creating a custom static page?

enter image description here

  • Sorry, was my question not clear? – user1566515 Jun 26 '17 at 19:14
  • Hi. You didn't mention what are the image and the link about. Some manual link? featured image? Ads? – Jack Johansson Jun 27 '17 at 17:17
  • Is this for pages only? Only the front page? There are many template files to edit, so please be a little more specific about where you need to make edits and what you've already tried. – Spartacus Jun 27 '17 at 18:33
  • @Jack Johansson. Manual link. Any image from the Media Library. – user1566515 Jun 27 '17 at 20:26
  • @Spartacus. This should hopefully work on any page. – user1566515 Jun 27 '17 at 20:29
1
+50

There doesn't seem to be any specific function to hook to, so a back-end solution would require altering the "/template-parts/page/content-page.php template file (via a child theme, preferably), namely adding your desired elements right before the closing </header> tag, for example:

<header class="entry-header">
    <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    <?php twentyseventeen_edit_link( get_the_ID() ); ?>
    <!-- START new code -->
    <img src="http://image-source.jpg">
    <span class="left-text">Insert your text here</span>
    <!-- END new code -->
</header><!-- .entry-header -->

You can also add conditional statements if you wish the new content to be displayed on a specific page/pages, e.g. for a front page:

<!-- START new code -->
<?php if ( is_front_page() ) { ?>
    <img src="http://image-source.jpg">
    <span class="left-text">Insert your text here</span>
<?php } ?>
<!-- END new code -->

for a specific page ID:

<!-- START new code -->
<?php if ( 25 == get_the_ID() ) { ?>
    <img src="http://image-source.jpg">
    <span class="left-text">Insert your text here</span>
<?php } ?>
<!-- END new code -->
  • Thanks. I'm actually already using a child theme. 1) Is there a way to edit content-page.php via WP admin interface? If not, is it possible to edit additional content via WP admin, just like regular page text? 2) If I add content-page.php to the child theme, will the parent's content-page.php be completely ignored? – user1566515 Jun 29 '17 at 21:44
  • @user1566515 to answer your questions, 1) not in the core - you'll need a plugin for that, e.g. the WPide 2) yes, it will; the only file that doesn't get overridden by a child theme if included is the parent's functions.php – Andrii Shekhirev Jun 30 '17 at 5:10
1

If it is related to the_title, you can use filter the_title, but base on twenty seventeen theme code for page template, your custom code will be markup inside h1 element the_title( '<h1 class="entry-title">', '</h1>' );

For example code, just say we need to add only in page with the post id = 2

add_filter( 'the_title', function( $title, $id ) {
    static $i;

    //add conditional page and in loop, i.e post id = 2
    if ( is_page( 2 ) && in_the_loop() ) {
        $i++;

        //add conditional for filter position
        if ( 1 === $i ) {

            //add your code here
            $title .= '<p><img src="image.jpg"></p>';
            $title .= '<p>' . __( 'Text', 'textdomain' ) . '</p>';
            $title .= '<p><a href="#link">' . __( 'Link' ) . '</a></p>';
        }
    }

    return $title;
}, 10, 2 );

Just change the conditional statement to make it work in another posts or pages.

  • Thank you. Is there any advantage to using this approach over what Andrii Shekhirev suggested? – user1566515 Jun 30 '17 at 2:55
  • 1
    I don't say this is as advantage, but with this approach, you don't have to create new file and code in it under your child theme, so you only use it inside functions.php child theme. – Jevuska Jun 30 '17 at 10:35
  • Thanks again! I will go with Andrii Shekhirev's answer, but I wish I could divide the bounty between your two answers :) – user1566515 Jun 30 '17 at 16:32
0

I suppose that the most obvious way is javascript which will be used after the page loaded. By the way WP has included jQuery, so you can:

  1. create styles to achieve a clear two columns design (or use already existing ones if you are using bootstrap-like stylesheets, I'll assume forward that your WP uses it)
  2. find the block of html you want to shift left and assign .column class to it.
  3. It's possible that you will have to wrap both of you columns into a block similar to one with a bootstrap class .row.
  4. Create with jQuery a new element with your image and other content that should be displayed.
  5. Insert the element from the point 3 to the DOM (existing HTML structure of your page) right after opened block .row from the point 2.

That's it. Feel free to ask details on topic.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.