Add PHP Echo to End of WordPress Titles - php

Editing my theme to place a facebook icon immediately to the right of my page titles.
With the old icon (HTML) the following code worked and the icon was placed beside the title:
<h1 class="page-title"><?php _e( 'Nothing Found', 'catch-adaptive' ); ?><a class="genericon_parent genericon genericon-facebook-alt" title="Facebook" href="https://www.facebook.com/karen.b.russell.54" onclick="javascript:window.open('https://www.facebook.com/karen.b.russell.54'); return false;"><span class="screen-reader-text">Facebook</span></a></h1>
Now I am trying to use the php code given to me by a plugin:
<?php echo DISPLAY_ULTIMATE_PLUS();?>
I've done this:
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); echo DISPLAY_ULTIMATE_PLUS();?></h1>
</header><!-- .entry-header -->
The problem is that the echo is displaying the icon below the page title instead right beside it.
How do I position the icon to the right of the title using this plugin's PHP code?
You can view the live site with the new misplaced icon at http://healthylifeadvisors.com/

See if this works;
<header class="entry-header">
<h1 class="entry-title" style="float: left;"><?php the_title(); ?></h1>
<div style="display: inline-block;"><?php echo DISPLAY_ULTIMATE_PLUS(); ?></div>
</header><!-- .entry-header -->
Obviously if you can easily edit the CSS files, you could add the following statements (instead of putting them inline in the HTML), like so;
.entry-title {
float: left;
}
.entry-header > div {
display: inline-block;
}

Related

Fix stacked icons in Main Header on WordPress site using php?

Disclaimer:
My knowledge about coding and website development is basic and self-tought. I do not know what i am doing and will likely not understand your answer.
Situation:
I am developing a website (e-commerce) using WordPress (woocommerce) and am using a theme (Shopkeeper) which I am not willing to abandon given the amount of work put into it already. Nevertheless, I am stuck on a major layout problem with the website's main header.
Shopkeeper theme comes with 5 default main header layouts. None of which achieve what I want. I have selected the layout most closest to what I want (Layout 5).
The header consists of 2 parts:
Logo [Part_1]
Tool icons (whishlist, cart, account and search) [Part_2]
As of right now, [Part_1] and [Part_2] are one monolithic group that I cannot move independently. I want to achieve that Layout 5 goal and have them positioned in separate places.
Failed attempt:
My approach was to dig through the Theme files and find the source code for Layout 5 to change it (given that Shopkeeper Theme does not provide the user with the option to create or modify existing Layouts through the UI). I have found the code below which is contained in the header-centered-menu-under.php file:
Original code corresponding to Layout 5
<?php
$header_width = ( 'full' === Shopkeeper_Opt::getOption( 'header_width', 'custom' ) ) ? 'full-header-width' : 'custom-header-width';
$mobile_class = wp_is_mobile() ? 'is-mobile' : '';
?>
<header id="masthead" class="site-header menu-under <?php echo esc_attr($header_width); ?>" role="banner">
<div class="row">
<div class="site-header-wrapper <?php echo esc_attr($mobile_class); ?>">
<div class="site-branding">
<?php shopkeeper_get_logo(); ?>
</div>
<div class="menu-wrapper <?php echo esc_attr($mobile_class); ?>">
<?php if( !wp_is_mobile() ) { ?>
<?php shopkeeper_get_menu( 'show-for-large main-navigation default-navigation', 'main-navigation', 1 ); ?>
<?php } ?>
<div class="site-tools">
<?php echo shopkeeper_get_header_tool_icons(); ?>
</div>
</div>
</div>
</div>
</header>
I have proceeded to change the code as to have two "independent" Parts. This is what I came up with:
Modified code corresponding to Layout 5 modified
<?php
$header_width = ( 'full' === Shopkeeper_Opt::getOption( 'header_width', 'custom' ) ) ? 'full-header-width' : 'custom-header-width';
$mobile_class = wp_is_mobile() ? 'is-mobile' : '';
?>
<header id="masthead" class="site-header menu-under <?php echo esc_attr($header_width); ?>" role="banner">
<div class="site-header-wrapper <?php echo esc_attr($mobile_class); ?>">
<div class="site-branding">
<?php shopkeeper_get_logo(); ?>
</div>
</div>
</header>
<header id="masthead" class="site-header menu-under <?php echo esc_attr($header_width); ?>" role="banner">
<div class="menu-wrapper <?php echo esc_attr($mobile_class); ?>">
<?php if( !wp_is_mobile() ) { ?>
<?php shopkeeper_get_menu( 'show-for-large main-navigation default-navigation', 'main-navigation', 1 ); ?>
<?php } ?>
<div class="site-tools">
<?php echo shopkeeper_get_header_tool_icons(); ?>
<style>
.site-tools {
position: relative;
margin-top: 1%;
margin-left: 70%;
}
</style>
</div>
</div>
</header>
Problem:
While I seem to have achieved separating [Part_1] from [Part_2] and placed [Part_2] more or less where I wanted, I now have 2 new issues with my Layout 5 modified:
the icons are now stacked (as opposed to their horizontal alignment before the change)
the icons are now preceded by a bullet
What have I done wrong and how can I have the icons aligned horizontally without the bullets ?

