My OpenClassrooms Front-End Dev Journey — Project 2: WordPress realtor’s website

The first time I ever worked on a WordPress website was in July 2019 and didn’t prepare me for Project 2. Of all the projects I have currently completed, this was relatively difficult to create.

The project was about creating a realtor’s website to display chalets on sale and rent.

The theme I used for this website was Rivington, a dark real estate theme. It was simple, professional, and had contrasting but complementary colours.

I won't be going into everything I did, but only the areas that I liked working on.

Footer

The themes footer had all its elements stacked one on top of the other, but I wanted it to display inline on larger screens, like desktops.

Vertically stacked footer

I used the following CSS to convert the above footer to an inline-flex element

footer aside.widget-area {
display: inline-flex;
}
footer aside section.widget_nav_menu {
margin-top: 0;
}
footer aside section.wpcw-widget-contact{
margin: auto;
margin-top: 0;
}
Flex footer

The above CSS makes the entire footer a flex element and removes the top margin of the Contact Us and Footer menu section, to vertically align it with the Search section. The Contact Us section is further changed to have an auto margin to align it horizontally with equal spacing between the Search and Footer menu section

Search Page

The original list of search results display did not match the other lists within the website, so I made both CSS and PHP changes in the following areas.

Original search list item

The parent theme of Rivington is Varia, which is also added during the installation of Rivington. The first change made was to create a new template for each search list item. This was done in wp-content/themes/varia-wpcom/template-parts/content. A new PHP page called content-list.php was created here.

The above code is similar to the wp-content/themes/varia-wpcom/template-parts/content with some minor changes made to the placement of the HTML elements.

Next, I updated the search page to pick this template for each of the search results found in wp-content/themes/varia-wpcom/search.php.

search.php

The key areas or change are;

<div class="search-list"><!-- Add this line to get the CSS to work-->
<?php
while ( have_posts() ) :
the_post();
//Change the 'excerpt' on this line to 'list'
get_template_part( 'template-parts/content/content', 'list' );
endwhile;
.
.

Finally, I added new CSS to convert the search items to the image below.

.attachment-post-thumbnail.size-post-thumbnail.wp-post-image{
width: 150px;
height: 150px;
}
.search-list{
text-align: center;
}
div.search-list article{
display: inline-flex;
margin: 0 1rem;
border-bottom: 2px white solid;
}
div.search-list div.entry-content{
text-align: left;
padding-left: 1rem;
}
div.search-list div.entry-content p{
font-size: 1.1rem
}

The above styling gives a flex display to the list item, aligns the text elements to the left and displays a bottom white border.

This list now matches with others on the website.

To recap;

  1. I created a new list item template for the theme Varia with PHP and CSS
  2. I updated the footer styles to display inline on larger screens with CSS.

Thanks for the read, and I hope you get to use it sometime!

Find a list of all similar posts, here.

Find the next project “Project 3 — Film festival website”, here.

Front End Developer at Switchd Ltd. | MSc in Computer Science @ QMUL (2022)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store