fibroidcincinnati

figured it out.

content.php and content-page.php were where i needed to add these areas below the titles.

Okay so I answered the second question myself… i simply remove the function jptweak_remove_share portion of the functions.php and left the add_action part and that fixed the problem with the social sharing areas being removed. so now I am just adding them in addition to where wordpress adds them based on the checkboxes.

But question 1 still remained… how can i move them to below titles in pages/posts? are there other php files I should be looking into editing?

Follow up question on this… it seems that all the social sharing throughout the site is disabled now unless I manually add them with the above code? The social sharing option appears when editing posts and i check the box… however, checking it does nothing on the blog post page. so now i have to go to each template and add them back by hand?

Another example is the page.php template above… when I added the icons above the title it removed them from below the post. So I had to put the code in both places to get them above and below.

So two questions now, 1. how can I get the social sharing below page / post titles?… and 2. Is there a way to modify the above code so it is not removing all the wordpress added social sharing areas?

Here is what I added to my functions.php if you need to see that:

/**
 * Adds functions for manually placing social sharing and likes
 *
 */
function jptweak_remove_share() {
    remove_filter( 'the_content', 'sharing_display',19 );
    remove_filter( 'the_excerpt', 'sharing_display',19 );
    if ( class_exists( 'Jetpack_Likes' ) ) {
        remove_filter( 'the_content', array( Jetpack_Likes::init(), 'post_likes' ), 30, 1 );
    }
}

add_action( 'loop_start', 'jptweak_remove_share' );
?>

I placed the code as you can see here in page.php:

<?php while ( have_posts() ) : the_post(); ?>

<?php
	if ( function_exists( 'sharing_display' ) ) {
    		sharing_display( '', true );
	}

	if ( class_exists( 'Jetpack_Likes' ) ) {
		$custom_likes = new Jetpack_Likes;
		echo $custom_likes->post_likes( '' );
	}
?>

<?php get_template_part( 'content', 'page' ); ?>

This places the social sharing just above the post title (as expected).

Any idea how to change the actual post? To move them below the post title?

Thank you.

So I pulled the page.php fle. Here are it’s contents:

<?php
/**
 * The template for displaying all pages.
 *
 * @package Sela
 */

get_header(); ?>

		<?php while ( have_posts() ) : the_post(); ?>

			<?php get_template_part( 'content', 'hero' ); ?>

		<?php endwhile; ?>

		<?php rewind_posts(); ?>

		<div class="content-wrapper <?php echo sela_additional_class(); ?>">
			<div id="primary" class="content-area">
				<main id="main" class="site-main" role="main">

					<?php while ( have_posts() ) : the_post(); ?>

						<?php get_template_part( 'content', 'page' ); ?>

						<?php
							// If comments are open or we have at least one comment, load up the comment template
							if ( comments_open() || '0' != get_comments_number() ) {
								comments_template();
							}
						?>

					<?php endwhile; // end of the loop. ?>

				</main><!-- #main -->
			</div><!-- #primary -->

			<?php get_sidebar(); ?>
		</div><!-- .content-wrapper -->

<?php get_footer(); ?>

If I want to add sharing icons beneath the title and above the body of the page, how would I do that? / Where would I add those? Am I in the wrong file?

Clarification… I am first trying to do this and edit the static pages I made with the default template…

I couldn’t get that code to work. I abandoned that plan and instead got this to work using a plugin…. It’s called “bop” search plugin and adds the search box to the menu bar. I then used some CSS to modify the style.css and the plugin.php files to style it the way I needed to.

Here is the link
https://www.ads-software.com/support/topic/sela-added-widget-area-alignment-issue

See the thread I created and just closed for this exact solution.

Just marking my own thread as resolved…

i totally just got this to work. I am posting the solution here in case anyone else ever needs it. i have seen many people ask for ways to add text or other things below the hero image and this can accomplish that too so many might find it useful.

This is to modify the frontpage template to 1. Add a widget area beneath the hero section and above the frontpage widget areas for three columns of widgets. These column areas appear under Appearance -> Widgets just as the frontpage widget columns appear. It essentially duplicates the look and functionality of the frontpage widget area.

1. create a child with the appropriate functions.php file.
2. Modify the functions.php file to add the following code. This will create the three widget areas and activate them for the appearance section:

/**
 * Register the subhero widgetized areas.
 *
 */
