Adding Audio Player to Heaven’s Corner Premium Template

heavens corner premium theme (photo: themeforest.net)

After much deliberation and anticipation to get help from a premium theme developer to send me a response to my query, I got frustrated like most of us would be. One starts to think of adding to the product that is not there own baby and also increase on the web developing community. I have to give credit where it is due as the heaven’s corner theme is well build with custom post types especially for the events and sermon posts. The key issue hear for the extra customization I wanted was to add an audio player that would cut across all platforms of web browsers without using

  1. Shortcodes
  2. Increasing the WordPress queries
  3. Making the website owner have more work
  4. Add another custom field and code for the website.
Audio Player activated on Heavens corner wordpress theme

Audio Player activated on Heavens corner wordpress theme

Here is what I wanted to create using the information already existing the WordPress database for the website I had developed i.e The Audio/file link in the custom fields to the sermon post type.

We have a few pointers in this project, that’s the old time favourite WordPress codex and voila! No more hustle. Okay here is the real code. Add the development code in the single.php The premium theme already does the calling the different post types. in the first 3 lines of the single.php file. The audio player code that is illustrated in the image is what you need.

Audio Player Sermon Post custom Code for Heavens corner wordpress theme

Audio Player Sermon Post custom Code for Heavens corner wordpress theme

 

 

 

 

 

I only found one glitch after adding this php code. An error occurs on all you other post types. Since the array field “sermon_download” is not in the other post types apart from the sermon post types. So we need to update with the ‘if’ statement to exclude running this code when it is other post types apart from sermon post types.

Updated Audio Player activated custom Code for Heavens corner wordpress theme

Updated Audio Player activated custom Code for Heavens corner wordpress theme

We have added a little metre to help you grade yourself for the skill set needed for this job or what skill set you had attained for using the WordPress API and simple php.

You can find the gist on github here

Web Design
10%
PHP
90%
Wordpress Theme Coding
80%

 

CSS Tools: Reset CSS with box-sizing fix

What would website design in CSS do with Eric Meyer & Cory LaViska’s genius in CSS. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and etc. Though Eric meyer the original brains behind this advises that the CSS reset script he set up should be should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. In other words, this is a starting point, not a self-contained black box of no-touchiness. That’s why he released this without any rights being attached to the public domain for re-use. A copy of the file can be found on Eric Meyer’s website on http://meyerweb.com/eric/tools/css/reset/ Below is the popular code listed. v2.0 | 20110126 License: none (public domain)

*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

 

For simple CSS & HTML projects, where a framework is overkill, we advise you to use Eric Meyers’ CSS reset but also throw in the tried and tested box-sizing fix popularized by Paul Irish. Instead of searching for and combining these snippets every time I need them, here’s a paste-ready version for convenience that Cory LaViska has done


/* CSS reset with box-sizing fix */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,• del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,• table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,• menu,nav,output,ruby,section,summary,• time,mark,audio,video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block
}

html {
box-sizing:border-box;
}

*,*:before,*:after {
box-sizing:inherit
}

body {
line-height:1
}

ol,ul {
list-style:none
}

blockquote,q {
quotes:none
}

blockquote:before,blockquote:after,q:before,q:after {
content:none
}

table {
border-collapse:collapse;
border-spacing:0
}

Enjoy all you Code hunters!!!

Blank CSS for Custom WordPress Theme

It is a while since we migrated to build premium WordPress site for all our clients. But one of the issues that is different with building ordinary HTML sites is you can skip so many elements in the navigation. Not so with the WordPress themes. So we scouted a complete Navigation code to help you to build a solid unbreakable CSS file for your WordPress Navigation. Enjoy! We also included a small something thing for the menu toggle in Mobile sites courtesy of Underscores _s theme

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {}

.main-navigation ul {}

.main-navigation li {}

.main-navigation a {}

.main-navigation ul ul {}

.main-navigation ul ul ul {}

.main-navigation ul ul a {}

.main-navigation ul ul li {}

.main-navigation li:hover > a, .main-navigation li.focus > a {}

.main-navigation ul ul :hover > a, .main-navigation ul ul .focus > a {}

.main-navigation ul ul a:hover, .main-navigation ul ul a.focus {}

.main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul {}

.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {}

.main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a {}

/* Small menu. Added to help the menu toggle for mobile site */
.menu-toggle,
.main-navigation.toggled ul {
display: block;
}

@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: block;
}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}