customize blog interface

How to customize the blog interface according to different categories with css

in the blog, if not customized, add default to the blog only 1 interface for all categories, but when customers need Customize Blog interface by category for some special categories

For example, here I am making a room introduction for the Hotel in the form of a few featured rooms that I customized from the Blog, If you are interested, see how to customize it below.

How to customize blog interface according to different categories with css

To make it easier to imagine, you can look through the customizable categories (here there is 1 news item, 1 service section) with 2 different interfaces.

customize blog interface customize the blog
customize the blog interface customize the blog

See 2 completely different interfaces, right, here in the “Services” section I removed the sidebar and added the Contact for reservation, of course, I have to css the avatar image.

Customize Blog interface by category

To check the display condition, we use the line of code to check

Check out the article  Adding Widget Display Conditions in WordPress

<?php if ( is_single() && in_category(‘dich-vu’) ) { ?>

Some things here

<?php } ?>

As the line of code, we can understand that satisfying the condition of the category with url = dich-vu will run the right condition,

customize the blog
customize the blog

To apply to Function.php (Why should it be a Function and not a file directly – Simply want to simplify the insertion of code into the file, but manipulate it completely through a file later, update or fix it)

Copy the code and insert it into the function.php file of the theme you are using and Paste the code below

add_shortcode( ‘check’, ‘show_thong_tin’ );
function show_thong_tin() { ?>
<?php if ( is_single() && in_category(‘dich-vu’) ) { ?>
<style>
.entry-author, .post-sidebar, .danhmuc {display:none;}
.large-9 {
max-width: 100% !important;
flex-basis: 100% !important;
}
h1.entry-title {
background-color: #f79542;
color: white;
padding: 10% 0;
text-align: -webkit-center;
margin-top: -20px;
margin-bottom: -15px;
}
.page-wrapper {
padding-top: 30px;
padding-bottom: 30px;
background-color: #141414;
color: white;
}
</style>
<?php } ?>
<?php
}

 

With the above code it does 2 things

  1.  Create a short named [check]
  2. If the url has “dich-vu” it will run the css

Then finished creating the running condition, come here to see that it’s done but it hasn’t run yet, I can hook it to the foot with the following line of code to make the above condition run

add_action( ‘wp_footer’, ‘show_thong_tin’, 100 )
add_shortcode( ‘check’, ‘show_thong_tin’ );
function show_thong_tin() { ?>
<?php if ( is_single() && in_category(‘dich-vu’) ) { ?>
<style>
.entry-author, .post-sidebar, .danhmuc {display:none;}
.large-9 {
max-width: 100% !important;
flex-basis: 100% !important;
}
h1.entry-title {
background-color: #f79542;
color: white;
padding: 10% 0;
text-align: -webkit-center;
margin-top: -20px;
margin-bottom: -15px;
}
.page-wrapper {
padding-top: 30px;
padding-bottom: 30px;
background-color: #141414;
color: white;
}
</style>
<?php } ?>
<?php
}

This line add_action( ‘wp_footer’, ‘show_thong_tin’, 100 ) has inserted the code into the foot to run.

The advantage of this insert – no need to touch any additional customization however, for all pages with service url run this code

Or insert into Blog

As mentioned above we have short [check]

Just put this short in the position where it needs to be displayed and you’re done

you go to Blog / customizer / html affter

insert [check] as shown

Check out the demo I made
Custom conditions: https://papahousetrian.com/villa-2-phong.html
Blog form news: https://papahousetrian.com/vui-tet-thieu-nhi-tai-vinpearl-resort- nha-trang.html

Save it and see the results

Good luck !

5/5 - (3 bình chọn)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Gọi ngay

Facebook Chat

Zalo Chat