TUTORIAL WEB AND IT

WordPress Full-Width Single Post for Certain Post Type

Share on FacebookTweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Share on TumblrEmail this to someone

Have you ever wonder why some of this post are displayed in full-width while others are displayed with sidebar next to it?.. So I still have both, the normal WordPress Post style and the full-width style. In fact I can have more than that by adding more styles.

This Tutorial is using CSS Only. it is simple and lightweight.

You might want to do it with your WordPress child-theme to do this. Goggle a WordPress Child-Theme, there will be tons result ready to help you out.
Or you can use custom-css plugins so your customization will save. Using Child-Theme or Custom CSS made our customization update proof. And here it's the trick, I just solved it out couple minutes ago.

 


1. You must set your post to one of these formats (See Pic).
In my case I select "Image". You can use any other than that, just consider which one is not being used by your theme. Because we will use this post type to address the css command. Actually you can also use post-ID to address it but it will take manually edit the css anytime you want a new post you created displayed in full-width. This one much simpler, easy to use and effective.

[merch-ad-disabled][DISCOUNTAD-disable]
postformat

PICK POST FORMAT


2. Now go to  theme editor/css editor:
If you using Child-Theme: Appearance => Editor
If you are using Custom-css plugins the enter the editor. It could be Appearance => Edit CSS

editor

EDIT CSS USING CHILD THEME OR EDITOR


3. In editor paste this code:

.single-format-image  #secondary {
    display: none;
}
.single-format-image #primary {
    width: 100%;
}

 


4. Put single-format-image class infront of any css class or id you want to customize ".single-format-image"

Here's example of mine:

.single-format-image  #secondary {
    display: none;
}
.single-format-image #primary {
    width: 100%;
}
.single-format-image .site-content article {
    padding-right: 60px;
    padding-left: 60px;
    font-size: 125%;
    line-height: 1.5em;
}
.single-format-image .site-content .entry-content h2,
.single-format-image .site-content .comment-content h2,
.single-format-image #tinymce h2 {
    font-size: 24px;
    line-height: 1.5em;
}
.single-format-image .single .site-content .entry-title {
    font-size: 35px;
}
.single-format-image .site-content .entry-content h3,
.single-format-image .site-content .comment-content h3,
.single-format-image #tinymce h3 {
    font-size: 18px;
    line-height: 1.5em;
}
.single-format-image .site-content .entry-content h1,
.single-format-image .site-content .comment-content h1,
.single-format-image #tinymce h1,
.single-format-image .site-content .entry-content h2,
.single-format-image .site-content .comment-content h2,
.single-format-image #tinymce h2,
.single-format-image .site-content .entry-content h3,
.single-format-image .site-content .comment-content h3,
.single-format-image #tinymce h3 {
    margin-bottom: 25px;
}
 

 


5. Now using the Firebug, customize the rest of style with your css creativity.

 

There's no limit to explore this. You can set other custom styles to any post you want. For example; I'm gonna use it for an Art Post. Which there are less distraction around the artwork itself.

 

by Toni Agustian | 2015-04-28

Related posts:

Downloadable Designs...

Leave a Reply

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