-2

I need to add a Beta ribbon my site title. I have a wordpress website and would like to add a Beta logo|stamp to the site? How do I go about doing this?

I am launching it to the public, probably a little to early, so I would like to add a ribbon to the site logo or title, showing that it is still in early development so that I can get feedback from people and let people know we are still actively working on the site.

How do I add this to the title? I have a custom css section what would I add to make this happen? I would also prefer the ribbon to be under the title.

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
ExtremeBeginner.
  • 11
  • 5
  • Please give more information about what you are trying to achieve. – Bene Nov 28 '15 at 19:27
  • are you a developer? could you check more about editing wordpress theme at [WordPress Documentation](https://codex.wordpress.org/Main_Page) – Vinícius Fagundes Nov 28 '15 at 19:32
  • i have a website and am launching it probably a little to early. I would like to add [beta] to the site logo|title so that i can get feedback and let people know we are still actively working on the site. How do i add this to the title? I have a custom css section what would I add to make this happen? I would also prefer the [beta to be under the title! – ExtremeBeginner. Nov 28 '15 at 19:33
  • No i am not a developer. – ExtremeBeginner. Nov 28 '15 at 19:35
  • How do I add the Beta Ribbon to my site title? – ExtremeBeginner. Nov 28 '15 at 19:47
  • As this is a relatively new feature of WordPress and, indeed, of css3, It is not easy to find much information about it and I feel that despite it not entirely meeting the SO question format it could be of value to a WordPress beginner trying to get the grips with their first template edits. Please at least undownvote it. Thank you. – Steve Nov 29 '15 at 14:18
  • Thanks Steve. I have been on Stack Overflow for all of 3 days and was not aware of the question format importance! I just needed help. Thank You. – ExtremeBeginner. Nov 29 '15 at 16:43

1 Answers1

1

As always..."there's a plugin for that"...https://wordpress.org/plugins/custom-ribbon-maker/ This looks like some css that would do the trick though it might be limited on ie8 https://css-tricks.com/snippets/css/corner-ribbon/ and http://www.bypeople.com/css-ribbon/ looks pretty.

If you want to do it yourself, if you have a logo image, the easiest way would be to edit the logo image and put the ribbon on that.

You could edit the logo link in your WordPress settings to go to a feedback page and use something like the ContactForm7 plugin to handle the feedback. That might be the tidiest way to do it and it would avoid messing with templates.

If you want to get into editing templates, you could put it into header.php in your child theme if you have one ( I think you do as you mention custom css ) - or in the main theme's header.php but that is not regarded as good practice (editing theme files).

If you don't have a child theme there is a good WordPress.org page on that topic and it really is worth learning to do it all that way, as you never need to worry about losing your edits when your theme gets updated see:https://codex.wordpress.org/Child_Themes

Your theme folder would be wp-content/themes/yourthemename and you would put the child theme folder next to it. You would then put your edited header.php in there alongside the css file which is what tells WordPress you have a child theme.

In header.php in your theme folder you should find something like:

 <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

You could add your Beta Ribbon image next to that as an <img tag. This custom example assumes you put a jpeg called blueribbon.jpg into your theme's images folder and have a feedback page called feedback.php. You would need to add your own class names or id to style it and you could place it in front with a z-index:

 <a class="logo-section" href='<?php echo esc_url( home_url( '/feedback.php' ) ); ?>'<img src='<?php echo esc_url( get_bloginfo('template_directory').'/images/blueribbon.jpg' ); ?>' class="logo" alt='Blue Ribbon'></a>

Your logo image is in a piece of script like this: 

 <img src='<?php echo esc_url( get_theme_mod( 'logotype_url', $defaults['logotype_url'] ) ); ?>' class="logo" alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>'>
                        </a>
Steve
  • 808
  • 1
  • 9
  • 14