While working on designing my new website layout tonight, I ran into several issues. I thought I would post how I solved my problems so others who run into similar issues don’t spend hours banging their heads against a wall.
Problem #1:
Simple Masonry Layout by Raju Tako was causing issues with Font Awesome’s icons.
Solution
The masonry plugin was registering Font Awesome again. From my observations, it seemed like it was conflicting with the Font Awesome code that came with the theme I purchased to use as a framework. The easy answer was to dig through the masonry plugin and search for the offending line of code. I downloaded the plugin source files, opened up simple-masonry-layout.php. I removed the line below:
wp_register_style( ‘font-awesome’, (“http:////netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css”));
Save and re-upload the .php file to where it’s location in your plugins folder. The masonry plugin won’t conflict with your Font Awesome add-ons anymore.
Problem #2
The theme had the page title listed as header text. I wanted to replace the default page title and replace it with something other than “Home” without having to rename my home page, thereby altering my search results in Google and Bing.
Solution
I’ve seen the :after selector many times before. However, I’ve never really used it to edit my content because–well–I never needed to. In order to change the text reading “Home,” all I needed to do was find the CSS classes related to the text and change their visibility to “hidden.” After hiding the text, it was important to change the position to “relative.” This sets us up for the next step.
You will want to copy the CSS class that you used for hiding the original text. Got it? Good. Paste it into wherever you are editing your CSS (whether it’s in the actual CSS file or if you’re using the CSS editor in the WordPress customizer) and add the following selector behind it:
:after
That’s really all there is to it to directly access the space that used to contain your text. See my code below for a visual example. Where it says “RECENTLY POSTED” is where you can change the text that goes there. Everything else is just like how one would normally edit CSS, and you can easily customize everything about it from the font to the size and color.
#frontpage-page .entry-header .entry-title { position:relative;visibility:hidden;}
#frontpage-page .entry-header .entry-title:after {
content:’RECENTLY POSTED’;
visibility: visible;
display: block;
position: absolute;
padding: 0px;
top: 0px;
}
#frontpage-page .entry-header { border-bottom: thin solid #333;}
It’s important to note that the :after selector must include the “visible” visibility setting or the text will not show up. The padding and top settings were useful to keep my text exactly where I had it before making any changes. “Content” will only render pure text, so it’s not useful for adding more HTML coding. For more advanced modifications, you should consider using jQuery.
Problem #3
The theme I purchased thought it would be a good idea to have a slider without customizable text, headers, or images. It literally pulled the featured image, post title, and the first fifty words from a selected post instead. If anyone were to click on it, he or she would be taken to an essentially useless page with no additional content. That’s not what I wanted.
Solution
This one’s not for the faint of heart. I don’t usually mess with the internal PHP coding when it comes to the inner workings. However, this problem got under my skin. I wanted customization. Without breaking it down into the most simplistic terms, here’s an overview of what I did.
The theme was set up to render the slider from a central PHP file. All of the code from the slider was right there. What I did was change this line which was repeated to pull information from the post:
$slider_post_1
For the image it was pulling, I changed the code to a custom function: esc_url( get_theme_mod( ‘slider2image’, ‘#’) )
For the title: <?php echo esc_html( get_theme_mod( ‘slider2title’, ‘#’) ); ?>
For the description text: <?php echo esc_html( get_theme_mod( ‘slider2description’, ‘#’) ); ?>
And for the hyperlink: <a href=”<?php echo esc_url( get_theme_mod( ‘slider2url’, ‘#’) ); ?>”>
This is what the code in the functions PHP file looked like, corresponding with the functions called in my central PHP file for the slider.
// Slider Post #1
$wp_customize->add_setting(‘slider1image’, array(
‘default’ => ”,
‘transport’ => ‘refresh’,
‘sanitize_callback’ => ‘esc_url_raw’
));
$wp_customize->add_control(‘slider1image’, array(
‘type’ => ‘text’,
‘section’ => ‘theme_name_jumbotron_general_section’,
‘label’ => __(‘Slide #1 Image URL’, ‘theme_name’),
));
$wp_customize->add_setting(‘slider1title’, array(
‘default’ => ”,
‘transport’ => ‘refresh’,
‘sanitize_callback’ => ‘esc_html’
));
$wp_customize->add_control(‘slider1title’, array(
‘type’ => ‘text’,
‘section’ => ‘theme_name_jumbotron_general_section’,
‘label’ => __(‘Title’, ‘theme_name’),
));
$wp_customize->add_setting(‘slider1description’, array(
‘default’ => ”,
‘transport’ => ‘refresh’,
‘sanitize_callback’ => ‘esc_html’
));
$wp_customize->add_control(‘slider1description’, array(
‘type’ => ‘text’,
‘section’ => ‘theme_name_jumbotron_general_section’,
‘label’ => __(‘Description’, ‘theme_name’),
));
$wp_customize->add_setting(‘slider1url’, array(
‘default’ => ”,
‘transport’ => ‘refresh’,
‘sanitize_callback’ => ‘esc_url_raw’
));
$wp_customize->add_control(‘slider1url’, array(
‘type’ => ‘text’,
‘section’ => ‘theme_name_jumbotron_general_section’,
‘label’ => __(‘Link URL’, ‘theme_name’),
));
Now, was my solution the most beautiful and efficient on the back-end? Not really, but it did add all the functionality I required without having to pay a more experienced developer a large chunk of change to make a few simple modifications. I left the original code for pulling the featured image alone. I created a dummy post to use just to turn on each slide, and all of the other settings were helpful to override the defaults. By modifying the code, I gained control over the links, images, and text like I wanted.
A few last notes: you will want to be careful how you are sanitizing your text. esc_url_raw is excellent for using with hyperlinks. esc_html is most useful for entering text as it will keep all formatting from quotations and other symbols.
My Takeaway
Sometimes finding solutions means digging through lines of code and experimenting through trial and error to figure out what each function does. If you persist, you’re bound to achieve the results you’re looking for.
