How to add Text and Links above Blog Page?

[michaellanfield]

Hi.
My friend and I are creating a site at https://www.thosecrazyvegans.net and we would like to know how to add text and links above the Blog page at https://www.thosecrazyvegans.net/blog without a plugin. Thank you.

[christian]

Hey @michaellanfield,

There is no option for this in X so you will need to do template overriding in your child theme. Copy wp-index.php located in wp-content\themes\x\framework\views\renew then add your content/HTML below this line <div class="<?php x_main_content_class(); ?>" role="main">.

Since this required custom coding, issues arising from this modification and enhancements would be outside the scope of our support. For that, you will need to seek help from a web developer.

We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you.

Thanks.

[michaellanfield]

Hi and thank you for responding. It seems very hard to edit the main page of the blog in any theme. How much would it be to create a short paragraph and link above the blogs in the blog page?

[thai]

Hi There,

Please add the following code to functions.php locates in your child theme:

add_action( 'x_before_view_global__index', 'print_custom_header_for_blog' );
function print_custom_header_for_blog(){
	if( is_home() ){
		?>
		<div id="blog_section" class="x-section" style="margin: 0px;padding: 45px 0px; background-color: transparent;">
			<div class="x-container max width" style="margin: 0px auto;padding: 0px;">
				<div class="x-column x-sm x-1-1" style="padding: 0px;">
					<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, <a href="#">sometimes</a> on purpose (injected humour and the like).</p>
				</div>
			</div>
		</div>
		<?php
	}
}

Hope it helps

[michaellanfield]

@thai

add_action( ‘x_before_view_global__index’, ‘print_custom_header_for_blog’ );
function print_custom_header_for_blog(){
if( is_home() ){
?>
<div id=“blog_section” class=“x-section” style=“margin: 0px;padding: 45px 0px; background-color: transparent;”>
<div class=“x-container max width” style=“margin: 0px auto;padding: 0px;”>
<div class=“x-column x-sm x-1-1” style=“padding: 0px;”>
<p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, <a href="#">sometimes</a> on purpose (injected humour and the like).</p>
</div>
</div>
</div>
<?php
}
}

thank you. worked. You are the best. I was looking for a solution for a long time.

[michaellanfield]

just one more quick question. How to change the font size a little on that?

[christian]

You can add inline style to the HTML tag like this

<p style="font-size:10px">Man..

Further customization from here will be getting into custom development which is outside the scope of our support. Though the code given previously by @Thai worked, please note that could not support issues arising from the use of it and further enhancements. For that, you could contact our in-house custom development at pinnacle@theme.co

Thanks.

[michaellanfield]

Thank you Christian

[michaellanfield]

@christian_y

<p style=“font-size:10px”>

oh the font size code doesn’t work.

[paul.r]

Hi,

I checked and I can see it was added to an empty p tag.

The code should look like this.

add_action( 'x_before_view_global__index', 'print_custom_header_for_blog' );
function print_custom_header_for_blog(){
	if( is_home() ){
		?>
		<div id="blog_section" class="x-section" style="margin: 0px;padding: 45px 0px; background-color: transparent;">
			<div class="x-container max width" style="margin: 0px auto;padding: 0px;">
				<div class="x-column x-sm x-1-1" style="padding: 0px;">
					<p style="font-size:10px;">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, <a href="#">sometimes</a> on purpose (injected humour and the like).</p>
				</div>
			</div>
		</div>
		<?php
	}
}

Hope that helps.

[michaellanfield]

@paul.r

add_action( ‘x_before_view_global__index’, ‘print_custom_header_for_blog’ );
function print_custom_header_for_blog(){
if( is_home() ){
?>
<div id=“blog_section” class=“x-section” style=“margin: 0px;padding: 45px 0px; background-color: transparent;”>
<div class=“x-container max width” style=“margin: 0px auto;padding: 0px;”>
<div class=“x-column x-sm x-1-1” style=“padding: 0px;”>
<p style=“font-size:10px;”>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, <a href="#">sometimes</a> on purpose (injected humour and the like).</p>
</div>
</div>
</div>
<?php
}
}

Works like a charm now. Love you guys.

[friech]

We are delighted to assist you with this.

Cheers!