WordPress : Need to change text color from a PHP file

I have this PHP file with the folloing code:
<div class="post hentry ivycat-post">
<!-- This is the output of the post TITLE -->
<h2 class="entry-title">
<?php the_title(); ?> <------Click Here
</h2>
What I need is to change the color of the text that says "Click Here". I'm building a website in wordpress and through other options can't change that text color, neither through CSS.
Thank you.
You can just wrap the text inside a span with class.
<div class="post hentry ivycat-post">
<!-- This is the output of the post TITLE -->
<h2 class="entry-title"><?php the_title(); ?> <span class="clickhere"><------Click Here</span></h2>
CSS:
.clickhere {color: red;}
You should be able to change the color by using a:link selector in CSS.
a:link {
color: red;
}
This will affect the whole website, though. You can restrict the effect for a single link by either using a class or an ID.
/* This will only affect links with class "nice" */
a.nice:link {
color: green;
}
/* This will only affect a single link (as IDs must be unique) with ID "awesome" */
a#awesome:link {
color: gray;
}
CSS
.ivycat-post h2.entry-title a{color:#DDD;}
Welcome to stack overflow #BodyvolutiomGym :-)
Kindly search stack overflow to see if question is answered already to avoid getting your question down voted.
Just wrap the text you want to change color of in <span> and set color in style attribute.
<span style="color:red">Click Here</span>
Your entire code looks like this...
<div class="post hentry ivycat-post">
<!-- This is the output of the post TITLE -->
<h2 class="entry-title"><?php the_title(); ?> <------<span style="color:red">Click Here</span> </h2>
Please use like thsis
<div class="post hentry ivycat-post">
<!-- This is the output of the post TITLE -->
<h2 class="entry-title">
<?php the_title(); ?> <------<span style="color:red">Click Here</span>
</h2>

How do I put HTML photos in a different div? PHP I think?

So I have a Wordpress page in the making, and basically I have a title column and a text column.
The issue is that I am using the wordpress text editor, and its putting all of my content into the text column but I want a couple of photos and captions for those photos to go into the title column so that the readers read and theres pictures alongside. I was successful with using position:absolute, except that the photos were no longer responsive to zooming in and out on the webpages.
How can I keep the written content in the text column, and the pictures in the title column and have them still be responsive to zoom that they stay within the title-column with zooming in/out?
(I put the "<" in (<) on purpose)
(<)a href="http://localhost/wordpress/wp-content/uploads/2016/04/18.jpg">
(<)img class="size-medium wp-image-146 alignleft";
(<)src="http://localhost/wordpress/wp-content/uploads/2016/04/18.jpg" alt="Age 18" width="175" height="400" />
(<)div id=caption18>Me around age 18(<)/ div>
/* Two Column Title Layout */
div.title-column {
width: 20%;
float: left;
}
div.text-column {
width: 80%;
float: right;
}
<article class="post page">
<!-- column-container -->
<div class="column-container clearfix">
<!-- title-column -->
<div class="title-column">
<h2><?php the_title(); ?></h2>
</div><!-- /title-column -->
<!-- text-column -->
<div class="text-column">
<?php the_content(); ?>
</div><!-- /text-column -->
</div><!-- /column-container -->
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
?>
If I understood your question right, you are trying to do something like this while retaining the scalability of the image(s)? Note that I had to adjust some of your brackets. I also changed the width of the image to "auto" and the height to "0". This should retain the scalability of the image, but I have not tested it.
<!-- title-column -->
<div class="title-column">
<h2><?php the_title(); ?></h2>
<a href="http://localhost/wordpress/wp-content/uploads/2016/04/18.jpg">
<img class="size-medium wp-image-146 alignleft" src="http://localhost/wordpress/wp-content/uploads/2016/04/18.jpg" alt="Age 18" width="auto" height="0">
</a>
</div><!-- /title-column -->

How to make a picture responsive that is on wordpress custom post type through HTML/CSS

I am a newbie with in-depth work that includes Wordpress & Custom Type Post types. I have my Image correctly placed into wordpress and have successfully implemented the photo onto the "About Page". It works fine as far as desktop mode, but when I go responsive and bring it to tablet/mobile the picture states stationary and does not act responsive when translated to a Tablet/Mobile interface. I have been fiddling around with margins, applying my style syntax into different media queries but seem to get no result once bringing the responsive page down to Tablet or Mobile. Here are is my HTML Code & CSS Code that I have at this moment.
HTML
<?php
/*
Template Name: About
*/
?>
<?php get_header(); ?>
<div class="about" style="">
<h1>Why?</h1>
</div>
<div class="about">
Many may ask the question "Why". Questions such as; "Why is this website relevant?", "Why do I need to know this?" or "Why does this topic even matter?"
Many of those questions can be anwsered in different ways, with different attitudes and opinions, yet the only importance this website offers is Knowledge.
The access of clear and ordered catagories of famous people from the actors all the way up to our goverment officials whom represent us, the United States citizens, the opportunity for individuals that may have this disability to understand that it does not make you less from anyone else, and that it simply gives you the power to express who you are and reach milestones in your lifetime that many "ordinary" people don't.
</div>
<div class="about" style="">
<h1>General Statistics</h1>
</div>
<div class="about">
<img src="<?php the_field('data_graphic');?>"/>
</div>
<main role="main" class="col-md-3">
<!-- section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_content(); ?>
<br class="clear">
</article>
<!-- /article -->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
</article>
<!-- /article -->
<?php endif; ?>
</section>
<!-- /section -->
</main>
<?php //get_sidebar(); ?>
<?php get_footer(); ?>
**CSS**
.about img {
max-width: 100%%;
vertical-align: bottom;
margin-left: 150px;
}
If anyone could help me on figuring this responsive problem out, it would be greatly appreciated.
I do like this:
.about img{
max-width:100% !important;
height:auto;
display:block;
}
Note: This is for responsive images, i remove the position rules, because you can adjust yourself
You image needs to fill 100% of its container.
.about img {
width: 100%;
vertical-align: bottom;
margin-left: 150px;
}

Full Width colour sections but not full width page content

I am using Bootstrap but under the roots.io wordpress template using a 'wrapperless theme'
i am trying to achieve this http://roots.io/ - where there are sections of colour but the page content itself isn't full width.
the answer I have been given is to make the container class 100% - but this just makes all the content full width.
Im really stuck and ive been trying to figure this out for hours. - I know that sounds noobish and it is, but I can't get past this point.
all the page templates take their its style from base.php, code here
<?php get_template_part('templates/head'); ?>
<body <?php body_class(); ?>>
<!--[if lt IE 8]><div class="alert alert-warning"><?php _e('You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.', 'roots'); ?></div><![endif]-->
<?php
do_action('get_header');
// Use Bootstrap's navbar if enabled in config.php
if (current_theme_supports('bootstrap-top-navbar')) {
get_template_part('templates/header-top-navbar');
} else {
get_template_part('templates/header');
}
?>
<div class="wrap container" role="document">
<div class="content row">
<div class="main <?php echo roots_main_class(); ?>" role="main">
<?php include roots_template_path(); ?>
</div><!-- /.main -->
<?php if (roots_display_sidebar()) : ?>
<aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
<?php include roots_sidebar_path(); ?>
</aside><!-- /.sidebar -->
<?php endif; ?>
</div><!-- /.content -->
</div><!-- /.wrap -->
<?php get_template_part('templates/footer'); ?>
</body>
</html>
so Im just not sure how to get past it in any of the page templates
About the first part of your question: "100% width colored parts".
Cause Bootstrap use the box-sizing: border-box model every html-element gets 100% width of its parent by default. So wrap your .container div's in other element (div, header, etc). This wrapper is a direct child of the body and gets 100% width. See: http://bootply.com/87196
<header role="banner" class="banner">
<div class="container" style="background-color:red;">
Header example
</div>
</header>
<div style="background-color:blue;">Elements get 100% width by default</div>
The second part about your page templates. The code you show use the get_template_part(). This function is a core function of WordPress. See http://codex.wordpress.org/Function_Reference/get_template_part#Using_loop.php_in_child_themes. You will find where your templates should be located.
But i think read http://roots.io/roots-101/#theme-templates first.
Thank you, I had a few solutions offered to me yesterday also, in case anyone else looks at this.
my own was simply to remove the .container class from the base.php file. - this just stopped the content of every page being constrained in a container by default. - this way I was able to add sections to the page at full browser width, and add .container inside them to constrain the actual content.
lines 16 and 17 of original base.php
<div class="wrap <?php if ( ! is_front_page() ): ?>container<?php endif; ?>" role="document">
<div class="content <?php if ( ! is_front_page() ): ?>row<?php endif; ?>">
In app.less
.home .main {
padding: 0;
}
Then add your sections like so:
<section class="semantic-section-class">
<div class="container">
<!-- your content -->
</div>
</section>

Categories