How to Get a Second Project Section

I am looking to add a second project section to our sites homepage, can someone please assist me with how I would achieve this?

Hi @seery89,

Before you do the below actions please backup your file and use instead a child theme!!

You could achieve more projects sections by editing the file front-page-projects.php by copying and pasting right after </section><!–/#projects.front-page-section–> the following code:

<section id="projects" class="front-page-section" style="<?php if( !$general_title && !$general_entry ): echo 'padding-top: 0;'; endif; ?>">
	<?php if( $general_title || $general_entry ): ?>
		<div class="section-header">
			<div class="container">
				<div class="row">
					<?php if( $general_title ): ?>
						<div class="col-sm-12">
							<h3><?php echo illdy_sanitize_html( $general_title ); ?></h3>
						</div><!--/.col-sm-12-->
					<?php endif; ?>
					<?php if( $general_entry ): ?>
						<div class="col-sm-10 col-sm-offset-1">
							<p><?php echo illdy_sanitize_html( $general_entry ); ?></p>
						</div><!--/.col-sm-10.col-sm-offset-1-->
					<?php endif; ?>
				</div><!--/.row-->
			</div><!--/.container-->
		</div><!--/.section-header-->
	<?php endif; ?>
	<div class="section-content">
		<div class="container-fluid">
			<div class="row inline-columns">
				<?php
				if( is_active_sidebar( 'front-page-projects-sidebar' ) ):
					dynamic_sidebar( 'front-page-projects-sidebar' );
				elseif( current_user_can( 'edit_theme_options' ) & defined("ILLDY_COMPANION") ):
					$the_widget_args = array(
						'before_widget'	=> '<div class="col-sm-3 col-xs-6 no-padding widget_illdy_project">',
						'after_widget'	=> '</div>',
						'before_title'	=> '',
						'after_title'	=> ''
					);

					the_widget( 'Illdy_Widget_Project', 'title='. __( 'Project 1', 'illdy' ) .'&image='. esc_url( '/layout/images/front-page/front-page-project-1.jpg' ) .'&url='. esc_url( '#' ), $the_widget_args );
					the_widget( 'Illdy_Widget_Project', 'title='. __( 'Project 2', 'illdy' ) .'&image='. esc_url( '/layout/images/front-page/front-page-project-2.jpg' ) .'&url='. esc_url( '#' ), $the_widget_args );
					the_widget( 'Illdy_Widget_Project', 'title='. __( 'Project 3', 'illdy' ) .'&image='. esc_url( '/layout/images/front-page/front-page-project-3.jpg' ) .'&url='. esc_url( '#' ), $the_widget_args );
					the_widget( 'Illdy_Widget_Project', 'title='. __( 'Project 4', 'illdy' ) .'&image='. esc_url( '/layout/images/front-page/front-page-project-4.jpg' ) .'&url='. esc_url( '#' ), $the_widget_args );
				endif;
				?>
			</div><!--/.row-->
		</div><!--/.container-fluid-->
	</div><!--/.section-content-->
</section><!--/#projects.front-page-section-->

keep in mind that this will copy your entire project section as it is now with all the images that you created, so you need to change them in appearance-> customize-> widgets-> projects->front page sidebar projects.

thank you,

Cristian

Thankyou for the reply however I don’t think I have explained the question clearly enough as your solution simply expands out the existing projected section into a large one.

What I am trying to achieve is having a completely separate second projects section so that I can have a different title, description and images in it. I also want to place this several sections down the page from the first projects section.

If you have a look at our website www.we-support.co.uk you will see what I am trying to achieve.

Thanks for the help!

Hi,

Than, I think the solution would be to insert a widget html in with this code customized as you wish:

