December Crash Course: Freelancer Guide on How to Build a Dynamic Hotel Website with Jupiter X – P2

It was a couple days ago I received
a call from someone asking for a website for his chain of hotels in just one week With listing, filtering, booking and all other capabilities he’s globally known
as the Wolf of Wall Street time is ticking and there is not much time left
before I kick this project’s ass hello my friends this is the second
episode of my journey to create a hotel website for the wolf of Wall Street in a week it’s so hot…. wait In the first episode we defined the custom room post type built a listing for its single page and a nice template for it in this episode
we will create an archive listing for our Room post type where people will be able
to search and filter different rooms and click on the one they’re interested in
so let’s get this thing done and get one step closer to what wolf of Wall Street
wanted. As you recall we created a custom post type for our Room called rooms and
then create a listing for it A listing is an embodiment of the meta fields in a
custom post type with a particular design in the first part we built the
custom post for our rooms and a listing and beautiful design for the single page
the only thing is that the single page is not discoverable by visitors if it’s
not inside a post feed someone should play with filters in your listing page
and find the item they want click on it and enter the single page for that item
before proceeding with the tutorial don’t forget to check if the following
plugins are activated and have the minimum versions below, as you noticed
in addition to what we used in the first part we need the JetSmartFilters
plugin in this part to create the filters required for our archive
listening in this tutorial we’ll cover the following creating a listing
template for our custom post type creating filters for our listing
creating a general listing template so first things first
just like the listing we built for the single page of our custom post type we
need to create a listing for the listing archive in the WordPress dashboard go to
JetEngine>Listings>Add New in the upcoming dialog set listing source to
posts, post type to rooms and give it a name such as rooms archive
and proceed you’ll be taken to the Elementor environment to create a
design template for the new listing add a box section with 374 pixels width and
add 15 pixels bottom padding right click on the column from styles set the
background color as white and from Advanced tab set the bottom padding for
the column as 25 pixels add an image element inside the section set the image
source as dynamic custom image and give it a custom size of 374 pixels width
and 220 pixels height set a dynamic image source and choose field as post
thumbnail add a dynamic field setting thesource to post and the object field to title centralize it and format it as you like I’ll go with 200 pixels
muli bold and this color give it a 15 top 15 bottom padding from the Advanced
tab add a dynamic field set the source to metadata and the meta field to beds,
centralize it and format it as you like I’ll go with 16 pixels
muli and this color, add a dynamic field set the source to metadata and the meta
field to price in order to automatically add the dollar sign before the price in
the dynamic field settings add dollar sign, percentage sign, “s” to the field format you
can style it as you want I put 20 pixels muli bold and this color
added 20 pixels button padding to the price add a dynamic link element set the
sources permalink label it as book now and centralize it format it as 14 pixels
muli white and a 600 plate in normal state set a light red colored background
for it with white as text color in Hover state reverse color by giving the
same light red as text color and white to background color you should define a
solid 1 pixel border colored light red 3 pixels border radius in all
corners and 7 top 15 right 7 bottom and 15 left paddings, in the
WordPress dashboard go to templates save templates
add new select archive as template type and give it a name
add a listing grid element to your page set the rooms archive as listing source
and activate users archive template option in the WordPress dashboard go to
Jupiter X customize, post types, rooms rooms archive and select the page you
just saved and then publish the changes okay what’s next? we just designed how a
room custom post type will appear in the listing now we need to put this inside a
general template for the listing but before that let’s create the filters we
need for the listing sidebar let’s say we need a price range filter and some
check box filters for our room facilities with JetSmartFilters v1.5 installed in the WordPress dashboard go to smart filters add new we’ll give
our filter a label an active filter label set the filter type as range set
value prefix as dollar sign set the minimum and maximum value as you wish
set a step number this is the amount added to the selected range every time
the visitor moves the indicator one step for example if
set to 5, every time you move the indicator to the right or left an amount
five will be added or deducted to the range and finally give the filter a
query variable this query variable will help us connect the filter to its
results in the other hand of the listing page using the same process we should
create checkbox filters for our room facilities the only part that will be
different is set the filter type as checkbox list and data source as manual
input activate the is checkbox meta field option to filter data from
checkbox meta field type created with jet engine plugin in the options list
box check box options for the filter each option should have a value and
label just as an important side note the value for a checkbox option should match
with the checkbox value of the custom meta field it relates to the query
variable value should match with the name or ID of the custom meta field it
relates to with the filters created and the template designed for the
individual listing we can design a general template for the listing on our
website where users can use the filters in the sidebar to define the room
criteria they want and see the results on the other side in the wordpress
dashboard go to pages add new from lower left corner click on Elementor settings
icon and select Elementor full width as page layout keep the main section 55 top
0 right 90 bottom and 0 left pixels paddings from the Advanced tab we need
a 30% and 70% column pair the 30% column in the right will contain the filters and
the 70% column on the left will carry the filter results apply 0 pixel
widget space to the left column from the style tab add a white background color
to the column from the border section add a 6 pixels radius to all corners
of the column from the Advanced tab add margins 5 top 0 right 580 bottom
and 25 left pixels and padding 30 top 30 to right 30
bottom and 32 left for the right column from the Advanced tab add 25 pixels left
paddings to it, add a JX heading element to the left column and edit it to filter
listing format the heading as you like we’ll input muli bold 24 pixels with
cerulean blue color from the Advanced tab give it a 35 pixels bottom padding
to it add another heading element and edit it for the price and format as you
like we’ll go with muli 20 pixels bold with the start blue color keep the
second heading at 25 pixels bottom padding at the range filter element to
the left column select price range as filter and set jet engine for this
filter for. Apply on should be set on click on apply button query ID should be
set to rooms on the styling tab set the color to this blue and border radius to
2 in all corners set the background color to range point will go with this
color and the border radius of 3 pixels to all corners in range sub-tab set this
color in the value section format the text for value we’ll go ahead and put
muli 16 pixels and this dark blue with the top padding of 25 pixels from the
Advanced tab keep the range filter at 20 pixels bottom padding what’s left in
this section of filters is a filter results button drag and apply button
element below the price indicator set it’s query ID as rooms and style it as you
like in the style tab for the normal state button we’ll go with muli 14
pixels weight 600 with white as the color and the cerulean blue as the
background color a solid border of 1 pixel with cerulean blue a border radius
of 3 pixels and a padding of 11 top 25 right, 11bottom and 25 pixels left. For its hover state we’ll swap the color and
background colors finally in the Advanced tab give the button a 30
pixels bottom padding but before that in order to make the filter stand out let’s
change the main section’s color drag the check box filters element below the
filter button select the filters as needed this filter for should be set as
jet engine apply type is Ajax apply on is click on apply button query IDs
should be set rooms in the style tab set 10 for both space between and children
offset. Set the check box size to 20 pixels set the background color to any
color such as this light blue set this cerulean blue for its hover background
color give it a solid border with 3 pixels border radius for all corners set
a light blue background color for the check box icon and set its size to 10
set this color as background color for the check box label now let’s add an
apply button to the check boxes as well just duplicate the bottom we created
above for price range and drag it down below the checkboxes okay what we’re
going to do for the right column is to simply put a listing grid element, set
listing to rooms archive and a column number to 2 in the Advanced tab set the
CSS ID to rooms this will connect our listing grid to the filters on the left
side and that’s it we just created the listing page that holds the listing
filters and the results give it a try and see how the filter is set on the
left side will result in the items on the right hand Alright that’s it for the
second episode of creating a dynamic hotel website with Jupiter X in this
video we created an archive listing for our rooms post type as well as nice
filtering options to filter room attributes in the next crash course we
will cover the third and the last step of the process and every
thing else remaining including the booking capability in the meantime ask
me whatever questions you have below in the comment section and don’t forget to
hit the subscribe button for the next crash course bye

2 Replies to “December Crash Course: Freelancer Guide on How to Build a Dynamic Hotel Website with Jupiter X – P2”

  1. If I already have posts can I move them to the new listing or another question how to add custom fields o posts and then filter them?

Leave a Reply

Your email address will not be published. Required fields are marked *