function arphabet_widgets_init() {

	register_sidebar( array(
		'name'          => 'Frontpage sub-hero area 1',
		'id'            => 'front-sub-hero1',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );

	register_sidebar( array(
		'name'          => 'Frontpage sub-hero area 2',
		'id'            => 'front-sub-hero2',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );

	register_sidebar( array(
		'name'          => 'Frontpage sub-hero area 3',
		'id'            => 'front-sub-hero3',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h3 class="widget-title">',
		'after_title'   => '</h3>',
	) );

}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

3. copy the front-page.php file to your child with the appropriate permissions so you can modify it
4. Modify the front-page.php file by adding the following. You want to add it after </div><!– #primary –> and before <?php get_sidebar( ‘front-page’ ); ?>. This will pull the three widget areas into the frontpage defined by a subhero class that we will style. At first they will run vertically and not in columns but we’ll fix that in the next step:

<div id="primary-subhero-sidebar" class="front-widget-area widget-area" role="complementary">

		<div id="primary-subhero-sidebar-1" class="subhero-1">
			<?php if ( is_active_sidebar( 'front-sub-hero1' ) ) : ?>
				<?php dynamic_sidebar( 'front-sub-hero1' ); ?>
			<?php endif; ?>
		</div><!-- #primary-subhero-sidebar-1 -->

		<div id="primary-subhero-sidebar-2" class="subhero-2">
			<?php if ( is_active_sidebar( 'front-sub-hero2' ) ) : ?>
				<?php dynamic_sidebar( 'front-sub-hero2' ); ?>
			<?php endif; ?>
		</div><!-- #primary-subhero-sidebar-2 -->

		<div id="primary-subhero-sidebar-3" class="subhero-3">
			<?php if ( is_active_sidebar( 'front-sub-hero3' ) ) : ?>
				<?php dynamic_sidebar( 'front-sub-hero3' ); ?>
			<?php endif; ?>
		</div><!-- #primary-subhero-sidebar-3 -->
	</div><!-- #primary-subhero-sidebar -->

5. Style the three widget areas into columns to match the frontpage area below them. Do this by going to Edit CSS to add code to the stylesheet (style.css). Add this code:

/* Front Page subhero Widget Area */
@media screen and (min-width: 768px) {
	.subhero-1 {
		float: left;
		width: 30%;
		margin-right: 5%;
	}

	.subhero-2 {
		float: left;
		width: 30%;
		margin-right: 5%;
	}

	.subhero-3 {
		float: right;
		width: 30%;
		margin-right: 0;
	}
}

That should style them just like the area below. And it also will allow them to run into one column as the screen size decreases at the same value the rest of the page does. So three columns when the area below is three columns, and one column when the area below is one column.

Note that I didn’t go the added step to make sure the columns resized if you didn’t use all three of the new widget columns. This layout is specifically for the use of all three at the same time.

You could easily modify what I have done with the CSS to change the number of areas and adjust the styling /layout accordingly just by changing the values etc. For example, for one column, just reduce the number of widgets you register (in the code above) in the functions.php to only one subhero widget area. Reduce the number of areas you pull in the frontpage.php to this one area. Then, change the style values to width 100% or whatever you want etc.

This way you could not only add a text area below the hero, but add any widget(s) below the hero.

Very proud of myself!

So I made a little progress by adding a class to the div section i added to the frontpage template. I added one called “subhero”. I then went to my Edit CSS and added this to the stylesheet:

.subhero {
	display: flex;
}

which now makes them all flex across the page horizontally… HOWEVER, they do not wrap as the screen size changes with smaller screens or portable devices… so is there a way to apply the wrapping that is defined above to this as screen size changes?

Also, the reason I am trying to modify this is because the text that I enter into the frontpage body overlays on this image, but then as you decrease the width of the browser window it runs “hidden” down off the image and you have to scroll within the body of the text to see all of it. without a scroll bar visible this is not intuitive for the user. this happens when viewing the site on an iPad.

I noticed if I decrease the width of the window further the body text moves to below the image and is fully visible. This does this on my iPhone.

I think I am realizing a possible solution would be to find out where the value is stored for the minimum screen width for overlaying and increase the minimum threshold to a value that allows all of the text to be read.

Is there a way to do that?

Why can’t I just edit the original functions.php?

I edited it (increased the height to 840) and saved it:

// Hero Image on the front page template
add_image_size( ‘sela-hero-thumbnail’, 1180, 840, true );

The new setting appears to be listed in the functions.php but the site is still not rendering at 840. Seems to me that I should be able to change the original file without a child and it should work but it didn’t.

I followed those links and am not sure I understand how to use the remove action to solve this problem. could you give a code example, and where to place that code (in the functions.php, or using the Edit CSS function?)

are the two variables I enter into the remove action ‘sela-hero-thumbnail’ and add_image_size?