<section id="projects" class="front-page-section" style="">
			<div class="section-header">
			<div class="container">
				<div class="row">
		div class="col-sm-12">
							<h3>Accommodation second </h3>
						</div><!--/.col-sm-12-->
																<div class="col-sm-10 col-sm-offset-1">
							<p>We Support operate a variety of Supported Living settings ensuring the highest standards of quality and safety are upheld within our services. Take a look at some of our properties below:</p>
						</div><!--/.col-sm-10.col-sm-offset-1-->
									</div><!--/.row-->
			</div><!--/.container-->
		</div><!--/.section-header-->
		<div class="section-content">
		<div class="container-fluid">
			<div class="row inline-columns">
				<div id="illdy_project-4" class="col-sm-3 col-xs-6 no-padding widget_illdy_project"><a href="/accommodation" title="Kitchen Facilities" class="project" style="background-image: url(&quot;https://i2.wp.com/www.we-support.co.uk/wp-content/uploads/2016/11/Screen-Shot-2016-11-22-at-14.36.56.png?resize=476%2C476&quot;); height: 337px;"><span class="project-overlay"></span></a></div><div id="illdy_project-5" class="col-sm-3 col-xs-6 no-padding widget_illdy_project"><a href="/accommodation" title="Large Detached Properties" class="project" style="background-image: url(&quot;https://i1.wp.com/www.we-support.co.uk/wp-content/uploads/2016/11/IMG_7351.jpg?resize=476%2C476&quot;); height: 337px;"><span class="project-overlay"></span></a></div><div id="illdy_project-3" class="col-sm-3 col-xs-6 no-padding widget_illdy_project"><a href="/accommodation" title="En-Suite Bedrooms" class="project" style="background-image: url(&quot;https://i2.wp.com/www.we-support.co.uk/wp-content/uploads/2016/11/Screen-Shot-2016-11-22-at-14.29.13.png?resize=476%2C476&quot;); height: 337px;"><span class="project-overlay"></span></a></div><div id="illdy_project-6" class="col-sm-3 col-xs-6 no-padding widget_illdy_project"><a href="/accommodation" title="Enclosed Gardens" class="project" style="background-image: url(&quot;https://i0.wp.com/www.we-support.co.uk/wp-content/uploads/2016/11/Screen-Shot-2016-11-22-at-14.35.10.png?resize=334%2C428&quot;); height: 337px;"><span class="project-overlay"></span></a></div>			</div><!--/.row-->
		</div><!--/.container-fluid-->
	</div><!--/.section-content-->
</section>

Thank you,

Cristian

It’s not possible to insert a new widget into the front page they appear to be fixed to the setup in the theme or I would have already done this.

Hi @seery89,

Your request seems that it requires some custom work from a developer, as I received the instructions from the developer team.

I will let you here the instructions from the developer team, but if something is not working as expected you will need to contact a developer as I could not assist you in this custom modification in the free support assistance

  1. Use a child theme
  2. Create a new sidebar like this one : https://github.com/puikinsh/illdy/blob/master/functions.php
    3)Create a new frontpage-projects -> https://github.com/puikinsh/illdy/blob/master/sections/front-page-projects.php
  3. You need to change the sidebar id with the new sidebar created by adding in this section the id created:
    get_template_part( 'sections/front-page', 'projects' ); and you will put in the order desired.

Thank you,

Cristian

Thanks for the reply once again.

I have done the first three points however Where am I adding the final part? I.e. point 4, the text below;

get_template_part( ‘sections/front-page’, ‘projects’ );

in Front page projects, after dynamic_sidebar( ‘front-page-projects-sidebar’ );

I need this too please! Can I please have the private information share @Colorlib Support or @seery89? Thanks!

I’d like to add any type of other section, not necessarily project, but I’m sure same technique would work.

Hi @whitparks,

As I said also to seery89 it requires some custom work from a developer, as I received the instructions from the developer team.

I will let you here the instructions from the developer team, but if something is not working as expected you will need to contact a developer as I could not assist you because this falls good outside the support plan but more in the custom work type.

  1. Use a child theme-see instruction on how to use a child theme
  2. Create a new sidebar like this one : https://github.com/puikinsh/illdy/blob/master/functions.php
    3)Create a new frontpage-projects -> https://github.com/puikinsh/illdy/blob/master/sections/front-page-projects.php
  3. You need to change the sidebar id with the new sidebar created by adding in this section the id created:
    get_template_part( ‘sections/front-page’, ‘projects’ ); and you will put in the order desired.

Thank you,

I couldn’t manage to get this working it just blank screens everytime.

Did you manage to get this working?

Hi @seery89,

This was posted as an future enhancement for this theme, due to the fact that it requires some custom work.

I will keep you updated

Thanks,

Cristian

Hi @colorlibsupport! Was this issue updated by the developers? :slight_smile: I am interested in creating multiple “full-width” sections. Thanks!

Hi there

Im sorry but not yet :frowning: