How to Set Up Bayside WordPress Theme

May 28, 2013 WordPress

Bayside WordPress Theme is not the fanciest looking theme around, however it is one of the best themes with a working automatic infinite scrolling Pinterest-like feature. Recently I have tested a few of these kind of grid-based themes on different handheld devices, some pretty looking themes would just crash or freeze on a regular Android browser, but Bayside does work quite well with most of the popular browsers. When you setup Bayside theme, there are a few things you might want to know.

Display Adsense / any ads on Homepage – You can easily add an Adsense ad in between your posts. Just add a new post and place your ad code in the meta box “Advertisement Post”. During testing, I created some ad posts and put them under category “ad”. However, I don’t want them to be listed in “Recent Posts”, so I use a plugin called “Recent Posts Plus“. You can easily specify which category you want to exclude in the “Recent Posts” widget. For example, the tag id of category “ad” is 130, I just put the following in WP_Query Options. “10”, “20”, etc are tag id of other categories.

{
“cat”: “10,20,30,40,50,-130”
}

bayside-theme

Auto select featured image for old posts – If you already have a few hundred posts and did not specify any featured image for each old post, it’s a headache to edit each old post one by one. Try Easy Add Thumbnail, just activate the plugin, it will automatically set the featured image to the first uploaded image for that post.

Move the sidebar to the right – The default layout is using a left sidebar. The theme support forum has a solution for moving the sidebar to the right. Here is a copy and paste, place the following to the bottom of the style.css file.

body #sidebar {right:0px; border-left:2px solid #e7e7e9; border-right:none; }
.lt-ie8 body.page-template #sidebar {right:0px;}
body {background-position:top right; background-image:url(images/sidebar-right.png);}
body #content {padding: 22px 318px 15px 20px;}
body #page-content { float:right; max-width:100% !important; margin-left:0px; margin-right:293px; border-left:2px solid #e7e7e9; border-right:none ; border-bottom:2px solid #e7e7e9;}

/* Tablet Styles */
@media only screen and (min-width: 768px) and (max-width: 959px) {
body #content {padding: 22px 0px 15px 18px;}
body #page-content, body #full-width {margin-left:0px; margin-right:0px; padding: 22px 30px 15px 34px; background:#ffffff; border-right:2px solid #e7e7e9; border-bottom:2px solid #e7e7e9; max-width:1000px;
}

}

/* Mobile Styles */
@media only screen and (max-width: 767px) {
body:after {content: “0 to 480px”; background-color: hsla(90,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */

body #content {padding: 22px 0px 12px 18px;}
body #page-content, body #full-width { padding: 22px 20px 12px 20px;margin-left:0px;margin-right:0px;background:#ffffff;border-right:2px solid #e7e7e9;border-bottom:2px solid #e7e7e9; max-width:1000px;
}

}

Remove featured image on post page – If you are using the Easy Add Thumbnail plugin, you will notice that your featured image will appear one more time on top of your blog post page. To remove that, here is another solution from the theme support. Add the following to style.css.

body.single .featured-media {display:none;}

Remove the line “Posted on …. by ….” on blog page – Add the following to style.css.

.post-meta-bayside {display:none !Important;}

Remove the posts’ date and comment info on Homepage – Add the following to style.css.

.time-posted-mini {display:none !Important;}
.comments-mini {display:none !Important;}